/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
html {
  height: 100%;
  background: #000000;
}
body {
  font-family: "Dongle", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 100;
  font-style: normal;
  color: #f7f7f7;
  font-size: 27px;
  line-height: .8em;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url('background.jpg');
  background-position: center;
  animation: bgani 20s infinite alternate;
  background-size: cover;
  opacity: 0.3;
  touch-action: none;
  pointer-events: none;
}
.dongle-regular {
  font-family: "Dongle", serif;
  font-weight: 400;
  font-style: normal;
}
@keyframes bgani {
  0% {
    filter: hue-rotate(0deg)
  }
  5% {
    filter: hue-rotate(10deg) 
  }
  20% {
    filter: hue-rotate(0deg)
  }
  30% {
    filter: hue-rotate(-10deg)
  }
  40% {
    filter: hue-rotate(0deg)
  }
  44% {
    filter: hue-rotate(10deg)
  }
  60% {
    filter: hue-rotate(0deg)
  }
  70% {
    filter: hue-rotate(-10deg)
  }
  75% {
    filter: hue-rotate(0deg)
  }
  90% {
    filter: hue-rotate(10deg)
  }
  96% {
    filter: hue-rotate(0deg)
  }
}
h1 {
  font-size: 130px;
  font-weight: 100;
  margin-top: 49px;
  margin-bottom: 26px;
}
ul, ol {
  list-style-type: none;
  padding: 0;
}
ul.socials {
  text-align: center;
  max-width: 390px;
  width: 80%;
  margin: 0 auto 16px auto;
  font-size: 50px;
}
ul.socials li a:hover {
  color: #ffffff;
}
ul.socials > li {
  color:inherit;
  margin-top: 16px;
  border-width: 1px;
  border-color: rgba(208, 171, 255, 0.281);
  border-style: solid;
}
ul.socials li a {
  line-height: 82px;
  text-decoration: none;
  color: #f7f7f7;
  display: block;
  padding-top: .07lh;
}
ul.socials li {
  border-radius: 23px;
  opacity: 0.9;
}
ul.socials > li {
  box-shadow: 1px 1px 5px 0px rgb(175, 175, 221, 0.1);
}
ul.socials li.shake {
  animation: shake 5s infinite;
}
ul.socials li.kick {
  background: linear-gradient(60deg, #2bde73ff, #0a1a11aa);
}
ul.socials li.twitch {
    background: linear-gradient(60deg, #6441a5ff, #281450aa);
}
ul.socials li.youtube {
    background: linear-gradient(60deg, #ff0000ff, #2c0f0faa);
}
ul.socials li.x {
    background: linear-gradient(60deg, #00a1e4ff, #041824aa);
}
ul.socials li.tiktok {
    background: linear-gradient(60deg, #010101ff, #000000aa);
}
ul.socials li.onlyfans {
    background: linear-gradient(60deg, #1a82f7ff, #17263aaa);
}
ul.socials li.discord {
    background: linear-gradient(60deg, #7289daff, #15183aaa);
}
ul.socials li.instagram {
    background: linear-gradient(60deg, #f06951ff, #200709aa);
}
/* Make kick button enlarge and shake */
ul.socials > li:hover {
  animation: enlarge 0.5s infinite alternate;
}
@keyframes enlarge {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shake {
  0% {
    transform: scale(1);
    transform: rotate(0deg);
  }
  9% {
    transform: scale(1.05) rotate(0deg);
  }
  10% {
    transform: scale(1.05) rotate(0deg);
  }
  18% {
    transform: scale(1.05) rotate(5deg);
  }
  27% {
    transform: scale(1.05) rotate(-5deg);
  }
  37% {
    transform: scale(1.05) rotate(5deg);
  }
  48% {
    transform: scale(1.05) rotate(-5deg);
  }
  59% {
    transform: scale(1.05) rotate(0deg);
  }
  70% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.age-verification {
  display: none;
}