/* IMPORTACOES */
@import url("https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* VARIAVEIS */
:root {
  --base-dark: black;
  --base-light: #ffd1fb;
  --base-lesslight: rgb(241, 177, 215);
  --hover-color: #ff0082;
  --font-tittle: "Playwrite DE Grund", cursive;
  --font-text: "Rubik", sans-serif;
}

/* GERAL */
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background-color: white;
  transition: 0.5s;
}

main {
  margin: 0 120px;
  padding-top: 3%;
}

/* LOGO */
.logo img {
  width: 24px;
}

.logo h1 {
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
}

/* NAVBAR */
.navbar {
  width: 60%;
}

.navbar ul {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
}

/* HERO */
.cta__texto h1 {
  font-family: var(--font-tittle);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--base-dark);
  letter-spacing: 2px;
}

.cta__texto p {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--base-dark);
  letter-spacing: 2px;
}

.linksContatos ul {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--base-dark);
  letter-spacing: 2px;
}

.linksContatos ul li a:hover {
  color: var(--hover-color);
}

.linksContatos img {
  width: 24px;
}
.heroImagem {
  width: 344px;
}

/* SOBRE MIM */
.sobre {
  width: 80%;
}

.sobre h1 {
  font-family: var(--font-tittle);
  font-size: 24px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: start;
}

.sobre p {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--base-dark);
  line-height: 1.3em;
  letter-spacing: 2px;
  text-align: start;
}

/* SKILLS E HOBBIES */
.skills__hobbies__section {
  width: 100%;
}

.skillHobbies {
  width: 100%;
}

.skillHobbies__titulo h1 {
  font-family: var(--font-tittle);
  font-size: 24px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
}

.skillHobbies__cards {
  width: 100%;
}

.skillHobbies__cards div {
  background-color: var(--base-light);
  /* border: solid 1px var(--base-dark); */
  border-radius: 8px;
  width: 152px;
  height: 152px;
  background-color: var(--base-light);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.skillHobbies__cards div h2 {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: center;
}

.icon__hard {
  width: 48px;
}

.icon__soft {
  width: 56px;
}

.icon__hobbies {
  width: 48px;
}

/* FORMACAO */
.formacaoAcademica {
  width: 100%;
}

.formacaoAcademica h1 {
  font-family: var(--font-tittle);
  font-size: 24px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
}

.formacaoAcademica__cards {
  width: 100%;
}

.formacaoAcademica__cards div h1 {
  font-family: var(--font-tittle);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: center;
}

.formacaoAcademica__cards div h2 {
  font-family: var(--font-tittle);
  font-size: 14px;
  font-weight: 500;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: center;
}

.formacaoAcademica__cards div {
  background-color: var(--base-light);
  /* border: solid 1px var(--base-dark); */
  border-radius: 8px;
  width: 288px;
  height: 240px;
  padding: 2%;
  line-height: 1.3em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

#icon__uninassau {
  width: 210px;
}

#icon__etepam {
  width: 120px;
}

#icon__alura {
  width: 200px;
}

/* PROJETO */
.projeto_exemplo {
  width: 100%;
}

.projeto_exemplo h1 {
  font-family: var(--font-tittle);
  font-size: 24px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: center;
}

.imageDoProjeto img{
  width: 696px;
  height: 280px;
  border: solid 2px var(--base-lesslight);
  border-radius: 24px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.projeto{
  width: 100%;
}

.descricaoDoProjeto {
  width: 50%;
}

.titulo__sobre h1 {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: start;
}

.titulo__sobre__reverse h1 {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: end;
}

.titulo__sobre p {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: start;
}

.titulo__sobre__reverse p {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  color: var(--base-dark);
  letter-spacing: 3px;
  text-align: start;
}

.botoes__links {
  width: 100%;
}

.botoes__links a {
  width: 128px;
  height: 40px;
  border-radius: 8px;
  border: solid 1px var(--base-dark);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: center;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.botoes__links a:hover {
  border: solid 1px var(--hover-color);
  color: var(--hover-color);
  background-color: var(--base-lesslight) ;
}

/*CONTATO*/
.imageSide {
  width: 480px;
  border-radius: 32px;
  border: solid 2px var(--base-light);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.contato {
  width: 100%;
}

.formulario {
  width: 50%;
  height: 504px;
}

.formulario h1 {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: start;
}

.formulario p {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: start;
}

.formBox label {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 700;
  color: var(--base-dark);
  letter-spacing: 2px;
  text-align: start;
}

.formBox input {
  width: 504px;
  height: 32px;
  border-radius: 8px;
  border: solid 2px var(--base-lesslight);
  background-color: white;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  
}

.formBox input:hover {
  border: solid 2px var(--hover-color);
  background-color: var(--base-light);
}

.textArea {
  width: 496px; 
  height: 104px; 
  border: 2px solid var(--base-lesslight);
  border-radius: 8px;
  font-family: var(--font-text);
  font-size: 16px; 
  line-height: 1.3em; 
  color:var(--base-dark);
  background-color: white;
  resize: vertical;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 
  outline: none; 
  padding: 1%;
}

.textArea:hover {
  border: solid 2px var(--hover-color);
  background-color: var(--base-light);
}

.botaoEnviar {
  width: 200px; 
  height: 48px; 
  border-radius: 8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 16px; 
  line-height: 1.3em; 
  color:var(--base-light);
  background-color: var(--base-dark);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.botaoEnviar:hover {  
  background-color: var(--hover-color);
  color: var(--base-dark);
}

/* RODAPÉ */
footer {
  width: 100%;
  background-color: var(--base-light);
}
footer h1 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px; 
  line-height: 1.3em; 
  color:rgb(63, 63, 63);
  text-align: center;
  padding: 2%;
}

footer div .icons {
  width: 24px;
  margin-right: 8px;
}

footer div .icons:hover {
  filter: invert(17%) sepia(91%) saturate(7464%) hue-rotate(320deg)
  brightness(96%) contrast(110%);
}

footer a:hover{
  color: var(--hover-color);
}

/* Separadores */
hr {
  border-top: 1px solid rgb(230, 205, 222);
}

.hrteste {
  border-top: 1px solid rgb(230, 205, 222);
  width: 100%;
}

/* Sobre Créditos */
.sobreCreditos {
  width: 100%;
}
.sobreCreditos h1 {
  font-family: var(--font-tittle);
  font-weight: 600;
  font-size: 24px; 
  line-height: 1.5em; 
  color: var(--base-dark);
  padding-top: 2%;
}

.sobreCreditos p {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px; 
  line-height: 1.5em; 
  color: var(--base-dark);
  letter-spacing: 2px;
  padding: 0;
}

.linkIcone:hover {
  color: var(--hover-color);
}

.botaoVoltar {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 16px; 
  background-color: var(--base-dark);
padding: 16px 24px;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
}

.botaoVoltar:hover {
  background-color: var(--hover-color);
}

.botaoEnviar a:hover {
  color: white !important;
}

/* .imagemteste {
  filter: invert(100%);
}

.imagemteste:hover {
  filter: invert(17%) sepia(91%) saturate(7464%) hue-rotate(320deg)
    brightness(96%) contrast(110%);
} */