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

}

:root {
    --color-padrao: #fff;
    --bg-url: url(../img/bg-mobile.jpg);
    --stroke-color: rgba(255, 255, 255, 0.50);
    --surface-color: rgba(255, 255, 255, 0.1);
    --surface-color-hover: rgba(255, 255, 255, 0.5);
    --highlight-color: rgba(255, 255, 255, 0.2);
    --switch-bg-url: url(../img/moon-stars.svg);
    --color-switch: #ffffff;

    --surface-color2: #1b1a1a;
    --sombra-color: rgba(0, 0, 0, 0.5);
    --input-color: #ccc;
    --cor-principal: #151515;
    --cor-segundaria: #181818;
    --cor-terciario: #262626;
    --cor-projeto:#262626;
    --destaque: #787878;
    --janela: #2d2d2d;

    --roxo: #ad7ed6;
    --roxo-secundario: #c7a1e9;
    --gradient:  linear-gradient(315deg, #d71fef, #0083f5);
  }
  
  .light {
    --color-padrao: black;
    --bg-url: url(../img/bg-mobile-light.jpg);
    --stroke-color: rgba(0, 0, 0, 0.50);
    --surface-color: rgba(0, 0, 0, 0.05);
    --surface-color-hover: rgba(0, 0, 0, 0.02);
    --highlight-color: rgba(0, 0, 0, 0.10);
    --switch-bg-url: url(../img/sun.svg);
    --color-switch: #ffffff;

    --surface-color2: rgba(35, 47, 53, 0.09);
    --sombra-color: rgba(0, 0, 0, 0.1);
    --input-color: #ccc;
    --cor-principal: #fafaff;
    --cor-segundaria: #f5f5f7;
    --cor-terciario: #e1e1e6;
    --cor-projeto:#201f1f;
    --destaque: #9c9999;
    --janela: #fafafa;
    
    --roxo: #ad7ed6;
    --roxo-secundario: #c7a1e9;
    --gradient:  linear-gradient(315deg, #d71fef, #0083f5);
  }


html{
    scroll-behavior: smooth;
  }

  ::-webkit-scrollbar {
    width: 12px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  

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

li{
    list-style: none;
}

 

body{
    font-family: 'DM Sans', Geneva, Tahoma, sans-serif;
    color: var(--color-padrao);
    background-color: var(--cor-principal);
    
   
}

.container{
    margin: 0 auto;
    width: 75vw;
   
    
    display: flex;
    align-items: center;
    justify-content: center;

}

header#cabecalho{
    background-color:  var(--cor-segundaria); 
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 3;
    box-shadow: 0px 5px 10px var(--sombra-color); 
}

#logo{
    color: var(--roxo);
    font-size: 2rem;
    font-weight: 700;
    transition: all 0.4s;

}

#logo:hover{
    color: var(--roxo-secundario);
}

.menu-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header#cabecalho #navbar{
    display: flex;
    align-items: center;
}

.navItem{
    margin: 0 30px;
    list-style: none;
}

.navItem a{
    color: var(--destaque);
    transition: all 0.4s;
    font-weight: 500;
}

.navItem a:hover{
    color: var(--color-padrao);
    
}

/* Switch */

#switch {
    position: relative;
    width: 64px;
  }
  
  #switch button.switch-button{
    width: 32px;
    height: 32px;
    background: var(--color-switch) var(--switch-bg-url) no-repeat center;
    border: 0px;
    border-radius: 50%;
  
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    cursor: pointer;
  
    transform: translateY(-50%) translateX(0px);
    transition: transform 0.3s ease;
   
  }


  
  #switch button.switch-button:hover {
    outline: 8px solid var(--highlight-color);
  }
  
  #switch span {
    display: block;
    width: 64px;
    height: 24px;
    background: var(--surface-color);
    border: 1px solid var(--stroke-color);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 9999px;
  }


/* Sessão INICIO */

#inicio{
    width: 100vw;
    height: 98vh;
    background-image: var(--bg-url);
    background-color: var(--surface-color2);
    background-repeat: no-repeat;
    background-size: cover;
}

#inicio .inicial-grid{
    width:100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(660px, 1fr));

    justify-items: center;
    align-content: center;   
}

.coluna1{
    width: 600px;
}

.coluna1 #apresentacao{
    font-size: 1.5rem;
}
.coluna1 #nome{
    font-size: 3rem;
    color: var(--roxo);
    
}
.coluna1 #profissional{
    font-size: 1.5rem;
}

