#mobile {
    display: none;
}

@media(max-width: 900px) {
    body {
        height: auto;
        overflow: scroll;
    }

    #mobile {
        display: block;
    }

    #desktop {
        display: none;
    }

    @keyframes formTop {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    #mobile-info-container {
        transform: translateY(-100%);
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding: 8px 12px;
        box-sizing: border-box;
        animation-name: formTop;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }

    #mobile-title {
        font-size: 2em;
        font-weight: 400;
        margin: 0;
    }

    #mobile-subtitle {
        font-size: 1em;
        margin: 0;
    }

    #mobile-about-me {
        text-decoration: underline;
        margin: 0px;
        margin-top: 8px;
    }

    #email-link-mobile {
        font-style: italic;
        margin-top: 8px;
        color: black;
    }

    #mobile-projects-container {
        margin-top: 20%;
    }

    .mobile-project-container {
        transition: all 1s;
        opacity: 0;
        display: flex;
        align-items: end;
        border-bottom: 1px solid black;
        margin-bottom: 16px;
        margin-left: 10%;
        gap: 4px;
    }

    #mobile-project-title {
        font-size: 1rem;
    }

    #mobile-project-subtitle {
        font-size: 0.8rem;
    }

    #mobile-project-description {
        font-size: 0.8rem;
    }

    .mobile-project-image {
        width: 150px;
        height: 150px;
        background-size: cover;
        background-position: center;
    }

    .mobile-project-name {
        box-sizing: border-box;
        margin: 0px;
        font-size: 0.7rem;
        width: 50%;
    }

    #mobile-project-panel {
        position: fixed;
        height: 100vh;
        width: 100%;
        background-color: black;
        top: 0%;
        left: 100%;
        transition: all 0.3s;
        color: white;
    }

    #mobile-project-panel>div {
        height: 100%;
    }

    #mobile-close-project {
        width: fit-content;
        transform: rotateZ(45deg);
        margin: 0px;
        padding: 8px;
    }

    #mobile-project-data-container {
        padding: 24px;
    }

    #mobile-project-photo-container {
        height: 50%;
        width: 100%;
    }

    #mobile-project-photo-container>div {
        width: 100%;
        height: 20%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 0.2s;
        display: block;
        margin: 2px 0px;
        opacity: 1;
    }

    #mobile-project-photo-container>div:hover {
        height: 100%;
        opacity: 1;
    }
}