:root {
  --color-accent: #3204b0;
}

* {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: RobotoMono, monospace;
  font-weight: 400;
  color: black;
  line-height: 1.3;
}

body {
  max-width: 35rem;
  margin: 0 auto;
  padding: 0 2rem;
}

h1, h2, h3 {
  font-weight: 700;
}

h1 {
  font-size: 2.3rem;
  line-height: 1.2em;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.7rem;
  line-height: 2.2rem;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.1rem;
}

.opacity-5 {
  opacity: 0.5;
}


/* ***************
     footer
*************** */
#footer {
  padding: 0.5rem;
  text-align: center;
}

#footer a,
#footer label {
  margin: 0 0.3rem;
  text-decoration: none;
  cursor: pointer;
}


/* ***************
      fonts 
*************** */

@font-face {
  font-family: RobotoMono;
  font-style: normal;
  font-display: swap;
  src:
    local("Roboto Mono"),
    url(../fonts/RobotoMono/RobotoMono-VariableFont_wght.ttf) format("truetype");
}