/* 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;
}
:root {
  --bg:         hsl(200, 10%, 12%);
--paper:      hsl(200, 10%, 16%);
--surface:    hsl(200,  5%, 14%);
--valley:     hsl(200, 10%,  7%);
--canyon:     hsl(200, 20%,  3%);

--tierColor:  hsl(45, 80%, 50%);

--strong:     hsl(200, 10%, 95%);
--ink:        hsl(200, 10%, 85%);
--pencil:     hsl(200, 14%, 60%);
--chalk:      hsl(200, 10%, 33%);

--green:      hsl(160 , 60%, 40%);
--blue:       hsl(210 , 80%, 50%);
--yellow:     hsl(50  , 70%, 50%);
--red:        hsl(350 , 70%, 50%);
    
}
:root.dark {
  --bg:         hsl(200, 10%, 12%);
--paper:      hsl(200, 10%, 16%);
--surface:    hsl(200,  5%, 14%);
--valley:     hsl(200, 10%,  7%);
--canyon:     hsl(200, 20%,  3%);

--tierColor:  hsl(45, 80%, 50%);

--strong:     hsl(200, 10%, 95%);
--ink:        hsl(200, 10%, 85%);
--pencil:     hsl(200, 14%, 60%);
--chalk:      hsl(200, 10%, 33%);

--green:      hsl(160 , 60%, 40%);
--blue:       hsl(210 , 80%, 50%);
--yellow:     hsl(50  , 70%, 50%);
--red:        hsl(350 , 70%, 50%);
    
}

@media print {
  :root,:root.dark {
    --bg:         hsl(200, 10%, 12%);
--paper:      hsl(200, 10%, 16%);
--surface:    hsl(200,  5%, 14%);
--valley:     hsl(200, 10%,  7%);
--canyon:     hsl(200, 20%,  3%);

--tierColor:  hsl(45, 80%, 50%);

--strong:     hsl(200, 10%, 95%);
--ink:        hsl(200, 10%, 85%);
--pencil:     hsl(200, 14%, 60%);
--chalk:      hsl(200, 10%, 33%);

--green:      hsl(160 , 60%, 40%);
--blue:       hsl(210 , 80%, 50%);
--yellow:     hsl(50  , 70%, 50%);
--red:        hsl(350 , 70%, 50%);
    
  }
  @page {
    margin: 0;
  }
  body {
    margin: 0;
  }
}

html,body{
  font-family: system-ui, sans-serif;
  font-size: 16px;
  background-color: var(--bg);
  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);
}