@font-face {
  font-family: Rosarivo;
  src: url("/fonts/Rosarivo-Regular.ttf");
}

@font-face {
  font-family: Orbitron;
  src: url("/fonts/Orbitron-SemiBold.ttf");
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-color: black;
        --main-fg-color: white;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --main-bg-color: white;
        --main-fg-color: black;
    }
}

body {
    margin: 0 auto;
    max-width: 50em;
    line-height: 1.5;
    padding: 4em 1em;
    font-family: Rosarivo;
    color: var(--main-fg-color);
    background-color: var(--main-bg-color)
}

h2 {
    margin-top: 1em;
    padding-top: 1em;
}

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

.dropcap {
    float: left;
    font-family: 'Orbitron';
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
  }

 header *{
    line-height: 1;
    padding-bottom: 0em;
    margin-bottom: 0em;
    padding-top: 0em;
    margin-top: 0em;
    font-family: 'Orbitron';
 }

.main-title {
    font-family: 'Orbitron';

}

header h1{
  font-size: 50px;

}

header {
  padding-bottom: 2em;
}

/* accents */
a {
  color: #4e6bff;
}

/* navbar */
nav ul {
    list-style: none;
    padding-left: 0;

}
nav ul li {
   display: inline;
} 

nav ul li a {
    text-decoration: none;
    color: var(--main-fg-color);

}