@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

html {
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Gabarito", "Rubik", Arial, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #070507;
  text-align: center;
}

section#links {
  border-radius: 50%;
  gap: 1.5em;
  margin: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#links img {
  --shadowY: -10px;
  aspect-ratio: 1 / 1;
  width: 3em;
  border-radius: 100%;
  box-shadow: 0 4px 2px #0007;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.75s;
  object-fit: contain;
}

section#links img:hover {
  transform: scale(1.125) translate(0, var(--shadowY));
  border-radius: 25%;
  box-shadow: 0 calc(-1 * var(--shadowY) + 4px) 2px #0007;
}

div:has(#logo) {
  z-index: 100;
  margin: 32px;
}

#logo {
  image-rendering: auto;
  height: 9em;
  transition: transform 0.5s ease-in-out, rotate .5s, filter .5s;
  cursor: grab;
  rotate: 0deg;
  filter: drop-shadow(0 0 2px #000);
}

#logo:hover {
  transform: scale(1.25);
  animation: rot infinite 2s;
}

@keyframes rot {
  0%, 100% {
    rotate: -5deg;
    filter: drop-shadow(8px 8px 4px #000);
  }
  50% {
    rotate: 5deg;
    filter: drop-shadow(-8px 8px 4px #000);
  }
}

#bg {
  z-index: -99;
  pointer-events: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
}

span.wow {
  --start: #ea65ff;
  --end: #c340ff;

  background: linear-gradient(
    to right,
    var(--start),
    var(--end),
    var(--start)
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200%;
  animation: wowWrap 2s infinite;
}

span.wow:hover {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--start), var(--end) 50%);
}

@keyframes wowWrap {
  from {background-position: 0% center;}
  to {background-position: -200% center;}
}

#cursorThing {
  background: linear-gradient(
    to right,
    rgb(128, 41, 209),
    rgb(160, 41, 130)
  );
  height: 150px;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 100%;
  animation: cursorThingRot 20s infinite;
  z-index: -88;
}

#cursorThingBlur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -87;
  backdrop-filter: blur(4em);
}

@keyframes cursorThingRot {
  0% {rotate: 0deg;}
  100% {rotate: 360deg;}
}

small {opacity: .25;}