:root {
  --bg-color: rgb(0, 0, 0);
  --text-color: rgb(200, 200, 200);
  --highlight-color: #ecdbe9;
  --svg-size: 37px;
  --svg-hover-size: 40px;
  --svg-shadow-color: hsla(313, 32%, 89%, 0.651);
  --svg-backdrop: hue-rotate(120deg);
  --animation-duration: .5s;
}

html, body {
  font-family: consolas, monospace;
  background-color: var(--bg-color);
  margin: 0;
}

.panel {
  height: 100vh;
  width: 100vw;
}

.bottom-txt {
  position: relative;
  z-index: -2;
}

.tx-wht {
  color: var(--text-color);
}

.text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity var(--animation-duration) ease;
}

.pop-up {
  z-index: 2;
  opacity: 0;
  display: none;
  transition: opacity var(--animation-duration) ease;
}

.bg {
  pointer-events: none;
}

#text-center {
  transition: opacity var(--animation-duration) ease;
}

.text-center > img {
  position: absolute;
  bottom: 15.5%;
  left: 42.5%;
  z-index: -1;
}

.img-prot {
  pointer-events: none;
  user-select: none;
}

#faggot_overlay {
  z-index: 15;
}

#faggot_glow {
  filter: blur(var(--faggot-glow, 39px));
  z-index: 1;
  opacity: .25;
}

.title {
  --bg-size: 400%;
  --color-one: #CF13A9;
  --color-two: #0830CF;
  background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s linear infinite;
}

.contact {
  position: absolute;
  bottom: 2%;
  right: 1%;
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.contact:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

.box {
  width: 500px;
  height: 300px;
  position: relative;
  top: 50%;
}

.box > h2 {
  position: relative;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box > img {
  position: relative;
  height: 30%;
  top: 15%;
  border-radius: 50px;
}

.bg-style {
  --box-radius: 10px;
  --box-shadow-color: #09090950;
  --border-width: 1px;
  --border-color: #78726D20;

  border-radius: var(--box-radius);
  box-shadow: 0 0 25px var(--box-shadow-color);
}

.svgs {
  position: relative;
  top: 18%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svgs > div {
  margin: 0 7px;
}

.svgs > div > svg {
  height: var(--svg-size);
  border-radius: 50px;
  fill: var(--text-color);
  transition: height .2s ease-in-out, fill .2s ease-in-out, box-shadow .2s ease-in-out;
}

.svgs > div > svg:hover {
  height: var(--svg-hover-size);
  fill: var(--highlight-color);
  box-shadow: 0 0 10px 2px var(--svg-shadow-color);
}

.start {
  position: relative;
  top: 30%;
  text-decoration: underline;
  opacity: .15;
  display: inline-block;
  margin-left: 2%;
}

#svideo {
  display: none;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--animation-duration) ease;
}

#startvideo, #mutevideo {
  cursor: pointer;
  opacity: .5;
  user-select: none;
  transition: opacity .125s ease-in-out;
}

#startvideo:hover, #mutevideo:hover {
  opacity: 1;
}

#mutevideo {
  display: unset;
}