@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

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

:root{
                  /* ===== Cores ===== */

        --cor-skills:  rgb(250, 239, 224);
        --cor-de-fundo:hsla(0, 0%, 100%, 0.776);
        --sobra-descri: black;
        --nav-link-color:black;
        --nav-item-color: white;
        --nav-menu-color:hsl(228, 39%, 59%);
        --titulo-color: white;
        --primary-color: hsl(228, 66%, 62%);
        --cor-sombra: hsl(38, 15%, 58%, 1);
        --cor-icon: black;
        --cor-container:white;
        --text-color:black;
        --border-color:  hsl(228, 66%, 45%, .1);
        --tech-color:white;

        /* ===== Fontes =====*/

        --body-font: 'Space Grotesk', sans-serif;
        --header-height: 3.5rem;       
        --biggest-font-size: 2.375rem; 
        --normal-font-size: .938rem;
        --smaller-font-size: .75rem;     
}
body.dark-theme{
        

         --cor-de-fundo: hsl(228, 12%, 8%);
         --sobra-descri: white;
         --nav-link-color:hsl(228, 39%, 59%);
         --nav-menu-color:hsl(228, 12%, 8%);
         --titulo-color: black;
         --cor-container: #191b1d;
         --nav-item-color: white;
         --cor-icon:hsl(228, 39%, 59%);
         --text-color: white;
         --color-header:hsl(228deg 8% 70%);
         --tech-color:white;
         --border-color:  hsla(228, 21%, 63%, 0.107);
}

@media screen and (min-width: 1024px) {
    :root {
      --biggest-font-size: 5rem;
      --normal-font-size: 1rem;
      --smaller-font-size: .813rem;
    }
}
html{
    overflow-x: hidden;
}
body{
    
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
    color: var(--cor-de-texto);
    background-color: var(--cor-de-fundo);
}
.bxs-moon{
    color: var(--cor-icon);
}

ul{
    list-style: none;
}
  
a{
    text-decoration: none;
}

