@media screen and (width <= 980px) {
    @keyframes showSocials {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes raiseOpacity {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes lowerOpacity {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    .showScreen {
        animation-name: raiseOpacity;
        animation-duration: 2s;
        animation-delay: 0.25s;
        animation-fill-mode: forwards;
    }

    .hideScreen {
        animation-name: lowerOpacity;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    #container {
        width: 100%;
    }

    header {
        position: relative;
    }

    #photo {
        display: none;
    }

    #logo {
        width: 15vw;
    }

    ul {
        padding: 0 2vw 0 0;
        gap: 3vw;
    }

    #home {
        position: absolute;
        opacity: 0;
    }

    #project-screen {
        position: absolute;
    }

    #home-right {
        justify-content: start;
        gap: 0;
    }

    #name-title {
        padding: 8vh 0 4vh 0;
    }

    #name {
        font-size: 8vw;

        padding: 0 0 2vw 0;
    }

    #title {
        font-size: 5vw;

        padding: 1vw 0;
    }

    #about-me {
        font-size: 4vw;

        width: 100%;

        padding: 4vw;
    }

    #stack {
        width: 100%;

        padding: 5vw 0;
        
        gap: 5vw;
    }

    .stack {
        text-align: center;

        width: 8vw;
    }

    #socials {
        opacity: 0;

        transform: translate(80%, 60%);

        animation: raiseOpacity;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }

    #project-screen {
        flex-flow: column nowrap;
        opacity: 0;
    }

    .project {
        width: 100%;
        height: 50%;

        flex-flow: column nowrap;
    }

    .project-image {
        width: 60vw;
    }

    .description {
        width: 80vw;
    }
}