@media (max-width: 768px) {
    :root {
        --title-font-size: 48px;
    }


    header nav {
        width: 150px;
        height: 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 50px;
        right: 0px;
        background-color: var(--color-surface);
        border-radius: 0px 0px 0px 10px;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    header nav.expand {
        height: 260px;
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    header nav ul li {
        margin: 5px 10px;
    }

    header nav #lang {
        margin: 10px 20px;
    }

    header #open-menu {
        display: flex;
    }

    header #open-menu.expand {
        transform: rotate(180deg);
    }


    section {
        flex-direction: column;
        padding: 50px 20px;
    }


    #home #avatar {
        margin: 50px auto;
    }


    #about {
        position: relative;
        overflow: hidden;
    }

    #about #about-content {
        width: 100%;
    }

    #about #about-content h1,
    #about #about-content p,
    #about #about-content ul,
    #about #about-content ul li {
        color: #e8eaed;
    }

    #about #about-content ul {
        margin-left: 30px;
    }

    #about #about-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        z-index: -1;
    }

    #about #about-image img {
        width: 100%;
        height: calc(100% - 50px);
        margin-top: 50px;
        object-fit: cover;
        filter: blur(1px);
        border-radius: 0;
    }


    #projects #project-wrapper {
        margin: 50px auto auto auto;
    }

    #projects #project-wrapper #project-list .project-card {
        width: 100%;
    }

    #projects #project-wrapper #project-list .project-card h1 {
        font-size: 18px;
    }

    #projects #project-wrapper #project-list .project-card .description h1 {
        font-size: 18px;
    }

    #projects #project-wrapper #project-list .project-card .description p {
        font-size: 17px;
    }

    #projects #project-wrapper #project-list .project-card .description a {
        font-size: 17px;
    }

    #contact #info {
        width: 100%;
    }

    #contact #contact-form {
        width: 90%;
        margin: 40px auto auto auto;
    }
}