/*
 * Position, behaviors, sizes for a medium screen
 */

@media (max-width: 1080px) {
    :root {
        /* Positions */
        --presentation-margin: var(--spacing-xxl) 0% 0% 0%;
        --arrow-1-margin: var(--spacing-s) 0% 0% 0%;
        --about-margin: var(--spacing-3xl) 0% 0% 0%;
        --arrow-2-margin: var(--spacing-s) 0% 0% 0%;
        --personal-projects-margin: var(--spacing-xxl) 0% 0% 0%;
        --college-projects-margin: var(--spacing-m) 0% 10% 0%;
        --footer-margin: var(--spacing-xxl) 0% 0% 0%;

        /* Body */
        --body-margin: 0 var(--spacing-s);

        /* Header */
        --header-padding: var(--spacing-3xs);
        --header-gap: 50px;

        /* Presentation */
        --presentation-h2: 7em;
        --presentation-p: var(--text-size-s);

        /* About */
        --about-content-padding: 5%;
        --about-content-gap: 50px;
        --about-content-width: 100%;
        --about-p-size: var(--text-size-xs);

        /* Projects */
        --project-gap: 5%;
        --project-top: 15%;
        --project-right: 10%;
        --project-bottom: 5%;
        --project-left: 10%;
        --project-padding: 1% 2%;
        --project-content-gap: 5%;
        --left-content-width: 100%;
        --right-content-width: 100%;
        --repo-width: 60%;
        --repo-padding: 2% 0%;

        /* Footer */
        --links-gap: 30%;

        /* Title */
        --prm-size: 1em;
        --sdr-size: 0.55em;

        /* Img sizes */
        --profile-img-size: 185px;
        --fablab-img-size: 175px;
        --college-img-size: 165px;
        --iframe-video-height: 350px;
        --link-sizes: 25px;

        /* Text */
        --header-a-size: var(--text-size-s);
        --h2-size: var(--title-size-m);
        --h3-size: var(--title-size-xs);
        --p-size: var(--text-size-s);
        --a-size: var(--text-size-s);
        --preview-p-size: var(--text-size-xs);

        --arrow-size-text: var(--text-size-xs);
        --arrow-size-symbol: var(--text-size-s);
        --arrow-weight-symbol: var(--text-weight-s);

        /* Other */
        --column-number: repeat(2, 1fr);
        --scroll-margin-top: 150px;
    }

    .project-content {
        padding-bottom: 10%;
        flex-direction: column;
        overflow-y: scroll;
    }

    .left-content,
    .right-content {
        overflow-y: visible;
    }
}