/*  Google Fonts */  /* Atalho para Comentar Shift + ALT + A  */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap");



/* Variaveis das Cores */
/* TEMA DARK */
:root, :root[data-theme='dark'] {
    --primary-color: #f0f0f0;  /*cor principal Textos*/
    --primary-bg-color: #171511;  /*cor principal Fundo*/ 
    /* bg = background == cor do Fundo */
    --secondary-bg-color: #28292E;
    --primary-border-color:#28292E;

    --secondary-border-color: #aaabaf;
    --title-color: #f0f0f0;
    --link-hover: #f0f0f0;;
    --link-color:  #8f8f8f;
    --icon-color: #c7c8c9;
}
/* TEMA LIGHT */
:root[data-theme='light'] {
    --primary-color: #000; /* cor principal textos */

    --primary-bg-color: #f0f2f5;
    --secondary-bg-color: #28292E;

    --primary-border-color:#28292E;
    --secondary-border-color: #56575A;

    --title-color: #0b0b0f ;
    --link-hover: #f0f0f0;;
    --link-color:  #8f8f8f;
    --icon-color: #56575a;
 
}
/* Reset CSS */
*{
    margin: 0; /* margem */
    padding: 0px; /* preenchimento */
    box-sizing: border-box;
    vertical-align: baseline;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-border-color);
    
   } 

body {
    background: var(--primary-bg-color); /*cor fundo*/
    color: var(--primary-color);  /*cor geral dos textos*/ 
    font-family: 'Playwrite','Poppins';
}
a {
    text-decoration: none;
    color: var(--link-color);
}
a:hover{
    color: var(--link-hover);
}
    i{
        color: var(--icon-color);
    }
.header{
        display: flex;
        flex-flow: row wrap;
        /*Coloca o conteúdo em linha e permite a quebra de linha. */
        justify-content: space-between;
        /* Os itens dentro do container flexível serão
        distribuídos de maneira uniforme ao longo de eixo
        principal,com espaços iguais entre eles. */
        align-items: center;
        width: 100%;
        padding: 0.5rem 1rem;
        z-index: 2;
        background: var(--primary-bg-color);
        /*sobreposição*/
}
    
    .header-logo .logo2{
        width: 15rem;
        height: 2.25rem;
        margin-left: 20px;
        position: relative;
        bottom: 10px;
    }
    .header-logo .logo3{
        width: 5.25rem;
        height: 4.25rem;
    }


 html[data-theme='light'] .logo2{
    filter: invert(1);
} 
html[data-theme='light'] .logo3{
    filter: invert(1);
}
    

    #toggleTheme{
        font-size: 1.5rem;
        color: var(--icon-color);
        cursor: pointer;
        transition: ease-in-out .4s;
        float: right;
        position: relative;
    }
    .menu{
        display: flex;
        /* Torna o Elemento um Flex container automaticamente
         transformando todos os flhos diretos em Flex Itens
         */
         align-items: center;
         background-color: var(--primary-bg-color);
         gap: 0.1rem;
    }
    .menu-link{
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .menu-mobile{ /*UL*/
        width: 100%;
        position: fixed;
        bottom: 0;
        justify-content: space-between;
        border-top: 1px  solid var(--primary-border-color);
    }
    .menu-mobile .menu-link{
        flex-direction: column;
        justify-content: center;
        padding: 0.5rem 1rem ;
    }
    .menu-link.active .menu-icon,
    .menu-link.active .menu-text,
    .menu-link:hover .menu-icon,
    .menu-link:hover .menu-text{
        color: var(--link-hover);
    }

    .menu-icon, .menu-text{
        color: var(--link-color);
        font-weight: 600;
    }
    
    .menu-icon{
        font-size: 1.5rem;
    }

    .menu-text{
        font-size: .75rem;
        text-transform: uppercase;
    }
    .header-nav{
        display: none;
    }
    .menu-principal{
        gap: 1rem;
    }
    /* ==== ------------------- ===== */


    .menu-social{
        gap: 1rem;
    }
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.62rem;
        width: 100%;
        background: transparent;
        border-radius: 3rem;
        color: var(--secondary-border-color);
        border: none;
        cursor: pointer;
        padding: 0.5rem 1.5rem;
        transition: ease-in-out .3s;
    }
    .btn-primary{
        border: 1px solid var(--secondary-border-color);
    }
    .btn:hover{
        transform: scale(1.07);
        transition: ease-in-out .3s;
    }
    .btn span, .btn i{
        font-size: 1.25rem;
        text-transform: uppercase;
    }
    .btn-primary span{
        color: var(--primary-color);
    }

    #home{
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .main-content{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .video iframe{
        width: 100%;
        aspect-ratio: 16/9;
    }
 #home, .projeto, .sobre, .contato{
    padding: 5 rem 5rem;
 }
 .projetos{
    display: flex;
    flex-direction: column;
    gap: 2rem;
 }
 .projeto-container{
    display: flex;
    flex-direction: column;
    gap: 4rem;
 }
