:root {
  /*        COLORS */
  /* GREENS */
  --green-00: 147, 29%, 90%;
  --green-100: 147, 29%, 80%;
  --green-200: 147, 29%, 70%;
  --green-400: 147, 29%, 50%;
  --green-600: 147, 29%, 25%;
  --green-800: 147, 29%, 10%;
  --green-900: 147, 29%, 5%;
  --red: #ff0000;
  /* PURPS */
  --purp-400: 267, 30%, 50%;
  /*        FONTS */
  --font-ss: system-ui, sans-serif;
  --font-serif: serif;
  /* TIMING */
  --duration: 800ms;
  /* PAGE DEFUALTS */
  font-family: var(--font-ss);
  color: hsl(var(--green-800));
}
* {
  margin: 0;
  box-sizing: border-box;
}
html {
  background-color: hsl(var(--green-400));
}
html::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  z-index: -9;
  overflow: hidden;

  --Rsc: 33dvh;

  --root-color-start: hsl(var(--green-400));
  --root-color-end: hsl(var(--green-100));
  --interp: hsl;

  --color-0: var(--root-color-start);
  --color1: color-mix(
    in var(--interp),
    var(--root-color-start) 75%,
    var(--root-color-end)
  );
  --color2: color-mix(
    in var(--interp),
    var(--root-color-start) 50%,
    var(--root-color-end)
  );
  --color3: color-mix(
    in var(--interp),
    var(--root-color-start) 25%,
    var(--root-color-end)
  );
  --color4: var(--root-color-end);

  --r-max: 36.2%;
  --r-fr: calc(var(--r-max) / 18);

  background-image: radial-gradient(
      var(--color4) 0 calc(var(--r-fr) * 2),
      var(--color3) calc(var(--r-fr) * 2) calc(var(--r-fr) * 5),
      var(--color2) calc(var(--r-fr) * 5) calc(var(--r-fr) * 9),
      var(--color1) calc(var(--r-fr) * 9) calc(var(--r-fr) * 15),
      var(--color-0) calc(var(--r-fr) * 15) var(--r-max),
      transparent var(--r-max)
    ),
    radial-gradient(
      var(--color1) 0 calc(var(--r-fr) * 2),
      var(--color2) calc(var(--r-fr) * 2) calc(var(--r-fr) * 5),
      var(--color3) calc(var(--r-fr) * 5) calc(var(--r-fr) * 9),
      var(--color4) calc(var(--r-fr) * 9) calc(var(--r-fr) * 15),
      var(--color-0) calc(var(--r-fr) * 15) var(--r-max),
      transparent var(--r-max)
    ),
    radial-gradient(var(--color4) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color3) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color2) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color1) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color1) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color2) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color3) 0 var(--r-max), transparent var(--r-max)),
    radial-gradient(var(--color4) 0 var(--r-max), transparent var(--r-max));

  background-size: var(--Rsc) var(--Rsc);
  background-position-x: 0, calc(var(--Rsc) / 2), 0, 0, 0, 0,
    calc(var(--Rsc) / 2), calc(var(--Rsc) / 2), calc(var(--Rsc) / 2),
    calc(var(--Rsc) / 2);
  background-position-y: 0, calc(var(--Rsc) / 2), calc(var(--Rsc) * 0.9),
    calc(var(--Rsc) * 0.8), calc(var(--Rsc) * 0.7), calc(var(--Rsc) * 0.6),
    calc(var(--Rsc) * 0.6), calc(var(--Rsc) * 0.7), calc(var(--Rsc) * 0.8),
    calc(var(--Rsc) * 0.9);

  animation: breathe 5s ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes breathe {
  50% {
    background-position-y: 0, calc(var(--Rsc) / 2), calc(var(--Rsc) * 0.885),
      calc(var(--Rsc) * 0.77), calc(var(--Rsc) * 0.655), calc(var(--Rsc) * 0.54),
      calc(var(--Rsc) * 0.615), calc(var(--Rsc) * 0.73),
      calc(var(--Rsc) * 0.845), calc(var(--Rsc) * 0.96);
  }
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
marquee {
  background-color: hsl(var(--green-600));
  color: hsl(var(--green-100));
  padding-bottom: 4px;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 5rem;
  background-color: hsl(var(--green-100));
  border-bottom: 2px solid hsl(var(--green-900));
}
.logotxt {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-serif);
  cursor: pointer;
  padding: 0 1em;
  /* underline */
  background-repeat: no-repeat;
  background-size: 40% 2px;
  background-position: center 100%;
  background-image: linear-gradient(90deg, transparent, white, transparent);
  /* hover effect */
  gap: 0;
  transition-property: gap background-size background-position;
  transition: var(--duration) ease;
  &:active {
    transition-duration: calc(var(--duration) / 3);
  }
}
.logotxt > * {
  padding: 0;
  font-size: 35px;
  text-align: center;
  user-select: none;
  /* animate */
  transition-duration: var(--duration);
  transition-property: padding background-position background-size;
  transition: var(--duration) ease;
}
.logo:hover .logotxt {
  gap: 1em;
  user-select: none;

  background-size: 90% 2px;
  background-position: center;

  /* HOVER AND CLICK LETTER UP AND DOWN */
  & > :nth-child(odd) {
    padding-bottom: 1em;
  }
  & > :nth-child(even) {
    padding-top: 1em;
  }
  &:active:active > :nth-child(odd) {
    padding: 0;
    padding-top: 1em;
  }
  &:active > :nth-child(even) {
    padding: 0;
    padding-bottom: 1em;
  }
}
.logotxt:active span {
  transition-duration: calc(var(--duration) / 3);
}
.logotxt:active .xp {
  color: hsl(var(--purp-400));
}
.socials ul {
  margin-top: 0.5em;
  padding: 0;
  font-size: 1.2rem;
  list-style: none;
}

.socials a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-inline: 1.5em;
  line-height: 1.5em;
  width: 7.5em;

  border-inline: 2px hsl(var(--green-800)) solid;
  box-shadow: inset hsl(var(--purp-400)) 0px 0px 10px;
  background-color: hsl(var(--purp-400));
  background-image: linear-gradient(
    -90deg,
    hsl(var(--purp-400)),
    hsl(var(--green-00)),
    hsl(var(--purp-400))
  );
  background-size: 300%;
  background-position: center;
  transition: background-size ease calc(var(--duration) * 2);
  background-repeat: no-repeat;
  &:hover {
    background-size: 120%;
    transition-duration: calc(var(--duration) / 3);
  }
  &:active {
    background-size: 80%;
    transition-duration: 0s;
  }
}