hugo-batsite/public/scss/main.css

@charset "UTF-8";
* {
  transition: 2s; }

body {
  background-color: #413c74;
  color: #ff8ad0;
  transition: 2s; }
  body.light {
    background-color: #ffffff;
    color: #413c74; }

a {
  background-color: transparent;
  color: #ffdc6d;
  transition: 2s; }
  a.light {
    background-color: transparent;
    color: #9b5bb4; }

a.footer-nav-item.active,
a.footer-nav-item:hover {
  color: #ff8ad0;
  background-color: #413c74;
  border-color: #413c74;
  transition: 0.2s; }
  a.footer-nav-item.active.light,
  a.footer-nav-item:hover.light {
    color: #413c74;
    background-color: #ffffff;
    border-color: #ffffff; }

footer {
  background-color: #ff8ad0;
  color: #413c74;
  transition: 2s; }
  footer.light {
    background-color: #413c74;
    color: #ffffff; }

footer a {
  color: #413c74;
  background-color: #ff8ad0;
  transition: 2s; }
  footer a.light {
    color: #ffffff;
    background-color: #413c74; }

.togglelabel {
  background-color: #ff8ad0;
  border-color: #413c74;
  transition: 2s; }
  .togglelabel.light {
    background-color: #413c74;
    border-color: #ffffff; }

.togglelabel.light::after {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #413c74;
  transition: 2s; }

.togglelabel::after {
  background-color: #413c74;
  border-color: #413c74;
  color: #ff8ad0;
  transition: 2s; }

body.light #title {
  color: #ffffff;
  background-color: #413c74;
  transition: 2s; }

body #title {
  color: #413c74;
  background-color: #ff8ad0;
  transition: 2s; }

article {
  background-color: #413c74;
  border-color: #ff8ad0;
  transition: 2s; }
  article.light {
    background-color: #ffffff;
    border-color: #413c74; }

h2 {
  background-color: #ffdc6d;
  color: #413c74;
  transition: 2s; }
  h2.light {
    color: #ffffff; }

h2 a {
  color: #413c74; }
  h2 a.light {
    color: #ffffff; }

h3 {
  background-color: #61d478;
  color: #413c74;
  transition: 2s; }

h3 a {
  color: #413c74; }
  h3 a:hover {
    background-color: transparent; }

h3.light {
  background-color: #5183b9;
  color: #ffffff;
  transition: 2s; }
  h3.lighta {
    color: #ffffff; }

h5,
h6,
h4 {
  background-color: #ffffff;
  color: #413c74;
  transition: 2s; }
  h5 a,
  h6 a,
  h4 a {
    color: #413c74;
    background-color: transparent; }

h4.light,
h5.light,
h6.light {
  background-color: #413c74;
  color: #ffffff;
  transition: 2s; }

h2.light {
  background-color: #9b5bb4;
  color: #ffffff;
  transition: 2s; }

article.light a {
  background-color: transparent;
  color: #9b5bb4;
  transition: 2s; }
  article.light a.hash-link {
    color: #ffffff; }
  article.light a.hash-link:hover {
    background-color: transparent;
    color: #ffffff; }

a:hover {
  color: #413c74;
  background-color: #ffdc6d;
  transition: 0.2s;
  border-color: #ffdc6d; }

.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover {
  color: #ffffff;
  background-color: #9b5bb4;
  transition: 0.2s;
  border-color: #9b5bb4; }

.light.hash-link:hover,
.hash-link:hover {
  background-color: transparent;
  transition: 2s; }

h1a.light,
h2a.light,
h3a.light,
h4a.light,
h5a.light,
h6a.light {
  background-color: transparent;
  color: #ffffff; }
  h1a.light:hover,
  h2a.light:hover,
  h3a.light:hover,
  h4a.light:hover,
  h5a.light:hover,
  h6a.light:hover {
    background-color: transparent; }

header.light {
  background-color: #ffffff;
  transition: 2s; }

header {
  transition: 2s; }

.posttitle a {
  background-color: transparent;
  color: #413c74; }
  .posttitle a:hover {
    background-color: transparent; }

button {
  color: #413c74;
  background-color: #ff8ad0;
  border-color: #413c74; }
  button:hover {
    transition: 0.2s;
    background-color: #413c74;
    color: #ff8ad0; }
  button.light {
    color: #ffffff;
    background-color: #413c74;
    border-color: #ffffff; }
    button.light:hover {
      transition: 0.2s;
      background-color: #ffffff;
      color: #413c74; }

#pageindicator {
  background-color: transparent; }
  #pageindicator.light {
    color: #ffffff; }
  #pageindicator:hover {
    background-color: transparent; }

#hamburger-bg {
  background-color: #413c74; }
  #hamburger-bg .hamburger-nav-item {
    background-color: transparent;
    color: #ffdc6d;
    border-color: #ffdc6d; }
    #hamburger-bg .hamburger-nav-item:hover {
      background-color: #ffdc6d;
      color: #413c74; }
  #hamburger-bg.light {
    background-color: #ffffff; }
    #hamburger-bg.light .hamburger-nav-item {
      color: #9b5bb4;
      border-color: #9b5bb4; }
      #hamburger-bg.light .hamburger-nav-item:hover {
        background-color: #9b5bb4;
        color: #ffffff; }

html,
body {
  height: 100%;
  flex: auto; }

footer {
  min-height: 42pt;
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0; }

#content {
  min-height: calc(100% - 42pt * 3);
  right: auto;
  margin-bottom: 84pt; }

#content p,
#content ul,
#content ol,
#content table,
code,
.postdescription,
hr {
  margin-right: 24%;
  margin-left: 24%; }

p code {
  margin-left: 0;
  margin-right: 0; }

#content ol ol,
#content ul ul {
  margin-left: 0.12em; }

#footer-left {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 24pt;
  justify-self: left;
  margin-right: auto;
  display: inline-flex;
  align-items: center; }

#footer-right {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  justify-self: right;
  margin-right: 24pt;
  align-content: center;
  display: inline-flex; }

#footer-center {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  justify-self: center;
  display: inline-flex; }

* {
  padding: 0;
  margin: 0; }

#footer-right * {
  display: flex;
  margin-top: auto;
  margin-bottom: auto; }

#footer-center * {
  display: flex;
  margin-right: 8pt;
  margin-left: 8pt;
  margin-top: auto;
  margin-bottom: auto;
  justify-content: center;
  align-items: center; }

.postinfo {
  text-align: right; }

h1,
h2,
h3,
h4,
h5,
h6 {
  padding-right: 6%;
  margin-right: 6%;
  padding-top: 12pt;
  padding-bottom: 12pt;
  justify-content: right;
  display: flex;
  align-items: center;
  text-align: right; }

h2,
h3,
h4,
h5,
h6 {
  margin-top: 1em;
  margin-bottom: 1em; }

article {
  margin-inline: auto; }

.titlecontainer,
header {
  width: 100%;
  padding-top: 42pt; }

#hamburger-bg {
  position: fixed;
  width: 100%;
  height: calc(100% - 42pt);
  left: 0pt;
  top: 0pt;
  right: 0;
  transition: 0s;
  display: grid;
  align-items: center;
  justify-content: center; }
  #hamburger-bg * {
    display: grid;
    margin-top: 0.24vh;
    margin-bottom: 0.24vh;
    text-align: center; }
  #hamburger-bg.hidden {
    display: none; }

#darkmode-button-small {
  margin-right: 8pt; }

@font-face {
  font-family: CaskaydiaCove;
  src: url(/font/CaskaydiaCove.ttf); }

@font-face {
  font-family: CaskaydiaCoveMono;
  src: url(/font/CaskaydiaCoveMono.ttf); }

* {
  font-family: CaskaydiaCove;
  font-size: 12pt;
  text-overflow: clip; }

p,
.postdescription,
ul {
  line-height: 2em; }

h1 {
  font-size: 42pt; }

h2 a {
  font-size: 42pt;
  font-style: bold; }

h3 a, h4 a {
  font-size: 32pt; }

h5 a, h6 a {
  font-size: 24pt; }

a {
  text-decoration: none; }

footer * {
  font-size: 24pt;
  font-family: CaskaydiaCoveMono; }

label::after {
  font-family: CaskaydiaCoveMono;
  font-size: 24pt; }

h6 {
  font-style: italic; }

::before,
code {
  font-family: CaskaydiaCoveMono; }

* {
  border-width: 2pt; }

input[type="checkbox"] {
  cursor: pointer; }

.toggleinput {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  overflow: hidden; }

.togglelabel {
  width: 42pt;
  height: 24pt;
  border-radius: 48pt;
  cursor: pointer;
  align-items: center;
  display: flex; }

.togglelabel::after {
  left: calc(100% - 67pt);
  content: "";
  position: absolute;
  height: 20pt;
  width: 20pt;
  border-width: 1pt;
  border-radius: 100pt;
  transition: 1s;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "";
  border-style: solid; }

input:checked + label:after {
  left: calc(100% - 49pt); }

input:checked + label::after {
  content: "滛"; }

.footer-nav-item,
button {
  border-radius: 100%;
  height: 1em;
  width: 1em;
  justify-content: center;
  align-items: center;
  border-style: solid;
  cursor: pointer; }

.togglelabel {
  border: solid; }

h1,
h2,
h3,
h4,
h5,
h6 {
  border-top-right-radius: 48pt;
  border-bottom-right-radius: 48pt; }
  h1 .hash-link:hover,
  h2 .hash-link:hover,
  h3 .hash-link:hover,
  h4 .hash-link:hover,
  h5 .hash-link:hover,
  h6 .hash-link:hover {
    cursor: pointer; }
    h1 .hash-link:hover::before,
    h2 .hash-link:hover::before,
    h3 .hash-link:hover::before,
    h4 .hash-link:hover::before,
    h5 .hash-link:hover::before,
    h6 .hash-link:hover::before {
      content: ""; }

.postdescription,
#content p,
#content ul,
#content ol,
#content table {
  border-left-style: solid;
  border-width: 0.24em;
  padding-left: 2em; }

p a,
.postdescription a,
ul a {
  border-style: solid;
  padding: 0.12em; }

#hamburger-bg .hamburger-nav-item {
  border-style: solid;
  padding: 0.12em; }

#hamburger-button,
#hamburger-bg,
#darkmode-button-small {
  display: none; }

@media screen and (max-width: 640pt) {
  #footer-center,
  #darkmode-toggle,
  #darkmode-toggle-label {
    display: none; }
  #hamburger-button,
  #darkmode-button-small,
  #hamburger-bg,
  #hamburger-bg #darkmode-toggle-label,
  #hamburger-bg #darkmode-toggle {
    display: flex; }
  #hamburger-bg #darkmode-toggle,
  #hamburger-bg #darkmode-toggle-label {
    position: absolute;
    bottom: 1em;
    right: 1em; } }