/*
 * Position, behaviors, sizes for a pad
 */

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

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

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

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

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

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

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

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

        /* Text */
        --header-a-size: var(--text-size-s);
        --h2-size: var(--title-size-m);
        --h3-size: var(--text-size-s);
        --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;
    }

    header nav {
        display: none;
    }

    .profile,
    .degree {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .fablab {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .about-content h3,
    .about-content div {
        justify-content: center;
        align-items: center;
    }

    .about-content div {
        text-align: start;
    }

    .degree div p {
        text-align: start;
    }

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

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

    .left-content {
        margin-top: 10%;
    }
}