.header{
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    z-index: 100;
    
}
.scroll-header{
    background-color: white;
}
.nav{
    width: 90%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.nav-subtitulo{
    color: var(--primary-color);
}
.nav-logo{
  
    color: var(--primary-color);
    display: inline-flex;
}
.nav-logo{
    font-weight: 700;
}
  
.nav-toggle{
    color: var(--primary-color);
    font-size: 1.25rem;
    cursor: pointer;
    
}

@media screen and (max-width: 851px) {
    .nav-menu{
        position: fixed;
        left: 0;
        top: -100%;
        width: 100%;
        padding: 5rem 0 4rem;
        border-radius: 0 0 1.5rem 1.5rem;
        background-color: var(--nav-menu-color);
        transition: .4s;
    }
}

.nav-lista{
    text-align: center; 
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 2rem;
}
.nav-link{
    color: var(--nav-link-color); 
}
.nav-item{
    width: 70px;
    margin: auto;
    padding: 3px;
    border-radius: .25rem;
}
.nav-item:hover{
    transition: 1.2s;
    background-color: white;
}
.nav-close{
    color: var(--cor-icon);
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    cursor: pointer;
}
.show-menu{
    top: 0;
}
.home-conteudo{
    margin-top: 6rem;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.home-section{
    padding: 6rem 0 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-descricao{
    
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: justify;
    padding: 15px;
    max-width: 800px;
    border-radius: 6px;
    box-shadow: 1px 4px 1px  var(--sobra-descri);
    background-color: var(--primary-color);
}
.home-img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 145px;
    margin-right: 1.25rem;
    border-radius: 50%;
    box-shadow: 0 2px 11px black;
}
.img{
    width: 150px;
    height: 150px; 
     
}
.titulo{
    
    color: var(--titulo-color);
    font-size: 2rem;  
    padding: 6px;
    margin-top: 10rem;
    margin-bottom: 5rem;
    border-radius: .25rem;
    box-shadow: 1px 4px 1px var(--sobra-descri);
    background-color: var(--primary-color);
}
.skills-section{
    margin-top: 2%;
    margin-bottom: 4%;
    display: flex;
    max-width: 100vw;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    
}
.skills-descricao{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px;
    border-radius: 5px;
}  
.skill{
    
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    line-height: 1.2em;
    width: 310px;
    height: 220px;
    margin: 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--border-color);;
    color: var(--text-color);
    font-size: var(--normal-font-size);
    background-color: var(--cor-container)
}
.skill:hover{
    transition: 1.5s;
    background-color: #d0d4dd1b;
}
.icon-tech{
    margin-top: 10px;
    font-size: 50px;
}
.bxl-html5,
.bxl-git{
    color: #ee6225;
}
.bxl-css3{
    color: #1b73ba;
}
.bxl-javascript{
    
    color: #f7df1e;
}
.bxl-nodejs{
    color: #90c53f;
}

.bxl-java{
    color:#0474be;
}
.skill > p{
    margin: 5px;
}
.section-project{
    margin-top: 5%;
    margin-bottom: 10%;
    display: flex;
    flex-wrap: wrap;
    max-width: 100vw;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    
}
.caixa-project{
    
    height: 360px; 
    width: 300px;
    border-radius: 16px;
    margin: 1em;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: var(--cor-container);
    box-shadow: 0 12px 16px var(--border-color);
    
}
.caixa-project:hover{
    transition: .3s;
    
}
.div-img{
    overflow: hidden;
    height: 145px;
    width: 300px;
    
}
.div-img > img{
    width: 100%;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.div-img > img:hover{
    
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.bklnm{
    overflow: hidden;
    height: 150px;
    width: 300px;

}
.lmkda{
    position: absolute;
    right: 0px;
    top: 16px;
    padding: 0px 16px;
    height: auto;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 90;
}

.tech{
    background-color: rgb(107, 102, 96);
    padding: 5px 15px;
    margin-bottom: 5px;
    border-radius: 25px;
    text-align: center;
    font-weight: bold;
    color: var(--tech-color);
    -webkit-box-align: center;
    align-items: center;
    font-size: 13px;
}

.blsder{
    position: absolute;
    top: 16px;
    padding: 0px 10px;
    height: auto;
    display: flex;
    text-align: center;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 90;
}

.cvdrt{
    color: var(--tech-color);
    background-color:var(--primary-color);
    padding: 6px 16px;
    font-size: 11px;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}
.dradl{
    color: var(--text-color);
    margin-top: 10px;
    text-align: center;
    width: 100%;
    padding: 0px 16px;
}
.dradl p{
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.4em;
    text-indent: 5px;
    margin-top: 10px;
}
.dradl > p > .cxsd{
    color: #f4cf0a;
}
.drwap{
    text-decoration: none;
    cursor: pointer;
}
button{
    appearance: none;
    border: none;
}
.bto-detalhes{
    width: 80%;
    height: 46px;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--tech-color);
    font-weight: bold;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease 0s;
}
.bto-detalhes:hover{
    width: 85%;
    transition: 0.3s;
}
.nbvki{
    width: 100vw; 
    height: auto;
    padding: 30px 100px;
    background-color: var(--cor-container);
    display: flex;
    -webkit-box-pack: justify;
    align-items: center;
    justify-content: space-between;
}
.fsdr h3{
    color: var(--primary-color);
}
.fsdr i{
    color:var(--primary-color) ;
    font-size: 24px;
}
.bxl{
    margin-right: 5px;
}
.bxl:hover{
    color: var(--text-color);
    transition: 0.3s;
}
.nklos{
    font-size: 10px;
    font-weight: bold;
    color: var(--primary-color)
}
.paragrafo-footer{
    font-size: 13px;
    color: var(--primary-color)
}

.scrollup{
    position: fixed;
    right: 1rem;
    bottom: -30%;
    background-color: #ffffff;
    box-shadow: 0 8px 12px hsl(228, 66%, 45%, .1);
    display: inline-flex;
    padding: .35rem;
    border-radius: .25rem;
    color: #6e6eda;
    font-size: 1.25rem;
    z-index: 10;
    transition: .3s;
}
.scrollup:hover{
    transform: translateY(-.25rem);
    color: #8383e5e2;
}
.show-scroll{
    bottom: 8rem;
}
@media screen and (min-width: 851px){
  
    .nav-toggle,
    .nav-close{
      display: none;
    }
    .nav-lista{
      flex-direction: row;
      column-gap: 3.5rem;
    }
}
@media screen and (max-width: 767px){
    
    .home-section,
    .skills-section{
        width: 100%;
    }
    .home-img{
        margin-right: 0;
        margin-bottom: 5px;
    }
    .home-descricao{
        
        flex-direction: column;
        width: 85%;
        height: auto;
        margin: auto;
    }
    .skill{
        height: auto;
        width: 95%;

    }
    .nbvki{
        height: auto;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
    .fsdr, h3{
        
        margin-bottom: 5px;
    }
}
@media screen and (max-width: 321px){
    .caixa-project{
        width: 90%;
    }
}