.coluna1 #profissional span{
    font-size: 2rem;
    color: var(--destaque);

}

.paragrafo{
    margin: 2rem 0 2rem 0;
    font-size: 1.2rem;
}

#inicio .inicial-grid .coluna1 p.paragrafo, #habilidades p.paragrafo, #sobreMim p.paragrafo{
    text-align: justify;
}

.btn{
  padding: 16px 24px; 

  background: var(--surface-color);
  border: 1px solid var(--stroke-color); 
  border-radius: 8px; 

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); 

  text-decoration: none;
  font-size: 1rem;
  color: var(--color-padrao);
  font-weight: 500;

  transition: background 0.4s; 
  cursor: pointer;
}

.btn:hover{
    color: var(--cor-projeto);
    background: var(--surface-color-hover);
    border: 1.5px solid var(--color-padrao);
}


/* Minha IMG */

.caixa-img{
   
    position: relative;
    width: 450px;
    height: 450px;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
}

.caixa-img::before{
    content: '';
    position: absolute;
    background-image: var(--gradient);
    inset: -10px 140px;
    animation: animar 4s linear infinite;
}

/* Animação */
@keyframes animar{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}



.caixa-img::after{
    content: '';
    position: absolute;
    inset: 6px;
    background-color: var(--cor-terciario);
    border-radius: 50%;
    z-index: 1;

}

.minha-img{
    position: absolute;
    inset: 30px;
 
    z-index: 2;
    border-radius: 50%;
}

.minha-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border-radius: 50%;
}


/* Sessão SOBRE MIM */

#sobreMim{
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
   
}

.img img{
    width: 450px;
    height: 450px;
}

.coluna3{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

 .title{
    font-size: 2rem;
    color: var(--roxo);

}

#sobreMim .container{
    margin: 5rem auto;
}

.caixa-sobreMim{
    background: var(--surface-color);

    border-radius: 8px; 

    
    max-width: 60vw;
    min-width: 60vw;
    
    
    border-radius: 70px;
    padding: 4rem;
    box-shadow: 0px 5px 10px var(--sombra-color); 
    text-align: justify;
    
}

#sobreMim .paragrafo{
    min-width: 250px;
   
}

#sobreMim #sobreMim-icons{
    width: 100%;
    display: flex;
    
    gap: 30px;
}


#sobreMim #sobreMim-icons .fa-instagram, #sobreMim #sobreMim-icons .fa-github-alt{
   font-size: 30px;
}

#sobreMim #sobreMim-icons a:hover {
    outline: 5px solid var(--highlight-color);
    border-radius: 50%;
    background-color:  var(--highlight-color);

  }

#sobreMim #sobreMim-icons a{ 

    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--destaque);

    display: flex;
    justify-content: center;
    align-items: center;
  
}


/* Sessão HABILIDADES */

#habilidades{
    height: 90vh;
    background-color: var(--cor-segundaria);

    display: flex;
    justify-content: center;
    align-items: center;
    
}

#habilidades .coluna5{
    height: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
  
}


#tecnologias{
   width: 100%;
   height: 80vh;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));

    justify-items: center;
    align-content: center;
    
}



#tecnologias .coluna2, #tecnologias .coluna1{
   
    width: 660px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 20px;
}




#tecnologias .tec{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}



img.icon-tec{
    width: 100px;
    height: 100px;

    margin: 1.5rem;
    transition: transform 0.3s ease;
}


img.icon-tec:hover{
    transform: scale(1.2);
}


#tecnologias .tec .paragrafo{
    color: var(--destaque);
    margin-top: 0px;
    transition: all 0.4s;
}


#tecnologias .tec .paragrafo:hover{
    color: var(--color-padrao);
    
}






/* Sessão PROJETOS  */

#projetos{
   
    padding: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;

    
}


 .coluna4{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}


#projetos #meus-projetos{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    
    justify-items: center;
}



#projetos .projeto{
    width: 400px;
    height: 300px;
    background-color: var(--destaque);
    margin: 20px;
    box-shadow: 2px 2px 5px 0px var(--sombra-color);
   
}

#projetos .title{
    margin-bottom: 20px;
}

#projetos #pj1, #projetos #pj2, #projetos #pj3, #projetos #pj4, #projetos #pj5, #projetos #pj6{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;

    transition: transform 0.3s ease;
}

