@font-face {
  font-family: "angel";
  src: url("https://assets.codepen.io/455279/Angelia+Beauty.ttf") format("truetype");
}
@font-face {
  font-family: "lovesong";
  src: url("https://assets.codepen.io/455279/Mf+Love+Song.ttf") format("truetype");
}
html {
  background: url("https://assets.codepen.io/455279/fake-luxury.png"), linear-gradient(#ff9fe4, #d367b3, hotpink);
  height: 100%;
}
html main {
  position: absolute;
  width: 320px;
  height: 720px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
html main section .h1 {
  display: block;
  text-align: center;
  font-family: "angel", arial;
  font-size: 6.5em;
  color: white;
  text-shadow: 0 0 0.1em white;
  margin: 0 auto 0.5em auto;
  height: 1.25em;
  width: 3em;
  animation: ge1 50s infinite;
  animation-timing-function: linear;
}
html main .center {
  display: flex;
  gap: 1em 3.5em;
  justify-content: center;
}
html main .center a {
  font-family: "cupcake", arial;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
}
html main .center a .button {
  padding: 3.5em 5em 3.5em 5em;
  border-radius: 1em;
  border: 2px solid white;
  box-shadow: 0 0 1em white, inset 0 0 1em white;
  color: white;
}
html main .center a:nth-child(1) {
  margin-top: 4em;
  transform: rotateZ(-15deg);
}
html main .center a:nth-child(3) {
  margin-top: 4em;
  transform: rotateZ(15deg);
}
html main .avatarContainer {
  display: flex;
  justify-content: space-around;
}
html main .avatarContainer a {
  font-family: "cupcake", arial;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
  margin-top: 4em;
}
html main .avatarContainer a .icon {
  padding: 0.5em;
  height: 1.5em;
  width: 1.5em;
  filter: drop-shadow(0 0 0.25em white);
}
html main .avatarContainer .pedestal {
  width: 10em;
  height: 7em;
  margin: 16em auto 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(images/Pedastal.png);
  z-index: 0;
}
html main .avatarContainer .pedestal a {
  text-decoration: none;
  margin: 0;
  padding: 0;
}
html main .avatarContainer .pedestal .avatar {
  position: absolute;
  bottom: 4em;
  left: 50%;
  transform: translateX(-50%);
  filter: brightness(150%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(images/VRChat_2026-02-28_15-22-34.152_1920x1080.png);
  height: 20em;
  width: 12em;
  z-index: 1;
  transition: background-image 0.5s;
  animation: ge4 2s infinite;
  animation-timing-function: linear;
}

.soulwars {
  background-image: url(images/soulwars.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  animation: ge1 40s infinite;
  animation-timing-function: linear;
}

.crashout {
  background-image: url(images/crashoutsoon.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: ge2 40s infinite;
  animation-timing-function: linear;
}

.sweettreat {
  background-image: url(images/sweettreat.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: ge3 40s infinite;
  animation-timing-function: linear;
}

.twitter {
  background-image: url(images/twitter.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: ge2 40s infinite;
  animation-timing-function: linear;
}

.patreon {
  background-image: url(images/patreon.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: ge3 40s infinite;
  animation-timing-function: linear;
}

section:has(.button.soulwars:hover) .avatar {
  background-image: url(images/VRChat_2026-02-28_15-21-38.984_1920x1080.png);
  transition: background-image 0.5s;
}

section:has(.button.crashout:hover) .avatar {
  background-image: url(images/VRChat_2026-02-28_15-21-24.329_1920x1080.png);
  transition: background-image 0.5s;
}

section:has(.button.sweettreat:hover) .avatar {
  background-image: url(images/VRChat_2026-02-28_15-21-31.692_1920x1080.png);
  transition: background-image 0.5s;
}

section:has(.icon.patreon:hover) .avatar {
  background-image: url(images/VRChat_2026-02-28_15-21-16.753_1920x1080.png);
  transition: background-image 0.5s;
}

section:has(.icon.twitter:hover) .avatar {
  background-image: url(images/VRChat_2026-02-28_15-20-51.982_1920x1080.png);
  transition: background-image 0.5s;
}

@keyframes ge1 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-10deg) scale(1.05, 1.05);
  }
  50% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(20deg) scale(0.95, 0.95);
  }
  90% {
    transform: rotate(-10deg) scale(1.05, 1.05);
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes ge2 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(10deg) scale(1.05, 1.05);
  }
  50% {
    transform: rotate(20deg);
    margin-top: -0.2em;
  }
  80% {
    transform: rotate(-20deg) scale(0.95, 0.95);
  }
  90% {
    transform: rotate(10deg) scale(1.05, 1.05);
    margin-top: 0.2em;
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
    margin-top: 0em;
  }
}
@keyframes ge3 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-5deg) scale(1.05, 1.05);
  }
  50% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(13deg) scale(0.95, 0.95);
  }
  90% {
    transform: rotate(-10deg) scale(1.05, 1.05);
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes ge4 {
  0% {
    bottom: 4em;
  }
  50% {
    bottom: 5em;
  }
  100% {
    bottom: 4em;
  }
}