body {
  overflow: hidden;
  background-color: #0e1212;
  color: #8532ff;
  font-family: "Creepster", cursive;
  margin: 0;
  padding: 0%;
}

h1 {
  margin: 0%;
  padding: 0%;
}

.no-select {
  user-select: none;
}

.list-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.btn {
  color: #0e1212;
  text-decoration: none;
  background-color: #8532ff;
  padding: 20px 0;
  border-radius: 20px;
  font-size: 20px;
  width: 20vw;
  height: 30px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.copy-btn {
  color: #0e1212;
  text-decoration: none;
  background-color: #8532ff;
  padding: 20px 0;
  border-radius: 20px;
  font-size: 20px;
  width: 20vw;
  height: 70px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-family: "Creepster", cursive;
  border: none;
  cursor: pointer;
  position: relative;
}

.copy-btn::after {
  content: "Click to copy!";
  display: none;
  position: absolute;
  bottom: -30px;
  color: #8532ff;
}

.copy-btn:hover::after {
  display: block;
}

.main-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

ul {
  list-style: none;
  margin: 0%;
  padding: 0%;
}

p {
  padding: 0;
  margin: 0;
  text-align: center;
}

li {
  padding: 30px;
  margin: 0%;
}

.copy-btn:hover {
  -webkit-animation: jello-horizontal 0.8s both;
  animation: jello-horizontal 0.8s both;
}

.btn:hover {
  -webkit-animation: jello-horizontal 0.8s both;
  animation: jello-horizontal 0.8s both;
}

.soundcloud:hover {
  color: #ff7700;
}

.twitter:hover {
  color: #00acee;
}

.steam:hover {
  color: #171a21;
}

.discord:hover {
  color: #0e1212;
}

.discord-name {
  padding: 0;
}

.discord:hover .discord-name {
  display: inline;
}

.discord:hover .fa-discord {
  display: none;
}

.discord-name {
  display: none;
}

.title {
  text-align: center;
  font-size: 175px;
  padding: 40px 0;
  letter-spacing: 15px;
  text-shadow: 1px 1px 15px #8532ff;
  color: #0e1212;
  position: relative;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
}

.drop {
  position: absolute;
  width: 0.1em;
  height: 0.1em;
  border-radius: 0 100% 100% 100%;
  -webkit-box-shadow: 1px 1px 3px #8532ff;
  box-shadow: 1px 1px 3px #8532ff;
  -webkit-animation: drop 3s infinite both;
  animation: drop 3s infinite both;
}

.drop:nth-child(1) {
  left: 1%;
  bottom: 26%;
  -webkit-animation-delay: 1;
  animation-delay: 1;
  -webkit-animation: drop-alt 3s infinite both;
  animation: drop-alt 3s infinite both;
}

.drop:nth-child(2) {
  left: 38%;
  bottom: 25%;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
  width: 0.1em;
  height: 0.1em;
  -webkit-animation: drop-alt 5s infinite both;
  animation: drop-alt 5s infinite both;
}

.drop:nth-child(3) {
  left: 61%;
  bottom: 26%;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.drop:nth-child(4) {
  left: 89%;
  bottom: 26%;
  width: 0.1em;
  height: 0.1em;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

/* BUTTON ANIMATIONS */

@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* DROP ANIMATIONS */
@-webkit-keyframes drop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0) scaleX(0.85) rotate(45deg);
    transform: translateY(0) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(120%) scaleX(0.85) rotate(45deg);
    transform: translateY(120%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    -webkit-transform: translateY(100vh) scaleX(0.85) rotate(45deg);
    transform: translateY(100vh) scaleX(0.85) rotate(45deg);
  }
}

@keyframes drop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0) scaleX(0.85) rotate(45deg);
    transform: translateY(0) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(120%) scaleX(0.85) rotate(45deg);
    transform: translateY(120%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    -webkit-transform: translateY(100vh) scaleX(0.85) rotate(45deg);
    transform: translateY(100vh) scaleX(0.85) rotate(45deg);
  }
}

@-webkit-keyframes drop-alt {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%) scaleX(0.85) rotate(45deg);
    transform: translateY(-200%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(120%) scaleX(0.85) rotate(45deg);
    transform: translateY(120%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    -webkit-transform: translateY(100vh) scaleX(0.85) rotate(45deg);
    transform: translateY(100vh) scaleX(0.85) rotate(45deg);
  }
}

@keyframes drop-alt {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%) scaleX(0.85) rotate(45deg);
    transform: translateY(-200%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 1;
  }
  60% {
    -webkit-transform: translateY(120%) scaleX(0.85) rotate(45deg);
    transform: translateY(120%) scaleX(0.85) rotate(45deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    -webkit-transform: translateY(100vh) scaleX(0.85) rotate(45deg);
    transform: translateY(100vh) scaleX(0.85) rotate(45deg);
  }
}
/*# sourceMappingURL=style.css.map */