/* Retro Frontend */
html {
     background: url(../img/rf/bg.gif) repeat;
     color: white;
     font-size: 17.5px;
    }
pre, code {
    font-family: monospace;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
.mof--hidden {
    display: block;
}
.rf--hidden {
    display: none;
}
.footer {
    text-align: center;
    padding: 16px;
}
a {
    color: white;
}
#link, #postlink {
    text-decoration: none;
}
#link:hover,
#link:focus,
#postlink:hover,
#postlink:focus {
    text-decoration: underline;
}
#blog {
    padding-top: 32px;
    padding-bottom: 32px;
}
#blog li,
#blog ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.blogpost img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px auto;
}
.head,
.section {
     padding-top: 16px;
     padding-bottom: 16px;
     flex-grow: 1;
}
.section.nopadding {
    padding: 0;
}
#eighteightthreeone {
    image-rendering: pixelated;
    padding-left: 2px;
    padding-right: 2px;
    transition: 0.2s;
}
#nocss {
    display: none;
}

/* Modern Frontend */

    @supports (gap: 0.5em) {
   .tag {
       display: block;
       background-color: rgb(70, 82, 95);
       color: rgb(189, 216, 229);
       padding-top: 1px;
       padding-bottom: 1px;
       padding-left: 3px;
       padding-right: 3px;
       border-radius: 5px 5px 5px 5px;
       border: 5px 5px 5px 5px white;
       text-decoration: none !important;
       font-style: normal;
       transition: 0.2s;
  }
  #tagarray {
      display: inline-flex;
      gap: 0.5em;
      list-style-type: none;
      padding-left: 0;
      margin: 0;
   }
   .stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.1s linear;
    animation: fadein 0.3s;
}
.star {
    position: fixed;
    background: url('../img/star.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    animation: star 60s linear infinite;
    animation-delay: 0.9s
}
.star1 { width: 30px; height: 30px; top: 5vh; left: 10vw; }
.star2 { width: 25px; height: 25px; top: 8vh; left: 30vw; }
.star3 { width: 35px; height: 35px; top: 10vh; left: 50vw; }
.star4 { width: 28px; height: 28px; top: 6vh; left: 70vw; }
.star5 { width: 32px; height: 32px; top: 12vh; left: 85vw; }
}
@supports (display: flex) {
html {
    background-size: 100% 300px, auto;
    background: linear-gradient(
    to bottom,
      rgb(7, 40, 54) 0px,      
      rgb(28, 42, 51) 150px
    ) no-repeat, rgb(28, 42, 51);
    background-color: rgb(28, 42, 51);
    color: rgb(189, 216, 229);
    font-size: 1.1rem;
    font-family: "inter", monospace, sans-serif;
}
.content {
    padding-top: 16px;
    padding-bottom: 16px;
}
.blogpost p,
.blogpost li {
    line-height: 1.3;
}
.center {
    display: block;
    text-align: center;
}
a,
.navbar #link,
#postlink {
     color: rgb(189, 216, 229);
}
.list {
    margin-top: 3px;
    margin-bottom: 3px;
}
.list.nobullet {
    list-style-type: none;
    margin-top: 3px;
    margin-bottom: 3px;
}
.list li, .list.nobullet li {
    padding-top: 3px;
    padding-bottom: 3px;
}
  #rssfallback {
    display: none;
  }
  .head.hasbtn .button {
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
}
.navbar {
    opacity: 0;
    transform: translateY(-20px);
    animation: slide 0.4s ease-out forwards;
    padding: 24px;
    font-family: "quicksand";
    font-size: 1rem;
    text-transform: lowercase;
}
.mof--hidden {
    display: none;
}
.rf--hidden {
    display: block;
}
#logo {
    background: url('../img/logo.png') no-repeat center center;
    background-size: contain;
    width: 195px;
    height: 71px;
    margin: 0 auto;
    padding-bottom: 1%;
}
#title {
    font-weight: bold;
    font-size: 32px;
    font-family: "quicksand";
}
.section {
    font-weight: bold;
    font-size: 24px;
    font-family: "quicksand";
}
#postlink {
    font-weight: bold;
    font-size: 28px;
    font-family: "quicksand";
}
#link,
#postlink {
    position: relative;
    transition: 0.2s;
}
#link,
#link:hover,
#link:focus,
#postlink,
#postlink:hover,
#postlink:focus {
    text-decoration: none;
    }
#link::after,
#postlink::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
#link:hover::after,
#link:focus::after,
#postlink:hover::after,
#postlink:focus::after {
    transform: translateX(-50%) scaleX(1);
}
a.button, button.button {
      background-color: rgb(70, 82, 95);
      color: rgb(189, 216, 229);
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 15px 15px 15px 15px;
      border: 15px 15px 15px 15px white;
      text-decoration: none !important;
      transition: 0.2s;
  }
a.button:hover, .navbtn:hover, .tag:hover, button.button:hover {
    background-color: rgb(58, 66, 75);
}
button.button:disabled {
    background-color: rgb(70, 82, 95);
    opacity: 0.5;
    cursor: not-allowed;
}
.content {
    animation: fade 0.3s ease-in-out;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}
#eighteightthreeone:hover {
    box-shadow: 0 2px 8px rgba(189, 216, 229, .3);
    text-decoration: none !important;
}
.head.hasbtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
    .navbar #link {
    font-size: 25px;
  }
}
}
@media (min-width: 768px) {
  .content {
    margin-left: 100px;
    margin-right: 100px;
    padding: 16px;
  }
  .blogpost img {
    max-width: 80%;
  }
}
@media (min-width: 1024px) {
  .content {
    margin-left: 200px;
    margin-right: 200px;
    padding: 16px;
  }
  .blogpost img {
    max-width: 65%;
  }
}
@keyframes slide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fade {
  from {top: -25px; opacity: 0;}
  to {top: 0px; opacity: 1;}
    }
@keyframes star {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, 3px) rotate(180deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}
@font-face {
    font-family: "inter";
    src: url("../css/fonts/inter.ttf");
}
@font-face {
    font-family: "quicksand";
    src: url("../css/fonts/quicksand.ttf");
}