@import url(https://fonts.googleapis.com/css?family=Monoton);
@import url(https://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&family=Roboto:wght@100&display=swap);

@font-face {
    font-family: 'OCR A';
    src: url('assets/OCRAExtended.woff2') format('woff2');
}

body {
  background: #000000;
  background-image: url("assets/nate_square_gradient.png");
  background-repeat: no-repeat;
  background-position: top center;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

.ticker-wrap {
  width: 100%;
  height: 1vh;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  top: 0;
  height: 3.5rem;
}

.ticker-wrap .ticker {
  display: inline-block;
  margin-top: 5px;
  animation: marquee 200s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

.item-collection-1 {
  position: relative;
  left: 0%;
  animation: swap 200s linear infinite;
}

@keyframes swap {
  0%, 50% {
    left: 0%;
  }
  50.01%,
  100% {
    left: 100%;
  }
}

.item {
  display: inline-block;
  padding: 0 1rem;
  font-size: 2vh;
  color: white;
  font-family: "OCR A";
}

#spacer-for-sticky {
  height: 500px;
}

.nate-online {
  position: sticky;
  top: 20px;
  left: 0px;
  right: 0px;
  width: auto;
  height: auto;
  overflow: visible;
  scale: 60%;
}

.nate {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: -180px;
  font-family: "Mr Dafoe", cursive;
  font-size: 120px;
  margin-bottom: 0;
  color: #eb219b;
  -webkit-text-fill-color: rgb(229, 19, 226);
  text-shadow: -3px -3px 0 #6c105b;
  text-wrap: nowrap;
  -webkit-filter: drop-shadow(3px 3px 1px #441f62);
  font-weight: normal;
  z-index: 2;
  word-spacing: 30px;
  overflow: visible;
}

.online {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: "Monoton", cursive;
  font-size: 200px;
  line-height: 1;
  margin: 0;
  margin-top: -95px; 
  /* font-weight: normal; */
  background-image: -webkit-linear-gradient(
    #022486 0%,
    #0ad0fd 30%,
    #bdfcfc 40%,
    #d8ffff 44%,
    #00081c 44%,
    #00081c 50%,
    #074a67 52%,
    #1cd8fe 60%,
    #7fedfe 62%,
    #96f5fc 70%,
    #0fd8fa 73%,
    #0bd2fd 88%,
    #affdff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.nate .online {
  font-weight: 400;
}

.online:before {
  position: absolute;
  content: "";
  left: 51px;
  top: 74px;
  width: 80px;
  height: 3px;
  background-image: -webkit-radial-gradient(#fff 0%, transparent 85%);
  z-index: 4;
  -webkit-animation-name: online_before_effect;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

.online:after {
  position: absolute;
  content: "";
  left: 90px;
  top: 32px;
  width: 3px;
  height: 80px;
  background-image: -webkit-radial-gradient(#fff 0%, transparent 85%);
  z-index: 4;
  -webkit-animation-name: online_after_effect;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes online_before_effect {
  0% {
    left: 51px;
    top: 74px;
    opacity: 0;
  }

  15% {
    left: 51px;
    top: 74px;
    opacity: 1;
  }

  30% {
    left: 51px;
    top: 74px;
    opacity: 0;
  }

  35% {
    left: 370px;
    top: 45px;
    opacity: 0;
  }

  50% {
    left: 370px;
    top: 45px;
    opacity: 1;
  }

  65% {
    left: 370px;
    top: 45px;
    opacity: 0;
  }

  70% {
    left: 564px;
    top: 74px;
    opacity: 0;
  }

  85% {
    left: 564px;
    top: 74px;
    opacity: 1;
  }

  100% {
    left: 564px;
    top: 74px;
    opacity: 0;
  }
}

@-webkit-keyframes online_after_effect {
  0% {
    left: 90px;
    top: 32px;
    opacity: 0;
  }

  15% {
    left: 90px;
    top: 32px;
    opacity: 1;
  }

  30% {
    left: 90px;
    top: 32px;
    opacity: 0;
  }

  35% {
    left: 413px;
    top: 11px;
    opacity: 0;
  }

  50% {
    left: 413px;
    top: 11px;
    opacity: 1;
  }

  65% {
    left: 413px;
    top: 11px;
    opacity: 0;
  }

  70% {
    left: 603px;
    top: 32px;
    opacity: 0;
  }

  85% {
    left: 603px;
    top: 32px;
    opacity: 1;
  }

  100% {
    left: 603px;
    top: 32px;
    opacity: 0;
  }
}

.slogan {
  font-family: "OCR A", monospace;
  font-size: 1.5vw;
  margin-top: 10vh;
}

.subhead {
  font-family: "OCR A", monospace;
  font-size: 30px;
  margin-bottom: 0;
  color: #eb219b;
  -webkit-text-fill-color: rgb(229, 19, 226);
  text-shadow: -3px -3px 0 #6c105b;
  -webkit-filter: drop-shadow(3px 3px 1px #441f62);
  font-weight: normal;
  z-index: 2;
  margin-top: 20px;
  margin-bottom: 30px;
}

#socials {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

#socials .socialbutton {
  display: flex;
  width: 300px;
  height: 60px;
  margin: auto;
  margin-bottom: 20px;
  background: #2a2a2a;
  justify-content: center;
  color: #fff;
  font-family: "OCR A", monospace;
  font-size: 25px;
  transition: 1.5s ease-out;
}

#socials .socialbutton a {
  display: flex;
  width:100%;
  height:100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
}

#socials .socialbutton a svg {
  padding-right: 10px;
  width: 30px;
  height: 30px;
}

#socials .socialbutton:hover {
  transition: 0.3s;
  background: #4d4d4d;
}

@media screen and (max-width: 1000px) {

}

@media screen and (max-width: 500px) {
  .nate-online {
    scale: 40%;
  }
  .slogan {
    font-size: 5vw;
  }
}