/* Arquivo css com estilos dos elementos de todas as páginas */

* {
 box-sizing: border-box;
 font-family: Arial, sans-serif;
}

html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 background: #f7f7f7;
 padding: 10px 80px;
 color: black;
}

h1, h2, h3, p {
  font-family: Arial, Helvetica, sans-serif;
  margin: 20px;
}

h2 {
  font-size: 2rem;
  font-weight: bold;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

form div {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #33f;
  margin: 1rem 2rem; /* 1rem para margem superior e inferior */
  padding: 2rem;
}

label {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-family: sans-serif;
  font-weight: bold;
  color: #66f;
}

input {
  padding: 1rem;
}

[type="text"], [type="email"], textarea, label {
  display:  block; /* essa propridade faz a quebra de linha  */
  width: 100%;
}

/* Style the header */
header {
 background-color: #f7f7f7;
 padding: 5px;
 text-align: center;
 font-size: 35px;
 color: black;
}

/* Create two columns/boxes that floats next to each other */
nav {
 float: left;
 width: 20%; 
 background: #f7f7f7;
 padding: 20px;
}

a:visited {
  color: purple;
}

a:hover {
  color: black;
  /*color: #009;*/
  background:  #eee;
  text-decoration: unset;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  border-bottom-left-radius: .8rem;
}

/* Style the list inside the menu */
/*nav ul {
 list-style-type: none;
 padding: 0;
}*/

article {
 float: center;
 width: 100%;
 text-align: center;
 background-color: lightgray;
 padding-bottom: 2.5px;
}

.sobre, .competencias, .experiencia, .formacao, .cursos, .redes {
 font-family: sans-serif;
 text-align: justify;
 border-top-left-radius: .8rem;
 border-top-right-radius: .8rem;
 border-bottom-right-radius: .8rem;
 border-bottom-left-radius: .8rem;
 padding: 10px;
 margin: 20px;
 background-color: white;
 color: #454545;
}

.competencia1, .competencia2, .competencia3, .competencia4, .competencia5, .competencia6, .competencia7, .experiencia1, .experiencia2, .experiencia3, .experiencia4, .formacao1, .formacao2, .cursos1, .cursos2 , .redes1 {
  font-family: sans-serif;
  text-align: justify;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  border-bottom-left-radius: .8rem;
  padding: 10px;
  margin: 20px;
  background-color: #f7f7f7;
  color: #454545;
}

.sobre .sobreTitulo, .competencias .competenciasTitulo, .experiencia .experienciaTitulo, .formacao .formacaoTitulo, .cursos .cursosTitulo, .redes .redesTitulo {
  font-size: 1.5rem;
  font-weight: bold !important;
  color: black;
}

.LinkGitHub {
  padding: 05px;
  background-color: coral;
  border: 2px solid black;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  border-bottom-left-radius: .8rem;
}

.LinkPrograma {
  padding: 05px;
  background-color: skyblue;
  border: 2px solid black;
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  border-bottom-left-radius: .8rem;
}

/* Clear floats after the columns */
section::after {
 content: "";
 display: table;
 clear: both;
}

.photo{
  width: 100%;
  height: 30vw;
  position: relative;
}

.perfil {
  height: 50%;
  position: relative;
  border-radius: 50%;
  margin-top: -100px;
  /*padding-left: 10px;*/
  border: 5px solid lightgray;
}

/* Style the footer */
footer {
 background-color: black;
 padding: 5px;
 text-align: center;
 color: white;
 margin-top: 10px;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 768px) {
  body, section, nav, article {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  h1, h2, h3 {
    margin: 10px;
  }

  p {
    padding: 0.5px;
  }

  .titulo, .sobre .sobreTitulo, .competencias .competenciasTitulo, .experiencia .experienciaTitulo, .formacao .formacaoTitulo, .cursos .cursosTitulo, .redes .redesTitulo {
    font-size: 1rem;
    margin: 0.5px;
    padding: 0.5px;
  }

  .competencia1, .competencia2, .competencia3, .competencia4, .competencia5, .competencia6, .competencia7, .experiencia1, .experiencia2, .experiencia3, .experiencia4, .formacao1, .formacao2, .cursos1, .cursos2 , .redes1 {
    font-size: 1rem;
    margin: 01px;
    padding: 05px;
    text-align: left;
  }

  .LinkGitHub {
    font-size: 0.5rem;
  }

  .LinkPrograma {
    font-size: 0.5rem;
  }

}

/*
  top / superior (cima)
  bottom / inferior (baixo)
  left (esquerda)
  right (direita)
*/

/*form div {
  position: static; /* as 'div' já vem por default */
  position: relative; /* passa a ser referência para as demais */
  margin-top: -10px;
}*/