@charset "UTF-8";

:root {
    --tamanho-max-1200: 1fr 80vw 1fr;
    --tamanho-max-1000: 1fr 85vw 1fr;
    --tamanho-max-470: 1fr 90vw 1fr;
}

@media screen and (max-width: 1200px) {

    #sobre-mim, #projetos, #contatos {
        grid-template-columns: var(--tamanho-max-1200);
    }

    #container-title-sobre-mim {
        width: 80vw;
    }
}

@media screen and (max-width: 998px) {
    main > section#inicio-container {
        grid-template-columns: 1fr auto 1fr;
        div#conteudo-inicio {
            grid-column: 2;
            display: flex;
            picture {
                img {
                    height: 290px;
                    animation: girar 5s linear infinite;
                }
            }
        }
    }


    @keyframes girar {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #sobre-mim, #projetos, #contatos {
        grid-template-columns: var(--tamanho-max-1000);
    }

    #container-title-sobre-mim {
        width: 85vw;
    }

    #sobre-mim {
        #inicio-sobre-mim {
            flex-direction: column-reverse;
            grid-column: 1 / span 3;
            gap: 60px;

            #info-sobre-mim {
                margin-top: 0px;
                border-radius: 0px;
                text-align: left;
                padding: 30px 0;
                display: grid;
                max-width: none;
                grid-template-columns: var(--tamanho-max-1000);

                h3 {
                    grid-column: 2;
                }

                p {
                    grid-column: 2;
                }

                div#icones-sociais {
                    grid-column: 2;
                    justify-content: center;
                }
            }

            #stacks-sobre-mim {
                grid-column: 2;
                width: 85vw;
                flex-flow: row wrap;
                align-self: center;
            }
        }

        /* Fim #inicio-sobre-mim*/
    }

    #fundo-azul {
        display: none;
    }

    @media screen and (max-width: 823.8px) {
        main > section > div#conteudo-inicio {
            flex-direction: column;
        }
        .projeto-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    }

    @media screen and (max-width: 704px) {
        header {
            padding: 0;
        }

        header > nav > ul {
            display: none;
            width: 100%;
            flex-direction: column;
            position: absolute;
            top: 62.4px;
            right: 0;
            gap: 0px;
            border-top: 2px solid #ebebeb;
            a {
                border-bottom: 2px solid #ebebeb;
            }
        }

        header > nav > div#menuIcone {
            display: block;
        }

        section#inicio-container {
            min-height: calc(105vh - 62.4px);
        }

        div.linha {
            margin: 70px 0;
        }

        article#sobre-mim > div#cards-container {
            margin-bottom: 100px;
        }

        .projeto-info {
            grid-template-columns: 1fr;
            gap: 0;
        }

        #botao-projetos {
            margin-bottom: 90px;
        }

        #contatos > #conteudo-contatos > #entrar-em-contato {
            grid-template-columns: 1fr;
            gap: 20px;
            #titulo-redes-sociais {
                text-align: center;
                #redes-sociais {
                    justify-content: center;
                }
            }
        }
    }
}

@media screen and (max-width: 470px) {

    #sobre-mim, #projetos, #contatos {
        grid-template-columns: var(--tamanho-max-470);
    }

    main > section > div#conteudo-inicio {
        div#texto-inicio {
            margin: 0px 15px;
        }
        picture > img {
            max-height: 50vw;
        }
    }

    #container-title-sobre-mim {
        width: 90vw;
    }

    #sobre-mim {
        #inicio-sobre-mim {
            #info-sobre-mim {
                grid-template-columns: var(--tamanho-max-470);
            }

            #stacks-sobre-mim {
                width: 90vw;
            }
        }
    }
}