* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100%;
    background-color: rgb(30, 30, 30);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

header, footer {
    display: flex;
    width: 100%;
    min-height: 25%; 
    background-color: black;      
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

    header .conteudo-nome, .destaques, .imagem{
        display: flex;
        width: 35%;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding: 1%;
    }

        header .conteudo-nome::before{
            pointer-events: none;
            content: "";
            position: absolute;
            width: 30%;
            height: 2.5%;
            background-color: rgb(161, 203, 214);
            margin-top: 9.5%;
            transform: perspective(40px) rotateX(30deg) scale(1, 0.7);
            filter: blur(10px);
            opacity: 50%;
        }

        header .conteudo-nome .nome{
            background-color: rgb(120, 120, 120);
            width: 75%;
            height: 60%;
            border-radius: 100px;
        }

            header .conteudo-nome .nome h1, h2{
                padding: 3%;
                font-size: 2em;
                color: white;
                text-align: center;
            }

            header .conteudo-nome .nome h2{
                margin-top: -6%;
                font-size: 1.5em;
                text-align: center;
            }

    header .destaques{
        flex-direction: column;
        padding: 0%;
        gap:10%;
    }

        header .destaques ul{
            color: rgb(183, 207, 228);
            font-size: 1.7em;
            list-style-type: none;
        }

            header ul li::before {
                content: "\2605";
                margin-right: 5px;
            }

        header .destaques .data{
            color: rgb(183, 207, 228);
            font-size: 1.3em;
        }

    header .imagem{
        padding: 0%;
    }

        header .imagem .foto{
            background-image: url(img/Foto-Currículo.jpeg);
            border-radius: 40%; 
            height: 100%;
            width: 75%;
            object-fit: cover;
            background-position: center 12%;
            background-position-x: calc(45%);
            background-size: 35em;
        }

main {
    margin: 2%;
    background-color: white;
    min-height: 100%;
    width: 95%;
    border-radius: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

    main .sobre_mim, .experiencia, .conhecimentos{
        width: 25%;
        height: 13%;
        background-color: rgb(120, 120, 120);
        border-radius: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: width 0.3s, height 0.3s; 
        overflow: hidden;
        position: relative;
    }

    main .sobre_mim h2, .experiencia h2, .conhecimentos h2{
        color: #C8FCEA;
        display: block;
    }

        main .sobre_mim:hover, .experiencia:hover, .conhecimentos:hover {
            background-color: rgb(255, 255, 255);
            border: 5px solid rgb(30, 30, 30);
            width: 40%;
            height: 75%;
            display: flex;
            justify-content: flex-start;
        }

        main .sobre_mim:hover h2, .experiencia:hover h2, .conhecimentos:hover h2{
            display: none;
        }

    main .sobre_mim .conteudo, .experiencia .conteudo, .conhecimentos .conteudo{
        display: none;
        width: 75%;
        height: 100%;  
        font-size: 1.3em;
    }

        main .sobre_mim:hover .conteudo, .experiencia:hover .conteudo, .conhecimentos:hover .conteudo {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: justify;
            flex-direction: column;
        }

        main .conhecimentos .conteudo table {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            width: 80%;
            height: 75%;
        }

            main .conhecimentos .conteudo table td {
                width: 50%;
                height: 100%;
            }

        main .conhecimentos .conteudo .icone {
            display: flex;
            flex-direction: row;
            justify-content:space-around;
            align-items: center;
            gap: 10%;
        }

        main .conhecimentos .conteudo img {
            position: relative;
            width: 25%;
            height: 25%;
        }

        main .conhecimentos .conteudo h5{
            position: relative;
        }
        
footer {
    background-color: rgb(200, 200, 200);
    min-height: 20%;
    flex-direction: column;
}

    footer .titulos{
        display: flex;
        width: 100%;
        height: 50%;
        flex-direction: row;
        justify-content: space-between;
        padding: 1%;
        font-size: 10pt;
        color: rgb(70, 70, 70);
    }

    footer .informacoes{
        width: 100%;
        height: 50%;
        display: flex;
        width: 100%;
        height: 50%;
        flex-direction: row;
        justify-content: space-between;
    }

        footer .contatos{
            display: flex;
            width: 25%;
            height: 100%;
            justify-content: space-around;
            align-items: center;
        }

            footer .contatos img {
                width: 50px;
                height: 50px;
            }

        footer .formacao{
            display: flex;
            width: 50%;
            height: 100%;
            align-items: center;
            justify-content: center;
            font-size: 1em;
        }

        footer .projetos {
            display: flex;
            width: 25%;
            height: 100%;
            justify-content: center;
            align-items: center;
        }

            footer .projetos .botao{
                text-align: center;
                font-size: 0.9em;
                width: 50%;
                height: 70%;
                background-color: rgb(120, 120, 120);
                border-radius: 20px;
                cursor: pointer;    
            }

            footer .projetos .lista-projetos{
                display: none;
                position: absolute;
                margin-top: -5%;
                width: 25%;
                height: 20%;
                background-color: rgb(255, 255, 255);
                border: 2px solid rgb(30, 30, 30);
            }

            footer .projetos .lista-projetos img{
                display: flex;
                margin-top: -1%;
                margin-left: 91%;
                cursor: pointer;
            }

            footer .projetos .lista-projetos li{
                display: flex;
                justify-content: center;
                margin: 1%;
                font-size: 1.1em;
                list-style-type: none;
            }

            footer li:hover {
                background-color: rgb(184, 181, 181);
                height: 100%;
                width: 90%;  
            }