@import 'color-scheme.css'; 

body {
    background-color: var(--background);
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 18px; 
}

h1, h2, h3, h4, h5, h6, header {
    font-size: 20px; 
    color: var(--headers);     
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 18px; 
    font-weight: 200;
    margin-top: 0; 
    padding: 0; 
}

.content {
    margin: auto; 
    max-width: 650px; 
    padding: 5px;
}

header {
    display: flex; 
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap; 
    column-gap: 15em; /* This is very fragile */ 
}

nav {
    display: flex; 
    gap: 20px; 
    justify-content: space-between;
    align-items: start; 
}

.nav-links {
    text-decoration: none; 
    font-weight: 200;
    color: var(--links); 
    font-size: 18px; 
    font-style: normal; 
}

.homepage-links { 
    text-decoration: none; 
    color: var(--links); 
    font-style: italic; 
}

footer {
    font-size: 15px; 
}