#projetos #pj1{
    background-image: url(../img/pjtC++.png);
}

#projetos #pj2{
    background-image: url(../img/cardapio.png);
}

#projetos #pj3{
    background-image: url(../img/orcamento.png);
}

#projetos #pj4{
    background-image: url(../img/quiz.png);
}

#projetos #pj5{
    background-image: url(../img/form.png);
}

#projetos #pj6{
    background-image: url(../img/notes.png);
}

#projetos #pj1:hover, #projetos #pj2:hover, #projetos #pj3:hover, #projetos #pj4:hover, #projetos #pj5:hover, #projetos #pj6:hover{
    transform: scale(1.1);
}


.btn-acesso{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.btn-acesso .btn{
   margin: 10px;
    
}

/* Dinamico */

.container-janela{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    z-index: 999; 

    display: flex;
    justify-content: center;
    align-items: center;
    

}

.janela{
    background-color: var(--janela);
    width: 70vw;
    min-width: 300px;
    height: 40vh;
    border-radius: 20px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 10px var(--sombra-color); 
    opacity: 0;
    transition: opacity 0.3s ease;
}

.janela.mostrar {
    opacity: 1; 
}

.closeButton{
    width: 45px;
    height: 50px;
    padding: 10px;
    font-size: 25px;
    background-color: var(--surface-color2);
    border: none;
    color: var(--color-padrao);
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
}

.paragrafo-janela{
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: justify;
    letter-spacing: 1.8;
   

}



/* Sessão CONTATO */
#contato{
   height: 70vh;
    width: 100%;
    background-color: var(--cor-segundaria);

    display: flex;
    justify-content: center;
    align-items: center;
}


#contato-form{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    justify-items: center;
    align-content: center;

}


#contato-form .form{
 
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}


#contato-form .form .entradas{
    width: 100%;

    display: flex;
    flex-direction: column;
    
    border-radius: 10px;
    margin-bottom: 15px;
}


#contato-form .form .entradas .contato-label{
    display: block;
    margin-bottom: 5px;
}


.input{
   min-width: 400px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--input-color);
}


.input:focus{
    outline: none; /* Remove a borda padrão de foco */
    
}


textarea{
    resize: none;
}


#contato-form .img-contato img{
    width: 550px;
    height: 550px;
} 






/* RODAPÉ */

footer#rodape{
    height: 30vh;

    padding: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

ul#rodape-items{
    display: flex;

}


ul#rodape-items li.item a{ 
    list-style: none;
    margin: 1rem;
    
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--destaque);

    display: flex;
    justify-content: center;
    align-items: center;
  
}


ul#rodape-items li a:hover {
    outline: 5px solid var(--highlight-color);
    border-radius: 50%;
    background-color:  var(--highlight-color);

  }


#copy{
    margin-top: 2rem;
}




/* Media queries */

@media (min-width: 756px) {
    * Dinamico */

.container-janela{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    z-index: 999; 

    display: flex;
    justify-content: center;
    align-items: center;

}

.janela{
    background-color: var(--janela);
    width: 500px;
}

.closeButton{
    width: 50px;
    height: 55px;

    font-size: 30px;
}

}

@media (min-width: 700px) {
    :root {
      --bg-url: url(../img//bg-desktop.jpg);
    }
  
    .light {
      --bg-url: url(../img/bg-desktop-light.jpg);
    }
  }

@media(max-width: 1126px){
    nav#navbar{
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 70px;
        bottom: 0;
        left: 0;
        background-color: var(--cor-segundaria);
    
        display: flex;
        justify-content: center;
    
        box-shadow: 0px -5px 15px var(--sombra-color);
       
    }#copy{
       
        margin-bottom: 5rem;
    }

   
}



@media(max-width: 646px){
    li a span.text-item{
        display: none;
    }
}

@media(min-width: 647px){
    li a i.fa-solid{
        display: none;
    }
}


@media(max-width: 1262px){
    #contato-form .img-contato img{
        width: 450px;
        height: 450px;
    } 
}

@media(max-width: 1172px){
    

    .coluna4{
        margin: 40px;
    }
}

@media (max-width: 1129px){

    #contato .title{
        margin-bottom: 3rem;
    }

}

@media (min-width: 1129px){
    #contato-form .form{
        margin-right: 7rem;
        
    }
}

@media (min-width: 1440px){
    #habilidades .title{
        margin-top: 6rem;
    }
}

