html {
  overflow-x: hidden;
  overflow-y: hidden;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(../images/background2.jpg);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/background2.jpg);
  z-index: -1;
  margin: 0;
  background-attachment: fixed;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.nav {
  min-width: 696px;
  list-style: none;
  padding: 20px;
}

.nav .logo {
  padding-top: 10vh;
  text-align: center;
  margin: auto;
  -webkit-animation: breath 80s  linear infinite;
          animation: breath 80s  linear infinite;
}

@-webkit-keyframes breath {
  0% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  25% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes breath {
  0% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  25% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.nav .navbar ul {
  text-align: center;
}

.nav .navbar li {
  display: inline;
  color: inherit;
  padding: 20px;
}

.nav .navbar #discord a:hover {
  color: #7289da;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

.nav .navbar #twitter a:hover {
  color: #1DA1F2;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

.nav .navbar #twitch a:hover {
  color: #6441a5;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

.nav .navbar #tiktok a:hover i {
  animation: tiktok-glitch 0.25s linear forwards;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  color: #fff;
  text-shadow: 
    2px 0 #fe2c55,
    -2px 0 #25f4ee;
}

@keyframes tiktok-glitch {
  0% {
    transform: translate(0);
    text-shadow:
      2px 0 #fe2c55,
      -2px 0 #25f4ee;
  }
  33% {
    transform: translate(-1px, 1px);
    text-shadow:
      3px 0 #fe2c55,
      -3px 0 #25f4ee;
  }
  66% {
    transform: translate(1px, -1px);
    text-shadow:
      4px 0 #fe2c55,
      -4px 0 #25f4ee;
  }
  100% {
    transform: translate(0);
    text-shadow:
      2px 0 #fe2c55,
      -2px 0 #25f4ee;
  }
}

.nav .navbar #youtube a:hover {
  color: #c4302b;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

.nav .navbar #patreon a:hover {
  color: #f96854;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

.nav .navbar #merch a:hover {
  color: #7400c2;
  -webkit-animation: hovericon 0.5s 1;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes hovericon {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.4);
  }
}

.nav .navbar a {
  padding-top: 10px;
  display: inline-block;
  text-decoration: none;
  font-family: "Baloo Tamma 2";
  text-align: center;
  font-size: 30px;
  color: white;
  text-transform: none;
  margin: 0 20px;
  -webkit-filter: drop-shadow(0px 20px 10px #000000);
          filter: drop-shadow(0px 20px 10px #000000);
}
/*# sourceMappingURL=styles.css.map */