* {
    margin: none;
    padding: none;
    box-sizing: content-box;
}

ul {
    list-style: none;
}

body {
    font-family: "poppins", sans-serif;
    max-width: 1920px;
    text-transform: uppercase;
    background-color: rgb(255, 255, 255);
}

/* header */

header {
    display: flex;
    gap: 14rem;
    justify-content: space-around;
    padding: 2.5rem;
}


header .perfil {
    margin-left: 20rem;
}

header .foto-de-perfil {
    max-width: 10rem;
    border-radius: 1rem 4rem;
    border: solid black 0.2rem;
    margin-left: 1.4rem;
}

header {
    display: flex;
    gap: 14rem;
    justify-content: space-around;
    padding: 2.5rem;
}

header .navegacao {
    font-size: 1.5rem;
    display: flex;
    margin-right: 6rem;
}

header .nav {
    margin-left: 3rem;
    margin-top: 1rem;
}
body.modo-escuro {
    background-color: #212121;
    color: #fdfcfc;
}
header #botao-alterar-tema{
    background: none;
    border: none;
    cursor: pointer;
}
header .imagem-botao {
    max-width: 3rem;
    margin-top: 1rem;
    margin-left: 10rem;
}


a {
    color: black;
    text-decoration: none;
}

a:visited {
    color: black;
}

a:hover {
    color: rgb(60, 97, 184);
}

/* main */

h4 {
    font-size: 3rem;
    text-align: center;
    margin-top: -1rem;
    margin-bottom: -0.5rem;
}


main .listagem-de-ensino {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    justify-content: center;

}

main .cartao-de-ensino {
    align-items: center;
    text-align: center;
    background-color: rgb(220, 221, 221);
    max-width: 15rem;
    padding: 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    border-radius: 1rem 3rem;
    transition: 0.2s ease-in-out;
    border: 0.1rem solid #000000;
}

main .informacoes {
    background-color: rgb(174, 179, 192);
    border-radius: 1rem 3rem;
    border: 0.1rem solid rgb(5, 5, 5)
}

.situacao{
    margin-right: 2.5rem;
}

.modulos{
    justify-content: center;
    align-items: center;
}

.modulo,
.concluido,
.cursando,
.aguardando,
.estudando {
    padding: 0.4rem;
    border: 0.1rem solid black;
    border-radius: 2rem 1rem;
}

main .cartao-de-ensino{
    text-align: center;
    display: flex;
    align-items: center;
    padding: 0.4rem;
    max-width: 40rem;
}

main .png {
    padding: 0.5rem;
    max-width: 40rem;
}

main 
.informacoes {
    padding:0.4rem;
    text-transform: uppercase;
}

main
.modulos{
    display: flex;
    gap: 1rem;
    margin-right: 1.5rem;
}

main .descricao {
    text-align: center;
    align-items: center;
    max-height: 12rem;
    overflow-y: auto;
}

main .cartao-de-ensino:hover {
    transform: scale(1.02);
    transition: 0.2s ease-in-out;
}

.conhecimento {
    display: flex;
}

.html-logo,
.css-logo
 {
    max-width: 4rem;
    background: none;
    margin: 0 1rem 0 2rem;
}

.js-logo{
    max-width: 10rem;
    margin: 0 0 0 -1rem;
}

main .modulo {
    background-color: rgb(184, 191, 191);
}

main .concluido {
    background-color: rgb(128, 235, 128);
}

main .cursando {
    background-color: rgb(231, 201, 126);
}

main .aguardando {
    background-color: rgb(241, 115, 115);
}
main .estudando {
    background-color: rgb(171, 236, 236);
}


/* footer */

.footer {
    color: rgb(255, 0, 0);
}

.semestre {
    background-color: rgb(227, 241, 122);
}

.listagem-redes-sociais {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    margin-top: 3rem;
    justify-content: center;
}

.botao-facebook,
.botao-github,
.botao-instagram,
.botao-linkedin {
    max-width: 4rem;
    transition: 0.2s ease-in-out;

}

.botao-facebook:hover,
.botao-github:hover,
.botao-instagram:hover,
.botao-linkedin:hover {
    transform: scale(1.05);

}

footer {
    margin-left: 2rem;
    padding: 1rem;
    text-align: center;
}