@media (max-width: 900px) {
    :root {
        --logo-slide-x: 0%;
        --logo-slide-y: 50%;

        --text-slide-x: 0%;
        --text-slide-y: -20%;
    }

    body {
        font-size: 13pt;
    }

    #main {
        font-size: 0.9em;
    }

    #main #header {
        flex-direction: column;
        align-items: center;
    }

    #main #title {
        text-align: center;
        align-items: center;
        margin-left: 0 !important;
    }

    #main #socials {
        margin-left: 1.25em;
    }

    .content-container {
        .back-button {
            position:absolute;
        }
    }

    .project-gallery .swiper-slide {
        height: 10em;
    }

    .project-details {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }
}