@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Fira+Code&display=swap");

:root{
  --clr-bg:hsla(0,0%,99%,1);
  --clr-fg:hsla(222,13%,15%,1);
  --clr-fg-muted:hsla(222,13%,40%,1);
  --clr-accent:hsla(224,100%,56%,1);
  --clr-accent-light:hsla(224,100%,63%,.15);
  --clr-border:hsla(222,13%,85%,1);

  --ff-base:"Inter",system-ui,sans-serif;
  --ff-mono:"Fira Code",monospace;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:2rem;
  --space-4:4rem;

  --radius:.75rem;
  --shadow:0 1rem 3rem -.5rem rgba(0,0,0,.15);

  --transition:.2s cubic-bezier(.4,0,.2,1);

  --fs-1:clamp(1.75rem,4vw+1rem,2.75rem);
  --fs-2:clamp(1.25rem,1vw+1rem,1.75rem);
}

@media(prefers-color-scheme:dark){
  :root{
    --clr-bg:hsla(222,13%,10%,1);
    --clr-fg:hsla(0,0%,100%,.95);
    --clr-fg-muted:hsla(0,0%,100%,.6);
    --clr-accent:hsla(224,100%,70%,1);
    --clr-accent-light:hsla(224,100%,70%,.15);
    --clr-border:hsla(222,13%,25%,1);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-base);
  color:var(--clr-fg);
  background-color:var(--clr-bg);
  line-height:1.6;
  font-size:1rem;
  accent-color:var(--clr-accent);
}

h1,h2,h3,h4{line-height:1.2;font-weight:600}
h1{font-size:var(--fs-1)}
h2{font-size:var(--fs-2)}
img,iframe{max-width:100%;display:block}
a{text-decoration:none;color:var(--clr-accent);transition:color var(--transition)}
a:hover,a:focus-visible{color:var(--clr-accent)}

.page{width:min(97%,38rem);margin-inline:auto}

.sr-only{position:absolute;inset:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:sticky;top:0;z-index:100;background:var(--clr-bg);border-block-end:1px solid var(--clr-border)}
#nav-toggle{
  display:none;
  background:transparent;
  border:none;
  padding:var(--space-2);
  font-size:1.25rem;
  color:var(--clr-fg);
}
#site-menu{
  display:grid;
  grid-auto-flow:column;
  gap:var(--space-1);
  list-style:none;
  padding:var(--space-1);
  margin:0;
}
#site-menu a{
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius);
}
#site-menu a:hover,#site-menu a:focus-visible{background:var(--clr-accent-light)}

@media(max-width:40rem){
  #nav-toggle{display:block}
  #site-menu{
    display:none;
    grid-auto-flow:row;
    gap:0;
  }
  #site-menu.open{display:flex;flex-direction:column}
}

.hero{
  position:relative;
  background:linear-gradient(135deg,var(--clr-accent) 0 35%,var(--clr-bg) 0);
  color:#fff;
  padding-block:var(--space-3) var(--space-2);
  margin-block-end:var(--space-3);
  overflow:hidden;
}
.hero h1{margin:0}
.hero__media{margin-block:var(--space-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero__video{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.content :where(h2,h3,h4){color:var(--clr-accent);margin-block-start:var(--space-3)}
.content :where(p,ul,ol){margin-block-end:var(--space-2)}
.content ul,.content ol{padding-inline-start:calc(var(--space-2) + .25rem)}
.content code{
  font-family:var(--ff-mono);
  background:var(--clr-accent-light);
  padding:.1em .4em;
  border-radius:.3em;
}

.table-scroll{overflow-x:auto;margin-block:var(--space-2)}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  min-width:24rem;
}
thead{background:var(--clr-accent);color:#fff}
th,td{
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--clr-border);
  text-align:left;
}

figure{margin:0}
figure img{border-radius:var(--radius);box-shadow:var(--shadow)}

.site-footer{
  background:var(--clr-accent);
  color:#fff;
  text-align:center;
  padding:var(--space-2) var(--space-2);
  margin-top:var(--space-3);
  font-size:.8rem;
}

@media(prefers-reduced-motion:no-preference){
  .fade{opacity:0;translate:0 1rem;animation:fadeUp var(--transition) forwards}
  @keyframes fadeUp{to{opacity:1;translate:0}}
}