@media (max-width: 1050px)
{
    html {font-size: 55%;}

    .contact__section
    {
        min-height: 86vh;
    }
}

@media (max-width: 945px)
{
    html {font-size: 50%;}

    .skills__text__box
    {
        padding: 0 4rem;   
    }
}

@media (max-width: 760px)
{
    .page__title
    {
        font-size: 3.2rem;
    }

    .page__text
    {
        font-size: 2rem;
    }

    .contact__section
    {
        min-height: 0;
    }

    .header__reach-me
    {
        display: none;
    }

    .header__mail__box
    {
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .right__box .header__title__line
    {
        display: none;
    }
}

@media (max-width: 650px)
{
    .page__title
    {
        font-size: 2.8rem;
    }

    .page__text
    {
        font-size: 1.6rem;
    }

    h1.conclusion__title
    {
        font-size: 3rem;
    }
    
    :root {--section-margin: 10rem;}
}

@media (max-width: 564px)
{
    .hero__card__title
    {
        font-size: 2rem;
    }

    .hero__card__text
    {
        font-size: 1.6rem;
    }

    .skills__text__box
    {
        padding: 0 2rem;
    }

    .skills__text
    {
        margin: 2rem;
    }

    .conclusion__image__box
    {
        aspect-ratio: 100/21;
    }

    .hero__content__box
    {
        padding: var(--section-margin) 10vw;
    }
}

@media (max-width: 495px)
{
    .page__title
    {
        font-size: 2.4rem;
    }
    
    .hero__section
    {
        min-height: 0;
    }

    .hero__content__box
    {
        padding: var(--section-margin) 6vw;
    }

    .skills__section
    {
        grid-template-columns: 1fr 1.6fr;
    }

    .skills__image__box
    {
        min-height: 70vh;
    }

    .skills__text__box
    {
        gap: 3rem;
    }

    .contact__form
    {
        width: 70vw;
    }

    .contact__text .long {display: none;}
    .contact__text .short {display: inline;}

    :root {--section-margin: 12rem;}
}

@media (max-width: 416px)
{
    .page__title
    {
        font-size: 2rem;
    }

    .page__text
    {
        font-size: 1.4rem;
    }

    .hero__card
    {
        aspect-ratio: 4/5.4;
    }

    .conclusion__text
    {
        padding: 2rem 0;
    }
}

@media (max-width: 370px)
{
    .skills__section
    {
        grid-template-columns: 1fr 1.8fr;
    }
}