style.css

@import url("https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css");
@import url("./components/gist.overrides.css");

:root {
  --surface: lch(10 0 0);
  --surface2: conic-gradient(
    at bottom left,
    hsl(200, 5%, 20%),
    hsl(0, 0%, 30%));
  --text: lch(95 0 0);
  --text2: lch(80 0 0);
  --brand: lch(64 40 347);

  @media (prefers-color-scheme: light) {
    --surface: lch(100 0 0);
    --surface2:  conic-gradient(
        at bottom left,
        hsl(200, 5%, 95%),
        hsl(200, 15%, 80%));
    --text: lch(10 0 0);
    --text2: lch(30 0 0);
    --brand: lch(65 64 350);

    @media (dynamic-range: high) {
      --brand: color(display-p3 1 0 1);
    }
  }
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;

  margin: 0;
  box-sizing: border-box;

  color: var(--text);
  background: var(--surface);
  font-family: system-ui, sans-serif;
}

body,p,ul,dl,dd,dt,figure,
h1,h2,h3,h4,h5,h6,small {
  margin: 0;
}

a {
  color: var(--brand);
  color: color(display-p3 0 .5 1);

  &:visited {
    color: color(display-p3 .5 0 1);
  }
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.5;
  max-inline-size: 25ch;
}

p {
  line-height: 2;
  font-size: 1.25rem;
  font-weight: 300;
  max-inline-size: 45ch;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-items: center;
  gap: 1ch;

  & > figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1ch 3ch;
  }
}

@property --conicAngle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

header {
  display: grid;
  place-items: center;
  padding: 15vmin 5vmin 5vmin;

  & > h1 {
    --shine: white;
    background: conic-gradient(
      from 220deg at 50% -200%, 
      var(--shine), blue, rebeccapurple, red, hotpink, var(--shine)
    ) border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    @media (prefers-color-scheme: light) {
      & {
        background: conic-gradient(
          from 220deg at 50% -200%, 
          rebeccapurple, red, hotpink
        ) border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: magic 7s ease infinite forwards;
    }

    @supports (background: paint(something)) {
      @media (prefers-reduced-motion: no-preference) {
        & {
          --shine: lch(85 0 0);
          background: conic-gradient(
            from var(--conicAngle) at 50% -200%, 
            var(--shine), blue, rebeccapurple, red, hotpink, var(--shine)
          ) border-box;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}

@keyframes magic {
  to {
    --conicAngle: 360deg;
  }
}

h1 {
  font-size: max(min(15vw, 15vh), 4rem);
  font-weight: lighter;
  line-height: 1;
}

small {
  color: var(--text2);
  display: inline-block;
  max-inline-size: 25ch;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 200;

  @media (prefers-reduced-motion: no-preference) {
    & {
      animation: slide-up 4s ease forwards;
    }
  }
}

aside {
  background: var(--surface2);
  width: fit-content;
  border-radius: 3ch;
  display: grid;
  justify-items: start;
  gap: 3ch;
  padding: 3ch 4ch;
  margin-inline: auto;

  & h5 {
    color: var(--text2);
  }

  & > button {
    justify-self: end;
  }

  @supports not (margin-inline: auto) {
    & {
      margin-inline-start: auto;
      margin-inline-end: auto;
    }
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(-.5ex);
  }
}

.github-corner {
  fill: var(--brand);
  fill: url(#octocat-gradient); 
  color: var(--surface); 
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}