@font-face {
    font-family: byte;
    src: url('https://confettiguts.gay/fonts/byte.ttf');
}
@font-face {
    font-family: cute;
    src: url('https://confettiguts.gay/fonts/toocute.ttf');
}
body {
    width: 45em;
    margin: 3em auto;
    font-family: byte;
    color: #34001B;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #ff5db6 #ffffff00;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff00;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ff5db6;
    border-radius: 1em;
  }
a, a:hover, a:active, a:link, a:visited {
    color: #ff5db6!important;
    text-decoration: none;
    border-bottom: 1px dotted #ff5db6;
}
@-webkit-keyframes bg-scrolling-reverse {
  100% { background-position: 49px 49px; }
}
@-moz-keyframes    bg-scrolling-reverse {
  100% { background-position: 49px 49px; }
}
@-o-keyframes      bg-scrolling-reverse {
  100% { background-position: 49px 49px; }
}
@keyframes         bg-scrolling-reverse {
  100% { background-position: 49px 49px; }
}

@-webkit-keyframes bg-scrolling {
  0% { background-position: 49px 49px; }
}
@-moz-keyframes    bg-scrolling {
  0% { background-position: 49px 49px; }
}
@-o-keyframes      bg-scrolling {
  0% { background-position: 49px 49px; }
}
@keyframes         bg-scrolling {
  0% { background-position: 49px 49px; }
}

.background {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(https://confettiguts.gay/siteImg/fctinBg.png) repeat 0 0;
  -webkit-animation: bg-scrolling-reverse 3s infinite;
  -moz-animation:    bg-scrolling-reverse 3s infinite;
  -o-animation:      bg-scrolling-reverse 3s infinite; 
  animation:         bg-scrolling-reverse 3s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function:    linear;
  -o-animation-timing-function:      linear;
  animation-timing-function:         linear;
}
main {
    z-index: 2;
    position: relative;
    background: #fff0f5;
    border: 2px dotted #ff5db6;
    width: 100%;
    height: 50em;
    border-radius: 1em;
}
.inner {
    border: 2px dotted #ff5db6;
    width: 95%;
    height: 95.5%;
    margin: 1em auto;
    border-radius: 0.5em;
    background: white;
    text-align: center;
    overflow: auto;
}
.inner p {
    width: 80%;
    margin: 2.5em auto 0.5em;
    line-height: 0.8em;
}
.divider {
    width: 45%;
    margin: 1em auto;
    display: block;
    image-rendering: pixelated;
}
#mainHead {
    font-size: 3em;
    margin: 0.5em auto 0.3em;
    width: fit-content;
    display: block;
    font-family: cute;
    font-weight: normal;
}
.subHead {
    font-size: 2em;
    font-family: cute;
    font-weight: normal;
    font-style: italic;
    margin: 1.25em auto 0.2em;
}
.navLink {
    color: #ff5db6;
    font-size: 1.5em;
    display: block;
    width: fit-content;
    margin: 0.1em auto;
    line-height: 1.2em;
}
.diaryLink {
    color: #ff5db6;
    font-size: 1.5em;
    display: block;
    width: fit-content;
    margin: 0.1em auto 1em;
    line-height: 1.2em;
}
.diaryLink span {
    padding: 0 0.5em;
    border: 2px solid #ff5db6;
    border-radius: 1em;
    display: block;
    width: fit-content;
    margin: 0.2em auto;
}
.inactive {
    color: #db469857!important;
    text-decoration: line-through!important;
    font-style: italic!important;
}
#back {
    padding: 0.5em 1em;
    border: 2px dotted #ff5db6;
    font-size: 2em;
    display: block;
    width: fit-content;
    margin: 1em auto 0.9em;
    border-radius: 1em;
    line-height: 0.8em;
}
@media screen and (max-width: 799px) {
  body {
    width: 100%;
    margin: 0;
  }
  main {
    width: 95%;
    margin: 1em auto;
  }
  #mainHead {
    font-size: 2.4em;
    width: 95%;
  }
  .diaryLink {
    max-width: 85%;
  }
}