@layer reset{
  * {
    box-sizing: border-box;
  }
  
  html{
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 100%;
  }
  
  button{
    font-family: var(--fontFam);
  }

  body {
    overflow-y: scroll;
    font-size: 1em;
    background-color: var(--background);
    font-family: var(--fontFam);
    font-display: block;
    color: var(--foreground);
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 540px;
    margin: auto;
  }

  .layout{
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
      "header"
      "navigation"
      "content"
      "footer";
    height: 100%;
    margin: auto;
  }
  
  main{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
    max-width: 56ch;
    padding: 0 calc(var(--space) * 2) var(--space) calc(var(--space) * 2);
  }
  
  h1, h2, h3, h4, h5, h6, p { 
    margin: 0; 
    line-height: 1;
  }

  h1, h2, h3, h4, h5, h6{
    color: var(--denogrey);
    font-family: var(--fontFam);
  }

  h3{
    color: var(--pink);
    margin-top: 32px !important;
  }

  pre{ 
    display: block;
    background: var(--black);
    color: var(--white);
    padding: 0.5em;
    border-radius: 4px;
    font-size: 1rem;
    border: 1px solid rgba(255,255,255,0.2);
  } 
  
  main p{
    line-height: 1.4;
    color: var(--denogreydark);
  }


  a[href^="http"]::after {
    content: " ↗";
  }
  
  a{
    text-underline-offset: 0.15em;
    text-decoration-color: var(--underline-resting);
  }
  
  a:hover{
    text-decoration-color: var(--linkColor);
  }
  
  a:active, a:link{
    color: var(--linkColor);
  }
  
  a:visited{
    color: var(--linkColor);
  }
}

/* 12 bit rainbow */
:root{
  --balloonstroke1: #715E5E;
  --balloonstroke2: #DA478E;
  --balloonfill1: #ED5FA3;
  --balloonfill2: #ED60A3;
  --balloonfill3: #AC9BA3;
  --balloonfill4: #9C8C90;
  --dinohead: #715E5E;
  --shine: hwb(0 100% 0% / 0.5);
  --slash: #4773DE;
  --fontFam: "Blinker", var(--fontFamFallback);
  --fontFamFallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
  --pink: #DA478E;
  --lightpink: #ff77b9;
  --lightpink-0: hwb(331 47% 0% / 0);
  --blue: #3E67CA;
  --blueHWB: 222 24% 21%;
  --denogrey: #8E717F;
  --denogreyHWB: 331 44% 44%;
  --denogreydark: #61545a;

	--lightgrey: #d3d3d3;
	--darkgrey: #444;
	--grey: #858585;
	--black: #111;
	--white: #fff;
  --white-50: rgba(255,255,255,0.5);
	--space: 0.8em;
	--space-2: calc(var(--space) * 2);
	--space-3: calc(var(--space) * 3);
	--margin: var(--space-2);

	--foreground: var(--black);
	--background: var(--white);
	--linkColor: var(--blue);
	--linkVisited: var(--royal);
	--underline-resting: hwb(var(--blueHWB)/ 0.3);

	--foreground-100: var(--lightgrey)
}

.is-dark{
  --background: var(--black);
  --foreground: var(--white);
  --foreground-100: var(--darkgrey);
  --blue: #6587FF;
  --blueHWB: 227 40% 0%;
  --denogreydark: hwb(0 100% 0% / 0.663);
  color-scheme: dark;
  --slash: var(--blue);
  --balloonstroke1: hwb(0 71% 24% / 0.5);
  --balloonstroke2: hwb(331 28% 15% / 0.8);
  --balloonfill1: hsla(331, 80%, 65%, 0.4);
  --balloonfill2: hwb(331 38% 7% / 0.4);
  --balloonfill3: hwb(332 61% 33% / 0.4);
  --balloonfill4: hwb(345 55% 39% / 0.3);
  --dinohead: #000;
  --shine: hwb(0 100% 0% / 0.25);
}

/* temporary */
#styleswap{
  display: none;
}
#main div > *+* {
  margin-top: calc(var(--space));
}

#main div > *:not(h2)+*:is(h2,h3) {
  margin-top: var(--space-2);
}

#main a {
  --linkColor: var(--denogreydark);
  text-decoration-color: color-mix(in srgb, var(--denogreydark), transparent 80%);
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


@keyframes fade-in {
  from { 
    opacity: 0; 
    scale: 0.996; 
  }
}

@keyframes fade-out {
  to { 
    opacity: 0; 
    scale: 0.999; 
  }
}


/* View transitions stuff, only needed if you want transitions when switching routes */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.33s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.29, 1);
  mix-blend-mode: normal;
}

/* feels like cheating */
body #main{
  view-transition-name: mainbod;
}


::view-transition-old(mainbod),
::view-transition-new(mainbod) {
  mix-blend-mode: normal;
  animation: none;
}

::view-transition-old(mainbod) {
  animation: 160ms cubic-bezier(0.4, 0, 1, 1) both fade-out;

}

::view-transition-new(mainbod) {
  animation: 200ms cubic-bezier(0, 0, 0.2, 1) 160ms both fade-in;
  object-fit: cover;
}

/* if people prefer to go without */
@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}