* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  color-scheme: dark light;
  --color-red-dark: oklch(0.25 0.14 0);
  --color-blue-dark: oklch(0.25 0.14 234);
  --color-violet-dark: oklch(0.25 0.14 284);
  --color-gold-dark: oklch(0.25 0.14 90);
  --color-green-dark:oklch(0.25 0.14 138);
  --color-medblue-dark:oklch(0.25 0.14 254);
/*dark
oklch(0.25 0.14 0) x
oklch(0.25 0.14 22)
oklch(0.25 0.14 90) x
oklch(0.25 0.14 138) x
oklch(0.25 0.14 164)
oklch(0.25 0.14 184)
oklch(0.25 0.14 202)
oklch(0.25 0.14 218)
oklch(0.25 0.14 234) x
oklch(0.25 0.14 254)
oklch(0.25 0.14 284) x
oklch(0.25 0.14 320)*/

  --colorAL: oklch(0.75 0.14 276);
  --color-blue-light: oklch(0.75 0.14 234);
  --color-violet-light: oklch(0.75 0.14 296);
  --color-gold-light: oklch(0.75 0.14 76);
  --color-green-light:oklch(0.75 0.14 132);
/*
light
oklch(0.75 0.14 0)
oklch(0.75 0.14 20)
oklch(0.75 0.14 56)
oklch(0.75 0.14 76) x
oklch(0.75 0.14 114)
oklch(0.75 0.14 132) x
oklch(0.75 0.14 152)
oklch(0.75 0.14 172)
oklch(0.75 0.14 192)
oklch(0.75 0.14 212)
oklch(0.75 0.14 234) x
oklch(0.75 0.14 256)
oklch(0.75 0.14 276) x
oklch(0.75 0.14 296) x
oklch(0.75 0.14 318)
*/
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
  font-family: "Overpass", system-ui, sans-serif;
  line-height: 1.5;
  color: light-dark(#222e, #fffe);
  background-color: light-dark(var(--colorAL), var(--color-red-dark));
  background-image: url(./what-the-hex.png);
  background-blend-mode: multiply;
}

body > * {
  --layout-spacing: max(8vh, 3rem);
  --max-width: 70ch;
  width: min(100%, var(--max-width));
  margin-inline: auto;
}

body.light{
    color-scheme: light;
    background-blend-mode: color-burn;
    .bowtie{
        filter: sepia(1) saturate(4) brightness(2) hue-rotate(340deg);
    }
    & > header {
        background-blend-mode: color-burn;
    }
}

body > header {

  background-color: light-dark(var(--color-red-dark), var(--color-gold-light));
  color: light-dark(#fffe, #222e);
    background-image: url(./full-bloom.webp);
    background-blend-mode: multiply;
    padding-block: 1lh;
    /*width: 100%;*/
    text-align: center;
    border-radius: 1rem 1rem 0 0;
}

main {
  margin-top: var(--layout-spacing);
}

footer {
  margin-top: auto;
  padding-top: var(--layout-spacing);
}

footer p {
  border-top: 1px solid light-dark(#444, #ccc);
  padding-top: 0.25em;
  font-size: 0.9rem;
  color: light-dark(#444, #ccc);
}

:is(h1, h2, h3) {
  line-height: 1.2;
  margin-bottom: 1rlh;
}

:is(h2, h3):not(:first-child) {
  margin-top: 2rlh;
}

article * + * {
  margin-top: 1lh;
}

a {
  color: light-dark(var(--color-blue-dark), var(--color-blue-light));
  text-underline-offset: 0.15em;
  &:visited {
    color: light-dark(var(--color-violet-dark), var(--color-violet-light));
  }
}

.landing > nav {
    padding: 1rlh;
    border-radius: 0 0 1rem 1rem;
    color: light-dark(#fffe, #222e);
    background-color: light-dark(var(--color-red-dark), var(--color-gold-light));
    background-image: url(./full-bloom.webp);
    background-blend-mode: multiply;
    display: grid;
    place-items: center;
}
.landing li {
    display: inline;
}
.landing li + li:before {
    content: " | ";
}
.landing ul {
    list-style: none;
    padding: 0;
    & a {
        color: light-dark(var(--color-blue-light), var(--color-blue-dark));
    }
    & a:visited {
        color: light-dark(var(--color-violet-light), var(--color-violet-dark));
    }
}

.bowtie {
    aspect-ratio: 16/9;
    width: 6em;
    animation: 3s ease-in-out bow-tie;
    view-transition-name: bowtie;
}
@media (prefers-color-scheme: light) {
    body > header {
        background-blend-mode: color-burn;
    }
    .bowtie{
        filter: sepia(1) saturate(4) brightness(2) hue-rotate(340deg);
    }
}

@keyframes bow-tie {
    from {
        transform: translateX(1em) translateY(-0.2em) rotate(-10deg);
    }
    30% {
        transform: translateX(1em) translateY(-0.2em) rotate(-10deg);
    }
    70% {
        transform: translateX(-0.3em) translateY(-0.1em) rotate(4deg);
    }
    85% {
        transform: translateX(0) translateY(0) rotate(-4deg);
    }
    to {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}
@view-transition {
  navigation: auto;
}