@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Castoro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/castoro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  background: #ededed;
  font-family: 'Manrope', serif;
  font-size: 1.2rem;
  line-height: 1.45;
  margin:0;
}

h1 {
  font-family: 'Castoro', serif;
  margin:0;
}

a { color: #da582e; }
a:hover {
  color: #ededed;
  background: #da582e;
}

ol {
  counter-reset: custom-counter;
  list-style-type: none;
  border-left: 2px solid grey;
  padding-left: 20px;
}

li {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 0.1rem;
  counter-increment: custom-counter;  
}

li::before {
  content: counter(custom-counter) ": ";
  font-weight: bold;
}

main {
  border-radius: 3px;
  max-width: 600px;
  padding: 1rem;
  margin-top: 2rem;
  margin-left: 3rem;
  border-left: 2px solid black;
  border-right: 2px solid black;
  hyphens: auto;
  overflow-wrap: break-word;
  box-shadow: 2px 2px 30px 16px #d8d8d8;
}

@media screen and (max-width: 726px) {
  main {
    width: 100%;
    max-width: 85%;
    margin:auto;
    margin-top: 2rem;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #141414;
    color: #f0fdfa;
  }
  
  main {
    background: #262626;
    box-shadow: 2px 2px 30px 16px #212121;
    border-left-color: #f0fdfa;
    border-right-color: #f0fdfa;
  }

  ol {
    border-left-color: #ededed;
  }

  a { color: #da582e; }
  a:hover {
    color: #262626;
    background: #da582e;
  }

  
}