@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

@font-face {
    font-family:pixeled;
    src: url(fontes/Pixeled.ttf);
}
@font-face {
    font-family: homevideo;
    src: url(fontes/HomeVideo-BLG6G.ttf);
}

html{
    scroll-behavior: smooth;
}


/*paleta de cores */

:root {
    --color1: #fff3e8;
    --color2: #fec1b6;
    --color3: #f3a6ba;
    --color4: #df678f ;
    --color5: #9391bc;
    --color6: #7abcc4;
}

/*estilo geral*/

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

.topo {
  background: var(--color2);
  padding: 10px;
}

/*estilo do corpo */

body {

    background-color:var(--color1) ;  
    padding-top: 0;
    
    /*fundo com bolinhas */
    background-image: radial-gradient(var(--color2) 1px, transparent 1px);
    background-size: 20px 20px;

    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-style: normal;
    
}

/*NAVEGADOR

estilizacao do retangulo */

nav{ 

    background-color: var(--color2); /*cor */
    position: sticky;   /*gruda na tela ao rola*/
    top: 10px;   /*gruda no topo*/
    border-radius: 50px;
    
    padding:10px;
    margin: 4%;
}

.navegacao {  

    width: 100%; 

    display: flex;  
    border-radius: 50px;  
    justify-content:space-evenly ;

    list-style: none; 
}
   
/*estilizacao dos links */

.navegacao a {

    color:var(--color4);
    font-weight: 700;
    align-items: center;  
    text-decoration: none;
    text-overflow: ellipsis;

    border-radius: 20px;
    padding: 6px 14px;
    display: flex;   
          
    
    white-space: nowrap
}

/*passar o mouse */

.navegacao a:hover {
    background-color: var(--color4);
    color: var(--color2);
    transition: 0.3s;
}

/*mudancas na largura de pagina */

.icon { display: none !important; }  

@media (max-width: 768px) {
  .nav-texto { display: none; }  
  .icon { display: inline !important; }     
}

/*HEADER 
 
titulo */

h1{
   
   color:var(--color5);  
   font-family:pixeled;
   text-align: center; 
   font-size: 150%; 
   
   margin:  1.5rem; 
}

/* logo-gif */

#logo{

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

#logo img {
    width: 45%;
}



/* subtitulos */

h2{
    color: var(--color5);  /* cor */
    font-family: homevideo;
    font-size: 200%; 
     
}

/* estilizacao do texto menor */

.small{

    color: var(--color6);
    font-style:italic;
    padding: 2px;
    font-weight: 400;
}

/* estilizacao do texto em strong */

b {color: var(--color6);}

/* CONTAINERS  */

.section1, .section2, .section3
{

    background-color:#ffffff;  
    border-radius: 50px;  
    overflow: hidden;
    scroll-margin-top: 120px; 
    
    min-height: 80vh;
    
    margin-bottom: 2rem;
    padding: 4%;
    margin:  4%;
}

/* container 1 */
.section1{

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: center;

}
@media (max-width: 768px) {
  .section1 {
    grid-template-columns: 1fr;
  }
}


/* container  2 e 3 */

.section2{
    
    display: grid;
    grid-template-columns: 1fr;
    gap: 90px;
    align-items: center;
    text-align: center;

}

/* container 4 */
.section3{

    display: grid;
    grid-template-rows: 30% 1fr 10%;
    gap: 5%;
    align-items: center;
    text-align: center;

}

/* elementos */

.texto { 
    padding: 4%;
    color: #7a75a1;
}

.sobre-imagem { width: 100%;}

/* cards da area formacao */

.cards-formacao {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    padding-top: 5%;

}

.card {

    width: 250px;

    border: #b3dee2 dotted 5px;
    border-radius: 20px;
    padding: 2rem;
   

    display: flex;
    flex-direction: column;
    flex: 0 0 250px; 

    text-align: center;
    gap: 50px;
}

.card .material-icons {

    font-size: 40px;
    color: var(--color6);
}

.card h3 {

    font-size: 16px;
    color: #b3dee2;
    font-weight: 800;
}

.card p {

    font-size: 14px;
    color: var(--color5);
    font-weight: 600;
}


/* PORTFOLIO */

#botao {

    background-color: transparent;
    border: solid var(--color5) 3px;
    border-radius: 10px;

    color: var(--color5);

    padding: 1%;
    max-width: 60vw;
    margin: 0 auto;
    
    cursor: pointer;
    display: block;
    text-align: center;
}

#botao:hover {
    background-color: var(--color5);
    color: white;
    transition: 0.2s;
}

#caixaEmail{

    display: flex;
    flex-direction: column;
    gap: 10px;
    
   
    background-color: var(--color6);

    padding: 6vw ;
    border-radius: 30px;
    margin: 0 auto;

}

#nome, #email, #mensagem{

    outline: none;
    border-radius: 20px;
    border: 0;
    
    padding: 10px 20px;
      
}

.enviar{

    padding:7px;
    border-radius: 20px;
    border: 0;

    background-color: #b3dee2;
    color: rgb(255, 255, 255);

    cursor: pointer;
}

/* mensagem de envio realizado  */

 #msg{

  position: fixed;    
  bottom: 20px;        
  right: 20px;         

  background:var(--color2);
  color: white;
  padding: 15px 20px;
  border-radius: 10px;

  opacity: 0;         
  transition: 0.3s;

}

/*footer*/

#rodape{
    background: var(--color6);
    padding: 5px;  
    color: #ffffff; 
    font-weight: 100;
    
}