body {
  font-family: "Century Gothic";
  padding: 0;
  margin: 0;
  height: 100vh;
  width: auto;
}
/*----------------------------- setup cor páginas */
.rosa {
  height: 100vh;
  width: 100vw;
  background-color: #ff5555ff;
}

.branco {
  height: 100vh;
  	width: 100vw;
  background-color: #FFFFFF;
}

/*---- 1º página - apresentacao */

#apresentacao {
	display: grid;
	margin: 0;
}

.hello {
  color:#FFFFFF;
  font-size:100px;
  margin-left: 3rem;
}

.welcome {
  color:#FFFFFF;
  font-size: 48px;
  margin-left: 3rem;
  margin-right: 3rem;
}

.oppening {
  font-size:32px;
  padding-top: 40px;
  line-height: 2;
  color:#FFFFFF;
  margin-left: 3rem;
  margin-right: 3rem;
}

.oppening > a {
  color: #FFFFFF;
  text-decoration: none;
  word-spacing: 10px;
  padding: 7px;
}

.oppening > a:hover {
  color: #ff5555ff;
  background-color: #FFFFFF;
  border-radius: 15px;
  font-weight: 800;
}

/*---- 2º página - sobre */

#sobre {
	color:#ff5555ff;
	display: grid;
	grid-rows: minmax(2rem, 45%) minmax(min-content, 45%);
	row-gap: 3rem;
}

.aboutMe {
	font-size: 48px;
	margin-left: 3rem;
	margin-top: 3.5rem;
}

.textosobre {
	font-size:25px;
	max-width:45%;
	height:auto;
	margin-left: 3rem;
	text-align: justify;
	text-justify: inter-word;
}

.githubLogo{
	position:absolute;
	max-width: 3%;
	color: #ff5555ff;
	margin-left: 10rem;
}

.githubLogo:hover {
	max-width: 4%;
	color: #ff5555ff;
}

.lattes_icon {
	position:absolute;
	max-width: 3%;
	margin-left: 3rem;
	color: #ff5555ff;
}

.lattes_icon:hover {
	max-width: 4%;
	margin-left: 3rem;
	color: #ff5555ff;
}

#foto {
	border-radius: 50%;
	max-width: 30%;
	height: auto;
	position: relative;
	left: 60%;
	bottom: 35%;
}

.botoes1 > a {
	text-decoration: none;
	word-spacing: 5px;
	padding: 7px;
	color: #ff5555ff;
	font-size: 32px;
	position: relative;
	bottom: 20rem;
	margin-left: 3rem;
}


.botoes1 > a:hover {
  color: #FFFFFF;
  background-color: #ff5555ff;
  border-radius: 15px;
  font-weight: 800;
}

/*---- 3º página - projetos */

#projetos {
  display: grid;
}

.projeTitulo {
	font-size: 48px;
	margin-left: 3rem;
	margin-top: 3.5rem;
	color: #FFFFFF;
}

.botoes2 > a {
	text-decoration: none;
	word-spacing: 5px;
	padding: 7px;
	color: #FFFFFF;
	font-size: 32px;
	position: relative;
	bottom: -29.4rem;
	margin-left: 3rem;
}


.botoes2 > a:hover {
  color: #ff5555ff;
  background-color: #FFFFFF;
  border-radius: 15px;
  font-weight: 800;
}

/*---- 4º página - contato */
#contato {
	display: grid;
}

.contTitulo {
	font-size: 48px;
	margin-left: 3rem;
	margin-top: 3.5rem;
	color: #ff5555ff;
}

.botoes3 > a {
	text-decoration: none;
	word-spacing: 5px;
	padding: 7px;
	color: #ff5555ff;
	font-size: 32px;
	position: relative;
	top: 29.4rem;
	margin-left: 3rem;

}


.botoes3 > a:hover {
  color: #FFFFFF;
  background-color: #ff5555ff;
  border-radius: 15px;
  font-weight: 800;
}


@media only screen and (max-width: 550px) {
  .hello {
    font-size: 80px;
  }
  
  .welcome,
  .oppening,
  .aboutMe,
  .textosobre {
    font-size: 20px;
  }
}