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

@media (max-width: 500px) {
    :root {
        /* Positions */
        --presentation-margin: var(--spacing-3xl) 0% 0% 0%;
        --arrow-1-margin: var(--spacing-l) 0% 0% 0%;
        --about-margin: 100% 0% 0% 0%;
        --arrow-2-margin: var(--spacing-l) 0% 0% 0%;
        --personal-projects-margin: 80% 0% 0% 0%;
        --college-projects-margin: var(--spacing-4xl) 0% 130% 0%;
        --footer-margin: 0%;

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

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

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

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

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

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

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

        /* 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(1, 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: center;
    }

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

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

    .project-header {
        padding: 10% 0% 0% 0%;
        justify-content: end;
    }

    .project-header h3 {
        display: none;
    }

    .left-content {
        width: 100%;
        height: auto;
        overflow-y: visible;
        display: block;
    }

    .left-content p {
        margin: 15px 0;
        line-height: 1.4;
    }

    footer {
        width: 100%;
        flex-direction: column;
        gap: 30px;
    }
}