@media (min-width: 874px) and (max-width: 1173px){
    #projetos .coluna4{
        width: 100%;

    }

    #projetos #meus-projetos{
        width: 900px;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
        
        justify-items: center;
        justify-content: center;
    }
   

    #projetos #meus-projetos .projeto{
        width: 350px;
        height: 340px;
    }


}

@media (min-width: 1129px) and (max-width: 1759px){
    #inicio .inicial-grid .coluna1 #apresentacao{
        font-size: 1.6rem;
    }

    #inicio .inicial-grid .coluna1 #nome{
        font-size: 2.5rem;
    }

    #inicio .inicial-grid .coluna1 #profissional{
        font-size: 1.6rem;
    }

    #inicio .inicial-grid .coluna1 #profissional span{
        font-size: 1.5rem;
    }

    #inicio .inicial-grid .coluna1 .paragrafo{
        font-size: 1.2rem;
    }

    .btn{
        padding: 14px 22px;
        font-size: 0.9rem; 
    }

    #inicio .inicial-grid .caixa-img{
   
        width: 380px;
        height: 380px;

        margin-top: 30px;
        
    }

    #inicio .inicial-grid{
        width: 1000px; 
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        
    }
    
    .coluna1{
       
        width: 400px;
    }

    /* Contato */


    #contato .coluna4{
        width: 400px;

    }
    #contato .coluna4  #contato-form{
        width: 1000px; 
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    }

    #contato-form .img-contato img{
        display: block;
    }     
    
 

}

@media (min-width: 704px) and (max-width: 1439px){
    #habilidades #tecnologias .icon-tec{
        width: 85px;
        height: 85px;

       
    }

    #habilidades{
        height: 100vh;
    }

    #habilidades .title{
        margin-bottom: 2rem;
    }

}

@media (min-width: 704px) and (max-width: 1129px){
    #inicio .inicial-grid .coluna1 #apresentacao{
        font-size: 1.6rem;
    }

    #inicio .inicial-grid .coluna1 #nome{
        font-size: 2.5rem;
    }

    #inicio .inicial-grid .coluna1 #profissional{
        font-size: 1.6rem;
    }

    #inicio .inicial-grid .coluna1 #profissional span{
        font-size: 1.5rem;
    }

    #inicio .inicial-grid .coluna1 .paragrafo{
        font-size: 1.2rem;
    }

    .btn{
        padding: 14px 22px;
        font-size: 0.9rem; 
    }

    #inicio .inicial-grid .caixa-img{
   
        width: 380px;
        height: 380px;

        margin-top: 30px;
        
    }

    #inicio .inicial-grid{
        width: 700px; 
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        
    }
    
    .coluna1{
        width: 400px;
        margin-top: 5rem;
    }

    

    

}

@media (max-width: 1129px){
    #contato-form .img-contato img{
        display: none;
    }  

}


@media(max-width: 704px){

    #inicio .inicial-grid .coluna1 #apresentacao{
        font-size: 1.3rem;
    }

    #inicio .inicial-grid .coluna1 #nome{
        font-size: 2.3rem;
    }

    #inicio .inicial-grid .coluna1 #profissional{
        font-size: 1.3rem;
    }

    #inicio .inicial-grid .coluna1 #profissional span{
        font-size: 1.5rem;
    }

    #inicio .inicial-grid .coluna1 p.paragrafo, #habilidades p.paragrafo, #sobreMim p.paragrafo{
        font-size: 1.1rem;
    }

    .btn{
        padding: 14px 22px;
        font-size: 0.9rem; 
    }

    #inicio .inicial-grid .caixa-img{
   
        width: 380px;
        height: 380px;

        margin-top: 30px;
        
    }
    
    #inicio .inicial-grid{
        width: 560px; 
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    
    .coluna1{
        width: 400px;
        margin-top: 5rem;
    }

    /* Habilidades */

    #habilidades #tecnologias{
        width: 400px;
        
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     
         justify-items: center;
         align-content: center;
         
     }

    #habilidades .coluna1, #habilidades .coluna2{
        width: 400px;
    }

    #habilidades #tecnologias .icon-tec{
        width: 70px;
        height: 70px;

       
    }

   


    /* Projetos */

    #projetos .coluna4{
        width: 440px;

    }

    #projetos #meus-projetos{
       width: 440px;
    }

    #projetos #meus-projetos .projeto{
        width: 350px;
        height: 340px;
    }

    
    /* Contato */

    #contato .coluna4{
        width: 400px;

    }
    #contato .coluna4  #contato-form{
        width: 440px;

    }

    #contato .coluna4  #contato-form .form .input{
    min-width: 340px;
        
    }

    .title{
        font-size: 1.7rem;
    }
   
    
}

