:root {
    --level-1: #1a1a1a;
    --level-2: #363636;
    --link-color: #6cc4ff;
    /* I think visited links that are different look ugly
       but I suppose people with memory loss might disagree. */
    --link-visited-color: #e9a0ff;
    --background-color: rgb(12, 12, 12);
    --background-color-rgb: 12, 12, 12;
    --text-color: #f5f5f5;
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

nav {
    height: 3rem;
    margin: 0;
    width: 100%;
    background-color: var(--level-1);
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

nav>ul {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav>ul>li {
    list-style: none;
    height: 100%;
}

nav>ul>li:nth-child(1) {
    &>a {
        border-radius: 0.25rem 0 0 0.25rem;
        -webkit-border-radius: 0.25rem 0 0 0.25rem;
        -moz-border-radius: 0.25rem 0 0 0.25rem;
        -ms-border-radius: 0.25rem 0 0 0.25rem;
        -o-border-radius: 0.25rem 0 0 0.25rem;
    }
}

nav>ul>li>a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 0 0.5rem;
    font-size: 1rem;
}

nav>ul>li>a:visited {
    /* part of the navbar, don't need to mark these as visited */
    color: var(--text-color);
}

nav>ul>li>a:hover {
    background-color: var(--level-2);
}

section {
    background-color: var(--level-1);
    padding: 0.75rem;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

.section-overflow {
    overflow: hidden;
    height: 16rem;
    position: relative;
    width: 100%;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

.section-overflow>div {
    background: linear-gradient(to bottom,
            rgba(var(--background-color-rgb), 0),
            rgba(var(--background-color-rgb), 1) 100%);
    position: absolute;
    width: 100%;
    top: 12rem;
    left: 0;
    right: 0;
    height: 4rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    cursor: pointer;
}

.section-overflow>section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

section>h2 {
    margin: 0;
}

body>div {
    margin: 1rem 0;
}

li>h3 {
    margin: 0;
}

li>p {
    margin: 0;
}

body>section {
    margin-bottom: 1rem;
}

.project-image {
    background-color: var(--level-2);
    display: flex;
    justify-content: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

.project-image>img {
    height: 100px;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

.headshot-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.headshot {
    height: 100px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}