/* Box sizing rules */
*{
box-sizing: border-box;
}

/* Remove default padding */
ul,
ol,
button {
padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption {
font-size: 1rem;
margin: 0;
}

/* Set core body defaults */
body {
scroll-behavior: smooth;
}
html{
overflow-x: hidden;
}

ul,
ol {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
}

button{
cursor: pointer;
outline: none;
border: none;
background: transparent;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Recommended: WOFF2 first, WOFF fallback, TTF last */
@font-face {
font-family: "MLM Serif";
src:
  url("/fonts/mlm-serif.woff2") format("woff2"),
  url("/fonts/mlm-serif.woff") format("woff"),
  url("/fonts/mlm-serif.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Serif";
src:
  url("/fonts/mlm-serif-italic.woff2") format("woff2"),
  url("/fonts/mlm-serif-italic.woff") format("woff"),
  url("/fonts/mlm-serif-italic.ttf") format("truetype");
font-style: italic;
font-weight: 400;
font-display: swap;
}


@font-face {
font-family: "MLM Serif";
src:
  url("/fonts/mlm-serif-oblique.woff2") format("woff2"),
  url("/fonts/mlm-serif-oblique.woff") format("woff"),
  url("/fonts/mlm-serif-oblique.ttf") format("truetype");
font-style: oblique;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Serif Caps";
src:
  url("/fonts/mlm-serif-caps.woff2") format("woff2"),
  url("/fonts/mlm-serif-caps.woff") format("woff"),
  url("/fonts/mlm-serif-caps.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Sans";
src:
  url("/fonts/mlm-sans.woff2") format("woff2"),
  url("/fonts/mlm-sans.woff") format("woff"),
  url("/fonts/mlm-sans.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Sans";
src:
  url("/fonts/mlm-sans-italic.woff2") format("woff2"),
  url("/fonts/mlm-sans-italic.woff") format("woff"),
  url("/fonts/mlm-sans-italic.ttf") format("truetype");
font-style: italic;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Mono";
src:
  url("/fonts/mlm-mono.woff2") format("woff2"),
  url("/fonts/mlm-mono.woff") format("woff"),
  url("/fonts/mlm-mono.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Block Caps";
src:
  url("/fonts/mlm-block-caps.woff2") format("woff2"),
  url("/fonts/mlm-block-caps.woff") format("woff"),
  url("/fonts/mlm-block-caps.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "MLM Block Caps";
src:
  url("/fonts/mlm-block-caps-italic.woff2") format("woff2"),
  url("/fonts/mlm-block-caps-italic.woff") format("woff"),
  url("/fonts/mlm-block-caps-italic.ttf") format("truetype");
font-style: italic;
font-weight: 400;
font-display: swap;
}
:root {
  --paper: hsl(24, 50%, 98%);
  --navbg: hsl(28, 50%, 99%);
  --surface: hsl(28, 50%, 92%);
  --backdrop: hsl(28,30%,88%);
  --pencil: hsl(40, 12%, 62%);
  --chalk: hsl(30, 25%, 83%);
  --ink: hsl(234, 08%, 20%);
  --ink2: hsl(232, 10%, 35%);
  --ink3: hsl(20, 10%, 40%);
  --white: hsl(24, 100%, 99%);
  --surface: hsl(24, 40%, 96%);
  --marker0: hsl(210,50%,40%);
  --marker1: hsl(212.77777777777777,47.77777777777778%,42.22222222222222%);
  --marker2: hsl(215.55555555555554,45.55555555555556%,44.44444444444444%);
  --marker3: hsl(218.33333333333334,43.333333333333336%,46.666666666666664%);
  --marker4: hsl(221.11111111111111,41.111111111111114%,48.888888888888886%);
  --marker5: hsl(223.88888888888889,38.888888888888886%,51.111111111111114%);
  --marker6: hsl(226.66666666666666,36.66666666666667%,53.33333333333333%);
  --marker7: hsl(229.44444444444446,34.44444444444444%,55.55555555555556%);
  --marker8: hsl(232.22222222222223,32.22222222222222%,57.77777777777778%);
  --marker9: hsl(235,30%,60%);
}
:root.dark {
  --paper: hsl(180, 20%, 12%);
  --navbg: hsl(172, 40%, 12%);
  --surface: hsl(172, 30%, 14%);
  --pencil: hsl(160, 14%, 40%);
  --chalk: hsl(150, 10%, 33%);
  --ink: hsl(110, 33%, 80%);
  --ink2: hsl(50, 17%, 60%);
  --ink3: hsl(102, 10%, 74%);
  --white: hsl(130, 12%, 15%);
  --marker0: hsl(130,60%,74%);
  --marker1: hsl(134.44444444444446,61.111111111111114%,72.88888888888889%);
  --marker2: hsl(138.88888888888889,62.22222222222222%,71.77777777777777%);
  --marker3: hsl(143.33333333333334,63.333333333333336%,70.66666666666667%);
  --marker4: hsl(147.77777777777777,64.44444444444444%,69.55555555555556%);
  --marker5: hsl(152.22222222222223,65.55555555555556%,68.44444444444444%);
  --marker6: hsl(156.66666666666666,66.66666666666667%,67.33333333333333%);
  --marker7: hsl(161.11111111111111,67.77777777777777%,66.22222222222223%);
  --marker8: hsl(165.55555555555554,68.88888888888889%,65.11111111111111%);
  --marker9: hsl(170,70%,64%);
}

@media print {
  :root,:root.dark {
    --paper: #ffffff;
    --surface: hsl(28, 0%, 92%);
    --pencil: hsl(40, 0%, 50%);
    --chalk: hsl(30, 0%, 80%);
    --ink: hsl(24, 0%, 10%);
    --ink2: hsl(12, 0%, 20%);
    --ink3: hsl(20, 0%, 30%);
    --white: #ffffff;
    --surface: hsl(24, 0%, 96%);
    --primary: oklch(63.29% 0.222 248.35);
  }
  @page {
    margin: 0;
  }
  body {
    margin: 0;
  }
}

html,body{
  font-family: "MLM Serif";
  font-size: 18px;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-weight: normal;
  touch-action: manipulation;
  text-rendering: geometricPrecision;
}
button {
  text-rendering: geometricPrecision;
}
@media print {
  html,body{
    font-size: 14px;
    line-height: 1.5;
  }
}
p{ 
  font-weight: normal;
}
::selection{ 
  background-color: var(--chalk);
}