:root {
    font-size: 1em;

    --bg-color: #e3e3e3;
    --card-color: white;
    --accent-color: black;
    --text-color: #333;
    --fc-blue: #1c2452;
    --fc-light-blue: #addcea;
    --error-color: #FDD;
}

:target {
    scroll-margin-top: 5rem;
}

* {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
}

#a-contact {
    text-decoration: underline;
}

body {
    margin: 0;
    background-color: var(--bg-color);
}

button {
    background-color: var(--fc-blue);
    border: 1px solid var(--fc-blue);
    border-radius: 3px;
    font-size: 1rem;
    padding: .25rem .5rem;
}

button, button>i {
    color: white;
}

button:hover {
    background-color: var(--fc-light-blue);
    border-color: var(--fc-light-blue);
    color: var(--fc-blue);
}

button:hover>i {
    color: var(--fc-blue);
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    background-color: var(--card-color);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

nav>ul {
    position: relative;
    width: 100%;
    padding: 0;
    list-style: none;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}

nav>ul>li {
    cursor: pointer;
}

nav>ul>li:hover {
    opacity: .5;
}

.icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    nav ul li:not(:first-child) {
        display: none;
    }

    nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    nav ul {
        width: auto;
    }

    .icon {
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    nav ul {
        flex-direction: column;
        gap: 1em;
    }

    nav.responsive button.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    nav.responsive ul li {
        float: none;
        display: block;
        text-align: left;
    }
}

#headshot>img {
    max-height: 400px;
}

#bio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
}

.main-content {
    max-width: 1200px;
    width: 100%;
    min-height: 100vh;
    margin: auto;

    background-color: transparent;
}

.sec {
    padding: 1rem;
    min-height: 100vh;
    align-items: flex-start;
    margin-bottom: 10vh;
}

.sec>.caption {
    width: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--text-color);
    opacity: .8;
    margin-bottom: 1em;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.card:hover:not(.footer) {
    transform: scale(1.025);
}

.card {
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    background: var(--card-color);
    overflow: hidden;
    transition: 250ms transform ease-in-out;
}

.card.card-compact {
    display: inline-flex;
    align-items: center;
}

.card>a {
    text-decoration: none;
}

.card .card-header {
    padding: 1rem;
}

.card .card-header.card-image {
    overflow: hidden;
    padding: 0;
}

.card:hover .card-header.card-image>img {
    transform: scale(1.025);
}

.card .card-header.card-image>img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    max-height: 200px;
    object-position: center;
    transition: 200ms transform ease-in-out;
}

.card .card-body {
    font-size: .9rem;
    padding: 1rem;
}

.card .title {
    font-style: italic;
    font-size: .85rem;
}

.card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--accent-color);
    padding: 1rem;
}

.chem-list {
    padding: 0;
}

.chem-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid var(--text-color);
}

.chem-list li .data-value {
    font-weight: bold;
    text-align: right;
}

.terminal {
    background-color: black;
    background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
    padding: 1em;
    border-radius: .5rem;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
    display: inline-block;
    margin-bottom: 1em;
}

.terminal:hover {
    background-image: radial-gradient(rgba(150, 0, 0, 0.75), black 120%);
    transform: scale(1.025);
    transition: 250ms transform ease-in-out;
}

.terminal, .terminal * {
    color: white !important;
    font: 1rem Inconsolata, monospace !important;
    text-shadow: 0 0 5px #C8C8C8;
}

.terminal pre {
    white-space: inherit;
    margin: 0;
}

.terminal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 1em);
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    border-radius: .5rem;
}

.terminal::selection {
    background: #0080FF;
    text-shadow: none;
}

.typewriter {
    overflow: hidden;
    border-right: .15em solid transparent;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 2.5s steps(10, end), blink-caret 1s step-end 2.8;
}

.blink {
    border-right: .15em solid white;
    animation: blink-caret 1s step-end infinite;
    margin-left: 1em;
}

.delay-display {
    animation: fadeIn 0s 3.3s forwards;
    visibility: hidden;
}

.social-icon {
    font-size: 2rem;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 10ch
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: white
    }
}

@keyframes fadeIn {
    to {
        visibility: visible;
    }
}

input, textarea {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--card-color);

    width: 100%;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    box-sizing: border-box;
    line-height: 1.25em;
    padding: .5rem;
}

input:invalid, textarea:invalid {
    border-color: #900;
    background-color: var(--error-color);
}

input:focus:invalid, textarea:focus:invalid {
    outline: none;
}

.error {
    width: 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
    display: inline-block;
}

.error.active {
    padding: 0.3em;
}

footer.card.footer {
    padding: 1em;
    text-align: center;
    border-radius: 0;
}