@media(max-width: 470px){

    /* Cabeçalho */

    header#cabecalho{
        
        height: 70px;
    }


    #logo{
        font-size: 1.5rem;
    }

    /* Switch */


  
  #switch button {
    width: 26px;
    height: 26px;
  }

  
  #switch span {
    width: 54px;
    height: 17px;
  }

    /* Inicial */

    #inicio .inicial-grid .coluna1 #apresentacao{
        font-size: 1.1rem;
    }

    #inicio .inicial-grid .coluna1 #nome{
        font-size: 1.8rem;
    }

    #inicio .inicial-grid .coluna1 #profissional{
        font-size: 1.1rem;
    }

    #inicio .inicial-grid .coluna1 #profissional span{
        font-size: 1.3rem;
    }

    .title{
        font-size: 1.5rem;
    }

    #inicio .inicial-grid .coluna1 p.paragrafo, #habilidades p.paragrafo, #sobreMim p.paragrafo{
        font-size: 0.9rem;
        line-height: 1.7;
    }



    footer#rodape #copy{
        font-size: 0.8rem;
    }


    .btn{
        padding: 12px 20px;
        font-size: 0.8rem; 
    }

    #inicio .inicial-grid .caixa-img{
   
        width: 280px;
        height: 280px;   
        margin-bottom: 2rem;
        margin-top: 0px;
    }

    .caixa-img::before{
        inset: -10px 120px;
    }

    
    #inicio .inicial-grid{
        width: 350px; 
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    .coluna1{
        width: 350px;
        padding: 20px;
        
    }

  

    /* Habilidades */

    #habilidades #tecnologias .icon-tec{
        width: 50px;
        height: 50px;

       
    }

    /* Projetos */

    #projetos #meus-projetos .projeto{
        width: 270px;
        height: 240px;
    }

    /* Contato */

    #contato .coluna4{
        margin: 0px;
    }
    #contato .coluna4  #contato-form .form .input{
        min-width: 300px;
            
        }

       

}

@media(max-width: 953px){

    .caixa-sobreMim{
        
        max-width: 80vh;
        min-width: 300px;
        padding: 3rem;

    }

    #sobreMim #sobreMim-icons .fa-instagram, #sobreMim #sobreMim-icons .fa-github-alt{
        font-size: 25px;
     }
     
    
     
     #sobreMim #sobreMim-icons a{ 
     
         width: 50px;
         height: 50px;
       
       
     }
     
}





@media(max-width: 439px){

    #inicio .coluna1{ 
        margin-top: 0px;
    }
    

    #sobreMim #sobreMim-icons .fa-instagram, #sobreMim #sobreMim-icons .fa-github-alt{
        font-size: 20px;
     }

     #sobreMim #sobreMim-icons{
        justify-content: center;
     }
     
    
     
     #sobreMim #sobreMim-icons a{ 
     
         width: 40px;
         height: 40px;
       
     }

   


    #habilidades #tecnologias{
        width: 300px;
        
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     
         justify-items: center;
         align-content: center;
         
     }
    
    #habilidades .coluna1, #habilidades .coluna2{
        width: 300px;
    }

    
     #projetos .coluna4{
        width: 100%;

    }

    #projetos #meus-projetos{
        width: 340px;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        
        justify-items: center;
        justify-content: center;
    }
    
 


    /* Contato */

    #contato .coluna4{
        width: 300px;

    }
    #contato .coluna4  #contato-form{
        width: 340px;
      
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        
        justify-items: center;
        justify-content: center;

    }

    #contato .coluna4  #contato-form .form .input{
    min-width: 300px;
        
    }
   

  

   
  
}



@media (min-width: 471px) and (max-width: 1129px){
    #inicio .inicial-grid .caixa-img{
   
        width: 300px;
        height: 300px;   
       
    }
}

@media (min-width: 471px) and (max-width: 1439px){
    
    #habilidades .title{
        margin: 2rem;
        
    }

    #habilidades #tecnologias .icon-tec{
        width: 60px;
        height: 60px;

       
    }
}