:root {
    --bg-color: rgb(26, 29, 41); /* Create variable for background-color */
    --primary-text-color: white; /* main text & header should be white */
    --unselected-section-bg-color: rgba(255, 255, 255, 0.029); /* sections should appear with a gray background */
    --selected-section-bg-color: rgba(255, 255, 255, 0.097);
    --link-default-color: rgb(126, 217, 248);
    --link-visited-color: rgb(182, 133, 255);
    --link-action-color: rgb(134, 138, 255);
}

.darkmode { /* Generic darkmode (not oled dark) */
    background-color: var(--bg-color);
    color: var(--primary-text-color);
}

body { /* Makes font monospace */
    font-family: 'Monaco', 'Menlo', 'Courier New', Courier, monospace;
}

a { /* Link Styling */
    color: var(--link-default-color);
}

a:visited { /* (more) Link Styling */
    color: var(--link-visited-color);
}

h1 a, h1 a:visited { /* Links in page title header shouldn't be styled */
    color: var(--primary-text-color); /* Note: Still am styling on hover & active to demonstrate that it's a link! May change in future. */
    text-decoration: none;
}

a:hover, a:active { /* (even more) Link Styling */
    color: var(--link-action-color);
}

.image_credit {
    font-size: 0.75em;
}

.fifty_percent_wide {
    width: 50vw;
}

footer { /* footer font should be smaller */
    font-size: 0.8em;
}

header, footer { /* centers header and footer */
    text-align: center;
}

nav { /* Navbar should be a responsive flexbox */
    display: flex; /* Creates flexbox */
    justify-content: space-around; /* looks better than space-between */
}