/* 
  Variáveis para cores:
  --fundo-principal
  --texto
  --texto-inverso
  --destaque
  --destaque-inverso
  --fundo-card
*/
*{
  margin:0px;
  border:0px;
  box-sizing: border-box;
}
:root{
  --fundo-principal:white;
  --texto:black;
  --texto-inverso:azure;
  --destaque:rgb(47, 84, 1);
  --destaque-inverso:aquamarine;
  --fundo-card:rgb(245, 245, 245);
}
header{
  background-color: var(--destaque);
  color: var(--texto);
  padding: 10px;
  display:flex;
  justify-content: flex-end;
  align-items: center;
  position:sticky;
  top:0;
  z-index:1;
}
nav#menu ul{
  list-style: none;
  display:flex;
  gap:10px;

}nav#menu a{
  text-decoration: none;
  color:var(--texto-inverso);
  font-weight: 600px;
  padding: 12px 15px;
  border-radius:5px;
  transition: background-color 0.5 color 1s;

}
nav#menu a:hover{
  background-color: var(--destaque-inverso);
  color:var(--destaque)
}

body.escuro{--fundo-principal:rgb(7, 7, 7);
  --texto:rgb(253, 250, 250);
  --texto-inverso:rgb(56, 58, 58);
  --destaque:rgb(21, 36, 3);
  --destaque-inverso:rgb(72, 99, 90);
  --fundo-card:rgb(48, 29, 29);
  


}
body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.5em;
  background-color:var(--fundo-principal);
  color:gray;
}
main{
  display:grid;
  grid-template-columns: auto 90vw auto;
  gap:20px;
  margin-top: 20px;

}
section#ficha{
  background-color:var(--fundo-card);
  padding: 20px;
  border-radius: 8px;
  grid-column:2;

}
section#ficha img.foto{
width:200px ;
aspect-ratio:1/1 ;
object-fit: cover;
overflow: hidden;
border-radius:50% ;
border:5px solid var(--fundo-card);
outline:5px solid var(--destaque) ;
display:block;
margin:auto;
margin-bottom:15px;
}
section#ficha h1{
  color: var(--destaque);
  margin: 15px 0px;
  font-size: 1.5em;
  text-align: center;
}
div#social{
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:1.6em;
  gap:1em;
  margin-top: 15px;

}
div#social a{
  color:var(--destaque);
transition: color 0.5;

}
div#social a:hover{
  color:var(--destaque-inverso)
}
section#detalhes{
  grid-column:2;

}
article{
  background-color: var(--fundo-card);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
}
article h2  {
  color: var(--destaque);
  margin-bottom:10px;
} 
#skill-conteiner{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
#skill-conteiner .info{
  display:flex;
  justify-content:space-between;
  align-items:center;

}
#skill-conteiner .nome{
  font-weight: bold;
  color: var(--texto);
}
#skill-conteiner .porcent{
  font-weight:bold;
  color:var(--destaque)
}
#skill-conteiner .barra{
  width: 100%;
  height: 8px;
  background-color: var(--fundo-principal);
  border-radius:4px;
}
#skill-conteiner .progresso{
  height:100%;
  background-color: var(--destaque-inverso);
  border-radius: 4px;
}

#formacao-conteiner{
  display:flex;
  flex-direction:column-reverse;
  gap:20px;
}
#formacao-conteiner .curso{
background-color: var(--fundo-principal);
border-radius: 8px;
border-left: 5px solid var(--destaque-inverso);
padding-left:15px;
transition: border-width 0.5s, border-color 0.5s;
}
#formacao-conteiner .curso:hover{
  border-left-width:15px;
  border-color:var(--destaque);
  cursor: pointer;
}
#projeto-conteiner{
  display:flex;
  flex-direction: column-reverse;
  gap:20px;
}
#projeto-conteiner .projeto{
  display:flex;
  flex-direction:column;
  gap:15px;
  background-color: var(--fundo-principal);
  padding:10px;
  border-radius:8px;
  border-left:5px solid var(--destaque-inverso);
  transition:border-color 0.5s, border-width 0.5s;

}
#projeto-conteiner .projeto:hover{
  border-color: var(--destaque);
  border-left-width:15px;
  cursor:pointer;
}
#projeto-conteiner .foto{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  overflow:hidden;
  border-radius: 8px;

}@media  screen and (min-width: 768px){
  #skill-conteiner{
    grid-template-rows: 1fr  ;
    grid-template-columns: 1fr ;
  }

#projeto-conteiner .projeto{
  flex-direction: row-reverse;
  justify-content:space-between;
}
}
#projeto-conteiner .projeto-info{
  max-width:88%;
}
#projeto-conteiner .foto{
  aspect-ratio: 1/1;
  max-width: 20%;
  max-height:200px;
}
footer{
  background-color: var(--destaque);
  color:var(--texto-inverso);
  text-align:center;
  padding:15px;
}
footer a{
  color: var(--texto-inverso);
  text-decoration: none;
  font-weight: bold;

}
footer a:hover{
  color:var(--destaque-inverso)
}