@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Gluten:wght@100..900&family=Short+Stack&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=The+Girl+Next+Door&display=swap');

body {
  background: black;
  color: white;
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3vw;
  text-shadow: 2px 2px 4px #0F2A30;
  overflow: auto;
  cursor: default;
}

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    body {
      background: black;
      color: white;
      font-family: "Comic Neue", cursive;
      font-weight: 400;
      font-style: normal;
      font-size: 1.3vw;
      text-shadow: 2px 2px 4px #0F2A30;
      overflow: hidden;
      height: 100%;
      cursor: default;
      margin-top: 8px;
    }
}

figcaption {
  text-align: center;
  font-size:1vw;
  font-style:italic;
  padding-top:0.3vw;
  }


ul {
  margin-left: 4vw;
  padding: 0;
}
/*========================The Issue of Ugly IMG links==================================*/
.imglink:any-link {
  color: brown;
  }
.imglink:hover {
  background-color: transparent;
  color: brown;
  }
  
/*========================Spoiler==================================*/
.spoiler {
  color:transparent;
  background-color:black;
  }
.spoiler:hover, .spoiler:active {
  color: White;
  }
/*========================SMALL TEXT==================================*/
.smalltext {
  font-size: 2vw;
}

/* Media query for screens wider than 768px (e.g., tablets and desktops) */
@media only screen and (min-width: 768px) {
    .smalltext {
      font-size:1vw
    }
}
/*========================MARQUEE MY BELOVED==================================*/
.marquee {
  font-size: 4vw;
  width: 100%;
  line-height: 0.01vw;
  color: seagreen;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}