/* CSS RESPONSIVO */
@media (max-width: 1480px) {

    /* tela até 1480px */
    header {
        /* estilo do header */
        padding: 12px 2.5%;
        transition: .1s;
    }

    header.sticky {
        /* estilo do header quando muda de classe ao scrollar */
        padding: 10px;
    }

    section {
        /* estilo das sections padrao */
        padding: 110px 3% 60px;
    }

    .end {
        /* estilo da section end (Footer) */
        padding: 15px 3%;
    }
}

@media (max-width: 1100px) {

    /* tela até 1100px */
    :root {
        /* declarando variaveis novamente */
        /* para mudar os valores e se adequar à tela */
        --big-font: 4rem;
        --h2-font: 2.5rem;
        --p-font: 1rem;
        transition: .1s;
    }

    .home-text h3 {
        /* estilo do h3 da section home */
        font-size: 2.5rem;
    }

    .home {
        /* estilo da section home */
        height: 105vh;
    }
}

@media (max-width: 920px) {

    /* tela até 920px */
    .sobre {
        /* estilo da section sobre */
        grid-template-columns: 1fr;
    }

    .sobre-img {
        /* estilo da img da section sobre */
        text-align: center;
        order: 2;
    }

    .sobre-img img {
        display: none;
    }

    .contact {
        /* estilo da section contato */
        grid-template-columns: 1fr;
    }
}

@media (max-width: 840px) {

    /* tela até 840px */
    #menu-icon {
        /* estilo do menu hamburguer */
        /* sai do display none e mostra o menu */
        display: block;
    }

    .navlist {
        /* estilo da navlist - links header */
        position: absolute;
        top: -1000px;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background: var(--bg-color);
        text-align: center;
        transition: all .45s ease;
    }

    .navlist a {
        /* estilo dos links da navlist */
        display: block;
        margin: 17px;
        font-size: 20px;
        transition: all .45s ease;
        color: var(--text-color);
    }

    .navlist a:hover {
        /* hover dos links da navlist */
        color: var(--main-color);
    }

    .navlist a:active {
        /* links da navlist quando ativados */
        color: var(--text-color);
    }

    .navlist.open {
        /* links da navlist quando abertos*/
        top: 100%;
    }

    .portfolio-content {
        /* estilo da section portfolio */
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
    }
}

@media (max-width: 920px) 
{
    .sobre-texto h2 {
        text-align: center;
    }

    .sobre-texto h4 {
        text-align: center;
    }

    .contact-text h2 {
        text-align: center;
    }

    .contact-text h4 {
        text-align: center;
    }

    .list li a {
        text-align: center;
    }

    .contact-icons {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 500px) {

    /* tela até 500px */
    .layer i {
        /* estilo do icone com link da section portfolio */
        width: 50px;
        height: 50px;
    }

    .layer h5 {
        /* estilo do h5 da section portfolio */
        font-size: 1rem;
    }

    .layer p {
        /* estilo do p da section portfolio */
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    /* tela até 360px */
    .row img {
        /* estilo do img da section portfolio */
        width: 100%;
        height: 12rem;
        margin-right: 0.5rem;
    }

    .layer {
        /* estilo da layer da section portfolio */
        width: 100%;
    }

    .row:hover img {
        /* hover da img da section portfolio */
        transform: scale(1);
    }

    .portfolio-content {
        /* estilo da section portfolio */
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
    }

    .home-text p {
        /* estilo do p da section home */
        padding-right: 0.1rem;
        text-align: center;
    }

    .home-text h1 {
        /* estilo do h1 da section home */
        font-size: 3rem;
        text-align: center;
    }

    .home-text h3 {
        /* estilo do h3 da section home */
        font-size: x-large;
        text-align: center;
    }

    .button {
        /* estilo botao da div dos textos da home: Diga ola e veja meus trabalhos */
        padding: 0.1rem;
    }

    .slide {
        /* estilo dos textos olá eu sou */
        text-align: center;
    }

    .layer {
        /* estilo dos textos da layer da section portfolio */
        font-size: small;
    }

    .layer i {
        /* estilo dos links da layer da section portfolio */
        width: 45px;
        height: 45px;
    }

    .layer h5 {
        /* estilo do h5 da layer da section portfolio */
        font-size: 1rem;
    }

    .layer p {
        /* estilo do p da layer da section portfolio */
        font-size: 0.8rem;
    }
}