:root, :root[data-theme='light'] { /*adciona o tema que será padrão*/
    --primary-color: #F0F0F0; /*Cor principal, usada para texto e elementos de destaque*/
    --primary-bg-color: #E9E9E9; /*Cor de fundo principal*/
    --secondary-bg-color: #41607F; /*Cor de fundo secundária, para seções ou cards*/
    --text-color: #28292E; /*Cor dos títulos*/
    --title-color: #28292E; /*Cor do texto padrão*/
    --link-color: #585960; /*Cor dos links*/
    --icon-color: #C7C8C9;
}

:root[data-theme='dark'] {
    --primary-color: #F0F0F0; /*Cor principal, usada para texto e elementos de destaque*/
    --primary-bg-color: #111217; /*Cor de fundo principal*/
    --secondary-bg-color: #41607F; /*Cor de fundo secundária (para seções)*/
    --title-color: #F0F0F0; /*Cor dos títulos*/
    --text-color: #d7d7db; /*Cor do texto padrão*/
    --link-color: #9A9A9C; /*Cor dos links*/
    --icon-color: #C7C8C9; /*Cor dos ícones*/
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*não autera o tamanho ou a largura do elemento, encaixa tudo na dimensõ estipulada*/
    vertical-align: baseline;
    list-style: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body{
    background: var(--primary-bg-color);
}

.header{
    display: flex;
    flex-flow:row wrap; /*quebra a linha altomaticamente na responsividade*/
    justify-content: space-between; /*centraliza os itens no cabeçalho*/
    align-items: center; /*alinha os itens verticalmente*/
    width: 100%;
    padding: 1.5rem 3rem; 
    background-color: var(--secondary-bg-color);
    margin: auto;
    border-bottom: 1px solid var(--title-color);
   position: fixed; /*O header fica fixo (fundo, borda, texto) e é removido do fluxo normal do documento (como se estivesse flutuando sobre a página).*/
    /* Quando utiliza position: fixed/ left:0 / right:0, o navegador é forçado a estender o elemento para que ele preencha todo o espaço entre a borda esquerda e a borda direita da tela.*/
}

#toggleTheme{
    font-size: 1.5rem;
    cursor: pointer;  /*o curso muda*/
    transition: ease-in-out .4s;
    color: var(--text-color);
}

#toggleTheme:hover{
    transform: scale(1.3);
}

a{
    text-decoration: none;
}

.menu{
    display: flex;
    align-items: center;
    gap: 1.5rem; /*espaço entre os itens*/
    font-weight: 500px;
    border-left: 10px;
}

.menu a{
    color:var(--title-color);
    justify-content: space-between;
}

.menu a:hover{ /*muda a cor do texto ao passar o mouse por cima*/
    color:var(--icon-color);
}

.menu li:first-child a{ /*HOME*/
    color:var(--icon-color);
}

main{
    display:flex;
    padding-top: 6rem;
    flex-direction: column;
}

main h1{
    margin-bottom: 1rem;
    margin-top: 3rem;
    margin-left: 1.5rem;
}

main p{
    margin-bottom: 1rem;
    margin-top: 3rem;
    margin-left: 1.5rem;
}

h1, h2, h3{
    text-transform: uppercase;
    color:var(--title-color);
    font-weight: 300;
}

h2{
    font-size: 2rem;
    text-align: center;
    margin: 2rem;
    letter-spacing: 0.4rem;
}

p{
    color: var(--text-color)
}

span{
    color: var(--text-color);
    gap:3rem;
}

#projetos{
    display: flex;
    flex-direction: column;
    padding: 2rem 0rem;
}

.projetos_container{
    margin-left: 1rem;
    margin-right: 1rem;
}

#projetos button{
    border: solid 1px var(--link-color);
}

#projetos i{
    color: var(--text-color);
}

#projetos h2{
    background-color: var(--secondary-bg-color);
    color: var(--icon-color);
    text-align: center;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    margin-left: 0%;
    font-weight: 500px; /*Grossura da fonte*/
}

#projetos h3{
    font-weight: 300;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    background-color: transparent;
    border-radius: 3.125rem;
    padding: 0.875rem 1.5rem;
    transition: ease-in-out .3s;
    cursor:pointer;
    color: var(var(--link-color))
}

.btn:hover{
    transform: scale(1.1);
}

.btn btn--primary{
    border-radius: 0.125rem;
}

