/* Medium size screens (e.g. iPad)*/
@media screen and (max-width: 1200px) {
    /*Switch to hamburger mav*/
    #desktop-nav {
        display: none;
    }

    #hamburger-nav {
        display: flex;
    }

    /*Move the profile pictures above the rest of the section and reduce their size*/
    #profile,
    .section-content-container {
        display: block;
    }

    .section-pic-container {
        width: 275px;
        height: 275px;
        margin: 0 auto 2rem;
    }

    /*Reduce the section margins for a more compact layout*/
    section {
        margin: 0 5%;
    }

    /*Change the height of the main section*/
    #profile,
    .section {
        padding-top: 5vh;
        height: fit-content;
    }
}

/* Switch the footer links to a column layout on small-ish screens */
@media (max-width: 1000px) {

    footer .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    footer {
        padding-bottom: 5rem;
    }
}

/* Small size screens (e.g. large smartphone)*/
@media (max-width: 600px) {

    /*Switch the publication table to a different layout*/
    .publications-table,
    .publications-table thead,
    .publications-table tbody,
    .publications-table th,
    .publications-table td,
    .publications-table tr {
        display: block;
    }

    .publications-table thead tr {
        display: none;
    }

    .publications-table td {
        text-align: center;
        padding: 12px 8px;
        border-bottom: 1px solid rgb(224, 224, 224);
        position: relative;
    }

    .publications-table td:before {
        text-align: center;
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }

    td[data-label="Citations"] {
        text-align: center;
        vertical-align: middle;
    }

    /*Decrease the job description text size*/
    .job-title-text {
        font-size: 1.25rem;
    }

    /*Decrease the section title size*/
    .section-title {
        font-size: 2.25rem;
    }

    /*Decrease the section intro size*/
    .section-intro-title {
        font-size: 1.35rem;
    }

    /*Change the gap between elements of a section content*/
    .section-subcontent-container {
        gap: 0.5rem;
    }

    /*Change the section pics container size when it's on top of the section content*/
    .section-pic-container {
        width: auto;
        height: 60vw;
        justify-content: center;
    }
}

/*Very small screens (e.g. iPhone 12 mini)*/
@media screen and (max-width: 400px) {

    /*Decrease the font size of the logo*/
    .logo {
        font-size: 1.5rem;
    }

    /*Switch to row mode for all section contents*/
    .section-subcontent-container {
        display: block;
    }

    /*Add a bottom margin to the containers in row mod*/
    .border-container {
        margin-bottom: 1rem;
    }

    /*Remove the margin of the description container*/
    .description-text {
        margin-top: 0;
    }

    .modal-title {
        font-size: 1.7rem !important;
    }

    .modal-subtitle {
        font-size: 1.4rem !important;
    }
}