@import url(https://fonts.bunny.net/css?family=atkinson-hyperlegible-mono:400,400i,600,800|atkinson-hyperlegible-next:400,600i,800);

:root {
    --paragraph-width: 75vw;
    --page-width:80vw;
  	--font-main: 'Atkinson Hyperlegible Next', monospace;
    --font-secondary: 'Atkinson Hyperlegible Mono', monospace;
    --font-scale: large;
    --bg: #F5ECE0;
    --heading-color: #7F675B;
    --text-color: #333;
    --code-color: #333;
}

html {
  background: var(--bg);
  font-size: large;
  font-family: var(--font-main);
  color: var(--text-color);
  padding:2vh 2vw;
}

p, 
li,
h1,
h2,
h3 {max-width:90vw;}



h1,
h2,
h3,
h4 {
  color: var(--heading-color);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
   }
  /* Add a bit of transparency so light media isn't so glaring in dark mode */
  img,
  video {
    opacity: 0.8;
  }
}

@media only screen and (min-width:720px){
  p, 
  li {max-width:55ch;}
  
  h1,
  h2,
  h3 {max-width:25ch;}
  
  body {
  width:80vw;
  margin: 0 auto;
}
}