@media (max-width: 880px) {
    header {
        flex-direction: column;
        align-items: stretch;
    }

    .header-main {
        justify-content: space-between;
        margin-bottom: var(--spacing-sm);
    }

    header nav {
        justify-content: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    header nav .raised-button {
        text-align: center;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .about-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .picture-box {
        overflow: visible;
        max-width: 250px;
        width: 100%;
        margin: 0 auto;
    }

    .picture-box::before {
        opacity: 0;
    }

    .picture-box img {
        filter: none;
    }

    .content-box {
        height: auto;
    }

    .picture-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: var(--spacing-sm);
        aspect-ratio: auto;
        align-items: stretch;
    }

    .tile-image img {
        filter: none;
    }

    .tile:hover .tile-image img {
        transform: none;
    }

    .skills-table {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .skills-table tbody,
    .skills-table tr {
        display: contents;
    }

    .skills-table th,
    .skills-table td {
        display: block;
        width: auto;
    }

    /* reorder headers to go with their content */
    .skills-table th:nth-of-type(1) {
        order: 1;
    }
    .skills-table td:nth-of-type(1) {
        order: 2;
    }
    .skills-table th:nth-of-type(2) {
        order: 3;
    }
    .skills-table td:nth-of-type(2) {
        order: 4;
    }
    .skills-table th:nth-of-type(3) {
        order: 5;
    }
    .skills-table td:nth-of-type(3) {
        order: 6;
    }

    .skills-table td {
        margin-bottom: var(--spacing-lg);
    }

    .skill-block {
        box-shadow: var(--shadow-offset) var(--shadow-offset)
            var(--border-color);
        transform: translate(
            calc(-1 * var(--shadow-offset)),
            calc(-1 * var(--shadow-offset))
        );
        font-weight: normal;
    }

    .skill-block:hover {
        box-shadow: var(--shadow-offset) var(--shadow-offset)
            var(--border-color);
        transform: translate(
            calc(-1 * var(--shadow-offset)),
            calc(-1 * var(--shadow-offset))
        );
        font-weight: normal;
    }
}

/* contact section */
#contact-grid {
    flex-direction: column;
}

#links a {
    min-height: 3em;
    font-size: 1em;
}

#links a i {
    font-size: 2em;
}

#links a .fa-file-arrow-down {
    font-size: 1.8em;
}