:root {
  --hue-magenta: 300deg;
  --hue-cyan: 180deg;
  --hue-yellow: 60deg;
  --sat-light: 100%;
  --sat-dark: 0%;
  --lum-light: 70%;
  --lum-dark: 35%;

  --UNSAFE-c-light: rgb(255, 255, 255);
  --UNSAFE-c-dark: rgb(24, 24, 24);

  --lum: var(--lum-light);
  --lum-inverse: var(--lum-dark);
  --sat: var(--sat-light);
  --sat-inverse: var(--sat-dark);

  --c-foreground: var(--UNSAFE-c-light);
  --c-background: hsl(var(--hue-yellow), var(--sat), var(--lum));
  --c-material: hsl(var(--hue-magenta), var(--sat), var(--lum));

  --c-primary: hsl(var(--hue-yellow), var(--sat-light), var(--lum-light));
  --c-secondary: hsl(var(--hue-cyan), var(--sat-light), var(--lum-light));

  --d-padding: 20pt;
  --d-border: 1pt;

  --d-star: min(0.2vw, 0.2vh);
}

@view-transition {
  navigation: auto;
}

::view-transition-new(article),
::view-transition-old(article) {
  transform-origin: center center;
}

article {
  view-transition-name: article;
}

html,
body,
main {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--c-background);
  color: var(--c-foreground);
  font-size: var(--d-padding);
  font-family: Helvetica, Arial, sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

article {
  background: var(--c-material);
  margin: 0 auto;
  padding: var(--d-padding);
  border-radius: var(--d-padding);
}

.decoration {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}

.decoration div::before,
.decoration div::after {
  --radius: random(10pt, 50pt);
  content: "";
  position: fixed;
  top: random(0vh, 100vh);
  left: random(0vw, 100vw);
  display: block;
  width: random(--square, var(--d-star), calc(var(--d-star) * 3));
  height: random(--square, var(--d-star), calc(var(--d-star) * 3));
  z-index: -100;
  border-radius: 100%;
  background-color: hsla(random(0deg, 360deg), var(--sat), var(--lum), 1);
  rotate: random(0deg, 360deg);
  transition:
    translate 3s linear,
    background-color 3s linear,
    rotate 3s linear;
  animation: jigglewiggle random(5s, 15s) linear infinite;
}

@media (prefers-color-scheme: light) {
  .decoration div:nth-child(odd)::before,
  .decoration div:nth-child(odd)::after {
    animation-direction: reverse;
  }

  .decoration div:nth-child(11n)::before,
  .decoration div:nth-child(11n)::after {
    animation-timing-function: ease;
  }

  .decoration div:nth-child(7n)::before,
  .decoration div:nth-child(7n)::after {
    --radius: random(30pt, 70pt);
    width: random(--square, calc(var(--d-star) * 5), calc(var(--d-star) * 10));
    height: random(--square, calc(var(--d-star) * 5), calc(var(--d-star) * 10));
  }
}

@keyframes jigglewiggle {
  0% {
    translate: calc(cos(0deg) * var(--radius)) calc(sin(0deg) * var(--radius));
  }
  10% {
    translate: calc(cos(36deg) * var(--radius)) calc(sin(36deg) * var(--radius));
  }
  20% {
    translate: calc(cos(72deg) * var(--radius)) calc(sin(72deg) * var(--radius));
  }
  30% {
    translate: calc(cos(108deg) * var(--radius))
      calc(sin(108deg) * var(--radius));
  }
  40% {
    translate: calc(cos(144deg) * var(--radius))
      calc(sin(144deg) * var(--radius));
  }
  50% {
    translate: calc(cos(180deg) * var(--radius))
      calc(sin(180deg) * var(--radius));
  }
  60% {
    translate: calc(cos(216deg) * var(--radius))
      calc(sin(216deg) * var(--radius));
  }
  70% {
    translate: calc(cos(252deg) * var(--radius))
      calc(sin(252deg) * var(--radius));
  }
  80% {
    translate: calc(cos(288deg) * var(--radius))
      calc(sin(288deg) * var(--radius));
  }
  90% {
    translate: calc(cos(342deg) * var(--radius))
      calc(sin(342deg) * var(--radius));
  }
  100% {
    translate: calc(cos(360deg) * var(--radius))
      calc(sin(360deg) * var(--radius));
  }
}

a {
  color: var(--c-secondary);
  font-weight: bold;
  text-decoration: none;
}

.links-list {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .icon {
    font-size: calc(var(--d-padding) * 2);
    display: inline-block;
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;
    margin: 0 var(--d-padding) 0 0;
  }

  .label {
    position: absolute;
    top: calc(var(--d-padding) * -0.25);
    left: calc(var(--d-padding) * 3);
    opacity: var(--alpha-translucent);
    font-size: calc(var(--d-padding) * 0.75);
  }
}

@media (pointer: fine) {
  .links-list {
    .label {
      position: absolute;
      top: calc(var(--d-padding) * -0.125);
      left: calc(var(--d-padding) * 3);
      opacity: 0;
      transition: all 0.1s linear;
    }

    li:hover .label {
      opacity: 1;
      top: calc(var(--d-padding) * -0.25);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --lum: var(--lum-dark);
    --sat: var(--sat-dark);
    --c-foreground: var(--UNSAFE-c-light);
    --c-background: var(--UNSAFE-c-dark);

    --moon-size: 10vw;
    --moon-offset: calc(1 * (var(--moon-size) + var(--d-padding)));
  }

  .decoration div::before,
  .decoration div::after {
    transform: translate(0pt, 0pt);
    animation: starTwinkle random(5s, 10s) linear random(0s, 5s) infinite;
  }

  @keyframes starTwinkle {
    0% {
      opacity: 1;
    }
    5% {
      opacity: 0.5;
    }
    95% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }

  body::after {
    /* the 'planet' at the bottom */
    content: "";
    position: absolute;

    background:
      radial-gradient(
        hsl(var(--hue-magenta), var(--sat), calc(var(--lum) / 2)) 150vw,
        transparent 0pt
      ),
      transparent;
    background-size: 300vw max(30vh, 30vw);
    background-position: -100vw 0;
    position: fixed;

    bottom: min(-15vh, -15vw);
    left: 0;
    right: 0;
    height: max(30vh, 20vw);
    z-index: -1;
  }

  main::after {
    /* Cloud icon */
    --cloud-offset: calc(var(--moon-offset) + (var(--moon-size) * 0.5));
    content: "☁️";
    font-size: var(--moon-size);
    line-height: var(--moon-size);
    position: fixed;
    top: var(--cloud-offset);
    right: var(--cloud-offset);

    cursor: none;
  }

  main::before {
    /* Moon icon */
    content: "🌙";
    font-size: var(--moon-size);
    line-height: var(--moon-size);
    position: absolute;
    top: var(--moon-offset);
    right: var(--moon-offset);
    cursor: none;
  }
}