@media only screen and (max-width: 1560px)
{
    #projects-preview-desktop {
        right: calc(100vw - 1560px + 40px);
        width: 700px;
        max-width: 700px;
    }
}

@media only screen and (max-width: 1440px)
{
    #projects-preview-desktop {
        right: -80px;
    }
}

@media only screen and (max-width: 1360px)
{
    #projects-preview-desktop {
        width: calc(50vw + 40px);
    }
}

@media only screen and (max-width: 1014px)
{
    section:not(#section-about-me) h2 {
        max-width: calc(100% - 5px) !important;
        transform: none !important;
        margin-left: 5px;
        padding-right: 0;
    }
}

@media only screen and (max-width: 1000px)
{
    #projects-preview-desktop {
        width: calc(100% - 500px + 40px);
    }

    .project {
        padding-right: calc(100% - 500px);
    }

    p.projects-desc,
    p.skills-desc,
    p.exp-desc {
        margin: 0 auto 0 0;
        transform: none;
    }
}

@media only screen and (max-width: 930px)
{
    .project {
        padding-top: 150px;
    }
    
    .project > .project-preview-mobile {
        display: block;
        width: 100%;
        max-width: calc(100% - 40px);
        position: relative;
        right: auto;
        margin: 35px auto 0;
        filter: drop-shadow(0 10px 15px rgb(0 0 0 / .35));
    }

    #projects-slider > div > div {
        max-width: calc(241px * 8);
        min-width: calc(241px * 8);
    }

    #projects-slider > div div b {
        width: 225px;
    }
}

@media only screen and (max-width: 830px)
{
    body:has(#message-me > div.fixed:not(.hidden), #message-me > div span:focus) .cta {
        opacity: 0;
        pointer-events: none;
    }

    footer nav a {
        display: none;
    }
    
    footer nav button {
        display: inline-block;
        width: calc(100% / 3 - 15px * 2);
    }
}

@media only screen and (max-width: 770px)
{
    #section-about-me {
        margin-bottom: 75px;
        padding: 175px 0 0;
    }

    #section-about-me:before {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    section h2 {
        max-width: calc(100% - 5px) !important;
        transform: none !important;
        margin-left: 5px;
        padding-right: 0;
    }

    #hero-section > div h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 690px)
{
    footer h2 {
        font-size: 30px;
    }

    footer nav button {
        display: inline-block;
        width: max-content;
    }

    .project > .project-preview-mobile {
        width: calc(100% + 30px);
        max-width: calc(100% + 30px);
        margin-left: calc(-30px / 2);
    }
}

@media only screen and (max-width: 620px)
{
    section h2 {
        font-size: 35px;
    }
}

@media only screen and (max-width: 590px)
{
    #hero-section nav a {
        width: calc(50% - 10px);
    }

    #hero-section nav a:nth-child(odd) {
        text-align: left;
        padding-left: 20px;
    }

    #hero-section nav a:nth-child(even) {
        text-align: right;
        padding-right: 20px;
    }

    #hero-section > div {
        max-width: calc(100% - 10px);
    }

    #hero-section > div h1 {
        font-size: calc(100vw * .05);
    }

    #hero-section > div h1 i:nth-child(12) {
        margin-right: 20px;
    }

    #hero-section > div h1 u {
        transform: translateX(-40px) rotate(15deg);
    }
}

@media only screen and (max-width: 510px)
{
    footer h2 {
        font-size: 20px;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 490px)
{
    footer nav button:last-of-type {
        display: none;
    }

    div.experiences > div {
        margin: 0 5px;
    }

    div.experiences > div:first-of-type {
        margin-left: 10px;
    }

    div.experiences > div:last-of-type {
        margin-right: 10px;
    }
}

@media only screen and (max-width: 390px)
{
    footer h2 {
        font-size: 17px;
    }
}