:root {
  --inf: 100000000;
  --ninf: -100000000;
  --twitter: #1da1f2;
  --discord: #7289da;
}

@font-face {
  font-family: 'Flipps';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+26-FF;
  src: url("../webfonts/Fipps-Regular.otf") format("opentype");
}

body {
  background-color: black !important;
}

a {
  cursor: pointer;
  text-decoration: none !important;
}

.bg {
  background-image: url("../media/polar-moon-mountains.png");
  animation-duration: 7s;
  animation-name: colorrotate;
  animation-iteration-count: infinite;
  animation-timing-function: steps(7);
  width: 100vw;
  height: 100vh;
  background-size: cover;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: var(--ninf);
}

.bg-secret {
  background-image: url("../media/polar-moon-mountains-elf.png");
}

@keyframes colorrotate {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(360deg);
  }
}

.secret-toggler {
  position: fixed;
  width: 15vw;
  height: 15vh;
  border-radius: 100%;
  margin-left: 42.5vw;
  margin-top: 10vh;
}

.bot-stopper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--inf);
  backdrop-filter: blur(50px) brightness(0.5);
}

.bot-stopper .unblur-btn {
  font-size: 24pt;
  line-height: 100vh;
  color: white !important;
  background-color: black;
  padding: 20px;
  padding-top: 35px;
  border-radius: 30px;
  border: solid;
  border-color: black;
  box-shadow: 0 0 0 5px white inset;
  border-width: 7px;
  word-spacing: 9px;
  user-select: none;
}

.bot-stopper .unblur-btn i {
  font-size: 36pt;
}

.main {
  width: 100vw;
  min-height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

* {
  font-family: 'Flipps', monospace;
}

.white {
  color: white !important;
}

.coming-soon h1 {
  animation-duration: 2s;
  animation-name: bwblink;
  animation-iteration-count: infinite;
  padding-top: 40vh;
  user-select: none;
  font-size: 3rem;
  letter-spacing: 10px;
}

.coming-soon h1.mobile {
  font-size: 2.5rem;
  line-height: 4.5rem;
}

@keyframes bwblink {
  0% {
    color: white;
  }

  49.99% {
    color: white;
  }

  50.00% {
    color: black;
  }

  99.99% {
    color: black;
  }

  100% {
    color: white;
  }
}

.social-btn {
  font-size: 12pt;
  color: white !important;
  background-color: black;
  padding: 10px;
  border-radius: 10px;
  border: solid;
  border-color: black;
  box-shadow: 0 0 0 5px white;
  border-width: 3px;
  word-spacing: 6px;
  width: fit-content;
  user-select: none;
}

.social-btn i {
  font-size: 18pt;
}

.social-btn.twitter:hover {
  background-color: var(--twitter);
  color: black !important;
  box-shadow: 0 0 0 5px var(--twitter);
  border-color: black;
}

.social-btn.twitter {
  background-color: black;
  color: var(--twitter) !important;
  box-shadow: 0 0 0 5px black;
  border-color: var(--twitter);
}

.social-btn.discord:hover {
  background-color: var(--discord);
  color: black !important;
  box-shadow: 0 0 0 5px var(--discord);
  border-color: black;
}

.social-btn.discord {
  background-color: black;
  color: var(--discord) !important;
  box-shadow: 0 0 0 5px black;
  border-color: var(--discord);
}

.social-btn.twitter:hover a,
.social-btn.twitter:hover i {
  color: black !important;
}

.social-btn.twitter a,
.social-btn.twitter i {
  color: var(--twitter) !important;
}

.social-btn.discord:hover a,
.social-btn.discord:hover i {
  color: black !important;
}

.social-btn.discord a,
.social-btn.discord i {
  color: var(--discord) !important;
}

.trait {
  margin-bottom: 30px;
}

.trait>h3 {
  margin-bottom: 30px !important;
}

.attribute {
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.green {
  color: #66b73a !important;
}

.red {
  color: #FB1A24 !important;
}

.password {
  padding: 20px;
  padding-bottom: 10px;
  line-height: 3rem;
  width: 66vw;
  background-color: #000;
  border: 0;
  color: #fff;
  box-shadow: none;
  appearance: none;
  box-sizing: unset;
  outline: none;
}

.wrong {
  border: 1px solid #FB1A24;
}