:root {
   color-scheme: light dark;
   /*color-scheme: light;*/
}

html {
   font-size: 18px;
   font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-display: block;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-feature-settings: "liga" 1, "calt" 1, "case" 1, "ss02" 1, "ss07" 0;
   /*font-feature-settings: "liga" 1, "calt" 1, "tnum" 1, "case" 1, "ss02" 1, "ss07" 0;*/
   /*font-feature-settings: "liga" 1, "calt" 1, "case" 1, "ss02" 1;*/
   /*font-feature-settings: 'ss02' 0;*/
}


pre, code {
   font-family: "Argon";
   font-weight: 400;
   /*font-stretch: expanded;*/
   font-feature-settings: "cv01" 2;
   margin: 1em 0;
}

pre.monaco, pre.monaco > code, code.monaco {
   font-family: "Monaco";
}

p {
   width: 100%;
   max-width: 550px;
   /*max-width: 65ch;*/
   line-height: 1.6;
   padding: 1rem;
   margin: 0 auto;
   /*font-weight: 550;*/
}

@media (max-width: 500px) {
  p {
    max-width: 90%;
  }
}

body {
   margin: 0;
   /*font-size: min(6vw, 32px);*/
   /*font-size: 6vw;*/
   height: 100%;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   color: light-dark(black, white);
   background-color: light-dark(white, black);
   /*width: 250px;*/
}

html.dark { color-scheme: dark; }
html.light { color-scheme: light; }

header, footer {
   flex-grow: 0;
   flex-shrink: 0;
}

main {
   flex-grow: 1;
   max-width: 800px;
   margin: 0 auto;
}

:root.dark, :root.light {
  transition: background 0.3s, color 0.3s;
}

svg.logo {
   display: block;
   margin: 0px auto;
   height: auto;
   width: 24vw;
   color: white;
   margin-top: 2rem;
}

footer {
   font-size: 16px;
   margin-top: 2em;
   padding-bottom: 3em;
   text-align: center;
}

footer div {
   /*display: inline-block;*/
   /*padding-right: 0.5em;*/
   /*padding-top: 0.3em;*/
}

footer .love { font-weight: 550; }
/*footer .name { font-weight: 550; font-style: italic; }*/

footer .copy {
   /*font-size: 1.3em;*/
   /*font-weight: 250;*/
   /*display: inline-block;*/
   /*margin-bottom: 0.1em;*/
   /*vertical-align: middle;*/
}

@media (max-width: 500px) {
   svg.logo {
      width: 100%;
   }
}

div.links {
   /*max-width: 500px;*/
   margin-left: auto;
   margin-right: auto;
   /*margin-top: 2em;*/
   text-align: center;
   margin-top: 1.5em;
}

a {
   color: light-dark(black, white);
   text-underline-offset: 0.3em;
}

.links .section div {
   margin-bottom: 20px;
}

.links .section {
   margin-bottom: 4em;
}

h2 {
   margin: 0px;
   margin-bottom: 1.0em;
   /*margin-top: 2em;*/
   /*border: 1px solid black;*/
}

div.theme {
   position: absolute;
   top: 0;
   right: 0;
   height: 50px;
   width: 50px;
   display: inline-block;
   cursor: pointer;
}

div.theme .dot {
   position: relative;
   top: calc((50px / 2) - 6px);
   left: calc((50px / 2) - 6px);
   width: 12px;
   height: 12px;
   border-radius: 12px;
   background-color: light-dark(black, white);
}