.projetos_card{
    display: flex;
    flex-direction: column;
    gap:2rem;
}

.card_cover{
    width:100%;
    border-radius: 0.7rem;
    object-fit: cover; /*ajuda na responsividade*/
    object-position: center;
}

.card_body{
    display:flex;
    flex-direction: column;
    gap: 1rem;
}

.card_title{
    font-size: 1.5rem;
}

.card_description{
    font-size:1rem;
}

.card_button{
    display:flex; /*coloca os botões na mesa linha*/
    margin-bottom: 3rem;
    gap: 0.4rem; /*afastar os botões*/
}

#sobre{
    color:var(--text-color);
}

#sobre h2{
    background-color: var(--secondary-bg-color);
    color: var(--icon-color);
    text-align: center;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    margin-left: 0%;
    font-weight: 500px;
}

#sobre .about_description p{
    text-align: center;
    margin-bottom: 1.5rem;
    padding:2rem;
}

#sobre .about_icons1{
    margin-bottom: 1rem;
    padding: 1.5rem;
    border-top: solid 1px var(--icon-color);
}

#sobre .about_formation{
    margin-bottom: 1rem;
    padding:1.5rem;
    border-top: solid 1px var(--icon-color);
}

#sobre .about_expert{
    margin-bottom: 1rem;
    padding:1.5rem;
    border-top: solid 1px var(--icon-color);
}

#sobre .about_curso{
    margin-bottom: 1rem;
    padding:1.5rem;
    border-top: solid 1px var(--icon-color);
}

.about_icons span{
    margin-bottom: 1rem;
}

#contato h2{
    background-color: var(--secondary-bg-color);
    color: var(--icon-color);
    text-align: center;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    margin-left: 0%;
    font-weight: 500px;
}

#contato p{
    margin-bottom: 2rem;
    text-align: center;
}

#contato .menu.menu--social{
    margin-bottom: 1rem;
    padding:1.5rem;
    align-items: center;
    text-align: center;
    
}

.menu.menu--social{
    align-items: center;
}

.menu--social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* Adiciona um espaço entre os ícones para melhor visualização */
}

.menu.menu--social a,
.menu.menu--social a i,
.menu.menu--social a span {
  color: var(--text-color);
}

#contato button{
  border: 1px solid var(--text-color);
}

footer{
    color:var(--title-color);
    border-top: 1px solid var(--title-color);
    visibility: visible;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: var(--text-color);
}

a:hover{
    text-decoration: none;
}


@media (min-width: 768px){
    .header{
        padding: 1.9rem 6rem;
        font-size: 1.1rem;
    }

    #toggleTheme{
        font-size: 1.5rem;
    }

    .menu{
        font-size: 1rem;
    }

    main h1{
        margin-left: 240px;
        font-size: 100px;
    }

    main p{
        font-size: 24px;
        padding-left: 220px;
    }

    .btn{
        width: 50%;
        margin:0 auto;
    }

    h2{
        font-size: 3rem;
    }

    p{
        font-size: 1.5rem;
    }

    #projetos p{
        font-size: 2rem;
    }

    #projetos h3{
        font-size: 45px;
    }

    span{
        font-size: 1.5rem;
    }

    .projetos_card{
        flex-direction: row;
        margin-bottom: 6rem;
    }

    .card_body{
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 6rem;
    }

    .card_cover{
        width:50%;
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .card_cover.card--menor{
        width: 75%; /*Para aumentar a imagen que estava menor*/
        margin-right: 2rem;
    }

    .card_title{
        font-size:3.25rem;
    }

    .card_description{
        font-size: 1.25rem;
        margin-right: 3rem;
    }

    .card_button{
        gap: 0.4rem;
    }

    .card_button .btn{
        width:auto;
    }

    .card_title,
    .card_description,
    .card_button{
        margin-bottom: 1rem; /*espaçamneto entre os textos*/
    }

    .projetos_card.card--reverse {
        flex-direction: row-reverse; 
        justify-content: space-between;
        margin-left: 3rem;
    }
    
    .about{
       font-size: 20px;
    }
    
    #sobre{
       font-size: px;
    }
    
    .contact{
       font-size: 20px;
    }
    
    #contato p{
       font-size: 24px;
    }

    .menu--social i{
       font-size:2rem ;
    }

    footer a{
       color: var(--text-color);
       padding:1rem;
    }

}