body {
    margin: 0;
    --headerButton: 40px;
    --headerButtonPadding: 10px;
    --headerHeight: calc(var(--headerButton) + 2 * var(--headerButtonPadding));
    background-color: #19191c;
    font-family: Arial, Helvetica, serif;
    color: white;
}

header {
    background-color: rgb(30, 30, 30);
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--headerHeight);
}

nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #2e2e32;
}

.navButton {
    height: var(--headerButton);    
}

.headerParagraph {
    color: blue;
}

.navButton:hover {
    background-color: rgb(76, 76, 76);
}
.mainContent {
    margin: calc(var(--headerHeight) + 20px) auto 20px;
    max-width: 1400px;
}

.material-symbols-outlined {
    font-size: 500px !important;
    background: orange !important;
    padding: 20px !important;
    color: white !important;
}

.pageHeading {
    text-decoration: underline 2px #2e2e32;
    text-underline-offset: 10px;
    margin: 20px 0;
    font-size: 40px;
}

.pageSubheading {
    display: block;
    border-bottom: 2px solid #2e2e32;
    margin: 20px 0;
    padding-left: 0px;
    font-size: 32px;
}

.sectionHeading {
    text-decoration: underline 2px #2e2e32;
    text-underline-offset: 6px;
    margin: 20px 0;
    padding-left: 0px;
}

p, ul, a {
    font-size: 16px;
    text-decoration: none;
    margin-top: 5px;
}

a {
    color: #6aaff0;
}

a:hover {
    text-decoration: underline;
}

nav > * {
    margin: var(--headerButtonPadding);
    font-size: 25px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: white;
}

.headerTextButton {
    padding: 5px 20px;
    background-color: rgb(203, 0, 0);
    border-radius: 999px;
}

.headerTextButton:hover {
    background-color: rgb(161, 6, 6);
    text-decoration: none;
}