.projeto-card{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}




 .card-cover{
    width: 100%;
   border-radius: 7rem;
    object-fit: cover;
    object-position: center;
 }
 .card-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
 }
 .card-title{
    font-size: 2rem;
    color: var(--title-color);
    font-weight: 400;
    font-family: 'Bodoni';
 }
 .card-description{
color: var(--primary-color);
/*font-size: ;*/
text-align: justify;
 }
 .card-lista{
margin-left: 1.25rem;
 }
 .card-button, .card-description{
    display: flex;
    flex-flow: row wrap;

 }
 .card-button .btn{
    padding: .65rem 1.25rem;
 }
 .card-button span{
    font-size: 1rem;
 }
 /* === Sobre Mim === */
 .sobre{
    display: flex;
    flex-direction: column;
    gap: 2rem;
 }
 .sobre-content1, .sobre-content2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
 }

 .sobre-perfil{ /* imagem */
    width: 100%;
    border-radius: 50rem;
    border: 8px solid var(--link-color);
 }
 .sobre-descricao{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: justify;
    gap: 1rem;
 }
 .sobre-icones{
    display: flex;
    flex-direction: center;
    gap: 1.5rem;
 }
 .sobre-icones i {
     font-size: 2.5rem;
 }
 .sobre-content2  .col1, .sobre-content2 .col2{
    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 1rem;
 }
 


 .sobre-content2 .col1 .row1, .sobre-content2 .col1 .row2{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
 }
 
 /* --- Cursos --- */
 .accordion-header{
    width: 100%;
    display: flex;
    padding: 0.75rem 1rem;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 2px solid var(--primary-border-color);
    text-align: left;
    cursor: pointer;
    transition: ease-in-out .3s;
 }
 .accordion-header span{
    color: var(--title-color);
 }
.accordion-header.start{
    border-radius: 1rem  1rem  0rem 0rem;
}

.accordion-header.end, .accordion-item.active .accordion-body.end{
    border-radius: 0rem  0rem  1rem 1rem;
}
.accordion-item.active .accordion-item.end{
    border-radius: 0;
}


.accordion-body{
    display: none; 
    padding: 1.25rem;
    flex-direction: column;
    text-align: justify;
    gap: 1rem;
    border: 1px solid var(--primary-border-color);
}
.accordion-item.active .accordion-header{
    background: var(--secondary-bg-color);
}
.accordion-item.active .accordion-body{
    display: flex;
}


/*Rotacionar icone */
.accordion-item.active .bi-caret-down-fill{
     transform: rotate(180deg);
}
/*Contato*/
.contato{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    border-top: 1px solid var(--primary-border-color);
    border-bottom: var(--secondary-border-color);
}
.contato p{
    text-align: center;
}
.contato .btn{
    width: auto;
}
.contato .email{
    text-transform: uppercase;
}
/* Roda Pé = Footer*/
footer{
    margin-bottom: 5rem;
}
footer p{
    font-size: 1rem;
    text-align: center;
    padding: 1rem;
}

 /* =========== ------------------- ============== */
    
 /* CSS Responsivo */
@media (min-width: 768px)  {
    .header {
        position: fixed;
        border-bottom: 3px solid var(--primary-border-color);
        padding: 1rem 6rem;
    }
    .nav-mobile {
        display: none;
    }
    .header-nav {
        display: flex;
    }
    .header-nav, 
    .header-toggle {
        min-width: 30%;
    }
    h1 {
        font-size: 5rem;
    }
    h2 {
        font-size: 3rem;
    }
    #home, .projetos, .sobre, .contato {
        padding: 8rem 5rem 4rem 5rem;
    }
    .main-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .contato {
        padding: 6rem;
    }
    .contato p {
        width: 80%;
    }
    footer {
        margin: 0;
    }
}  


/* -------- fim resolução 768 */

@media (min-width: 992px) {
    .projeto-card {
        flex-direction: row;
        margin-bottom: 50px;
    }
    .card-reverse {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .card-cover {
        width: 55%;
    }
    .sobre {
        gap: 5rem;
    }
    .sobre-content1, 
    .sobre-content2 {
        display: grid;
        grid-template-columns: 34% 60%;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4rem;
    }
    .sobre-descricao h2 {
        text-align: left;
    }
    .descricao-button {
        justify-content: flex-start;
    }
}

@media (min-width: 1200px) {
    h2 {
        font-size: 4rem;
    }
    h3 {
        font-size: 2.5rem;
    }
    #home {
        padding: 10rem 6rem 2rem;
    }
    .main-content .btn {
        width: auto;
    }
    p, span, li {
        font-size: 1.15rem;
    }
    .card-button .btn,
    .descricao-button .btn {
        width: auto;
    }
}

@media (min-width: 1400px) {
    h1 {
        font-size: 6.25rem;
    }
    h2 {
        font-size: 4.5rem;
    }
    h3 {
        font-size: 3.25rem;
    }
    .header {
        padding: 1rem 15rem 1rem;
    }
    .projetos, .sobre {
        padding: 10rem 5rem 4rem;
    }
}