@font-face {
  font-family: "Basic Manual";
  src: url("/src/font/SVBasicManual.ttf") format(truetype);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Basic Manual";
  src: url("/src/font/SVBasicManual-Bold.ttf") format(truetype);
  font-weight: bold;
  font-style: normal;
}

html { 
  /* Colors */
  --clr-primary: #ffa500;
  --clr-accent-light: #ffff00;
  --clr-accent-dark: #ff4500;
  --clr-neutral: #000;

  --default-font: "Basic Manual";

  --marginpad: 1rem;

  --main-max: 70rem;

  scrollbar-color: var(--clr-accent-light) var(--clr-neutral);
} 

/* Basic element styling */

body{
  font: 1.2em "Basic Manual", monospace;
  background-color: var(--clr-neutral);
}
ul{list-style: none;}
li::before{
  content: "\2605";
  margin-right: 12px;
}
a{color: var(--clr-accent-light); text-decoration: none; cursor: pointer;}
a:hover{text-decoration: wavy underline 2px;}
ol{list-style: upper-roman;}
hr{color: var(--clr-accent-light);}

/* Semantic element styling */

header {
  margin-bottom: 20px;
}
main {
  margin: 0rem auto;
  padding: var(--marginpad);
  color: var(--clr-primary);
  border: var(--clr-accent-dark) double 1rem;
  display: grid;
  grid-gap: var(--marginpad);
  max-width: var(--main-max);
}
footer{
  margin: 0rem auto;
  font-weight: bold;
  text-align: center;
  background-color: var(--clr-accent-dark);
  color: var(--clr-neutral);
  max-width: calc(var(--main-max) + var(--marginpad)*2 + 2rem);
  padding-bottom: 0.5rem;
}
footer p{margin: 0;}
nav{
  background-color: var(--clr-accent-light);
  color: var(--clr-neutral);
}
nav a{color: var(--clr-neutral);}

nav, section{
  padding: var(--marginpad);
}

/* Classes */

.title{
  padding: 0.2rem;
  text-align: center;
  font-size: min(7vw, 3rem);
  color: var(--clr-primary);
}
.notlist{padding: 0;}
.notlist li::before{display: none;}
.section-dark{
  background-color: var(--clr-accent-dark);
  color: var(--clr-neutral);
}
.section-dark li{
  border: var(--clr-neutral) solid 4px;
  background-color: var(--clr-neutral);
  color: var(--clr-primary);
}