@import url(../css/variaveis.css);

@media (max-width: 900px) {
    header{
        justify-content: space-around;

        ul a, .btn-functions button {
            display: none;
        }

        #menu-mobile{
            display: initial;
        }
    }

    #inicio{
        h1{
            font-size: 4rem;
        }

        .cargo{
            h4{
                font-size: 2.5rem;
            }
        }

        .inicio-btns{
            display: flex;
            flex-direction: column-reverse;
            gap: 2rem;
            margin-top: 3rem;

            .btn-contato{
                width: 26rem;
            }
        }
    }

    #sobre-mim{
        width: 100%;
        margin: 0 auto;
        h1{
            font-size: 3.8rem;
        }
        p{
            text-align: justify;
            width: 90%;
        }

        .sobre-mim-divisao{
            padding: 0;
            width: 100%;
            .formacoes{
                .formacoes-conteudo{
                    flex-direction: column;
                    align-items: center;

                }
                .formacao{
                    width: 90%;
                    min-height: 30rem;
                    height: auto;
                }
            }

            .experiencias{
                .experiencias-conteudo{
                    .experiencia{
                        width: 90%;
                        height: auto;
                    }
                }
            }
        }
    }

    #projetos{
        h1{
            margin: 0 auto;
            font-size: 3.8rem;
        }
        p{
            text-align: justify;
            width: 90%;
        }

        .position-projetos{
            .projeto{
                max-width: 43rem;
                min-width: 43rem;
                min-height: 43rem;
            }
        }

        .btn-ver-todos{
            margin: 0;
            width: 90%;
        }
    }

    #tecnologias{
        h1{
            margin: 0 auto;
            font-size: 3.8rem;
        }
        p{
            width: 90%;
            text-align: justify;
        }

        .div-techs{
            flex-direction: column;

            .line{
                height: 0;
                border-radius: 2rem;
            }
            .cards-tecnologias{
                .card-tecnologia{
                    p{
                        text-align: center;
                    }
                }
            }
        }
    }

    #contato{
        h1{
            margin: 0 auto;
            font-size: 3.8rem;
        }
        p{
            width: 90%;
            text-align: justify;
        }

        .position-contato{
            flex-direction: column-reverse;
            .infos-contato{
                .info-contato{
                    width: 45rem;
                    height: 8rem;
                    margin: 0 auto;
                }
            }

            .btn-discord{
                max-width: 45rem;
                min-height: 14rem;
                gap: 1rem;
            }

            .btns-contato{
                .btn-contato{
                    width: 22rem;
                    height: 22rem;

                    p{
                        text-align: left;
                    }
                }
            }
        }
    }

    #rodape{
        height: 20rem;
        .conteudo-rodape{
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;

            .left-footer{
                text-align: center;
            }
        }
    }
}

@media (max-width: 480px){
    header{
        padding: 1rem 1rem;
    }
    
    #inicio{
        h1{
            font-size: 3rem;
        }
        .cargo{
            h2{
                font-size: 2.2rem;
            }
        }
    }

    #sobre-mim, #projetos, #tecnologias, #contato{
        h2{
            font-size: 2.8rem;
            margin: 0 auto;
        }
    }

    #projetos{
        .projetos{
            .projeto{
                max-width: 90%;
                min-width: 90%;
                min-height: 43rem;
            }
        }
    }

    #contato{
        .position-contato{
            flex-direction: column-reverse;
            .infos-contato{
                max-width: 90%;
                .info-contato{
                    width: 90%;
                    height: 8rem;
                    margin: 0 auto;

                    p{
                        text-align: left;
                        font-size: 1.4rem;
                    }
                }
                .btn-discord{
                    width: 90%;
                    
                    gap: 1rem;
                    margin: 0 auto;
                    .position-btn-discord{
                        .desc-btn-discord{
                            p{
                                text-align: left;
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }

            .btns-contato{
                .btn-contato{
                    width: 18rem;
                    height: 18rem;
                    gap: 0;

                    p{
                        text-align: left;
                        font-size: 1.3rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    #projetos .position-projetos .projeto {
        width: 90%;
        min-width: 0;  /* remove qualquer min-width antigo */
        max-width: 90%;
        min-height: auto;  /* deixa a altura flexível */
        margin: 0 auto;    /* centraliza o card */
    }

    #projetos .position-projetos {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
}