body {
  font-family: 'Roboto', sans-serif;
  color: #57585c;
  color: var(--color-text);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
}

section {
  width: 100%;
  height: 100vh;
}

img{
  width: 100%;
}

/*estilos lineas del home*/
.svg-animation {
  background-color: #4356F2;
  width: 100%;
  height: 100vh;
}

.content {
  justify-content: center;
  align-items: center;
}

.scene {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.scene {
  background: #4356F2;

}

.scene path:first-child {
  fill: #FFE44B;
}

.scene path:nth-child(2) {
  fill: #FFA254;
}

.scene path:nth-child(3) {
  fill: #EF517B;
}

.scene path:nth-child(4) {
  fill: #5E91ED;
}

.scene path:nth-child(5) {
  fill: #59C6C9;
}

.scene path:nth-child(6) {
  fill: #FCCE51;
}

.scene path:nth-child(7) {
  fill: #FE82A3;
}

/*wave svg*/
.svg-container{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.svg-container svg{
  display: block;
}
#curve0 {
  fill: #fff;
}
.svg-container svg path#curve1 {
  opacity: .6;
}
.svg-container svg path#curve2 {
  opacity: .4;
}

.row{
  z-index: 100;
}

/*name del home*/
.title {
  color: #fff;
  font-size: 6vw;
  font-weight: 400;
  z-index: 1000;
  font-family: "Arapey", serif;
  pointer-events: none;
  z-index: 100;
  margin-top: -480px;
  transition:all 3s ease-out;
  opacity: 0;
}

.title.fade-in {
  opacity: 1;
  margin-left: 3%;
}

/*especialitation del home*/
.subtitle{
  color: #fff;
  font-size: 3vw;
  font-weight: 400;
  z-index: 1000;
  font-family: "Arapey", serif;
  pointer-events: none;
  display: block;  
  z-index: 100;
  margin-top: 10px; 
  transition:all 6s ease-out;
  opacity: 0;
}

.subtitle.fade-in {
  opacity: 1;
  margin-left: 3%;
}

/* section about me */
.profile{
  background-color: #FFF;
  height: 100vh;
}

.aboutMe {
  margin-top: 15%;
  opacity: 0;
  transition: all 3s ease-out;
}

.aboutMe.fade-in {
  opacity: 1;
  margin-top: 10%;
  text-align: center;
}

.description {
  opacity: 1;
  transition: all 3s ease-out;
  font-size: 1.3em;
}

/*
.description.fade-in {
  opacity: 1;
  margin-top: 3%;

}
*/

#headphone {
  opacity: 0;
  transition: all 3s ease-out;
}

#headphone.fade-in {
  opacity: 1;
}

#laptop {
  opacity: 0;
  transition: all 3s ease-out;
}

#laptop.fade-in {
  opacity: 1;
}

#camera {
  opacity: 0;
  transition: all 3s ease-out;
}

#camera.fade-in {
  opacity: 1;
}

#pincel {
  opacity: 0;
  transition: all 3s ease-out;
}

#pincel.fade-in {
  opacity: 1;
}

#photoMe {
  margin-top: 15%;
}

#photo {
  opacity: 0;
  transition: all 2s ease-out;
  margin-top: 2%;
  margin-bottom: 5%;
  width: 19em;
  border: 1px solid transparent;
  border-radius: 5%;
}

#photo.fade-in {
  opacity: 1;
  transition: all 3s ease-out;
  margin-left: 30%;
}



/*
.nav {
  width: 100%;
  font-size: 1.2em;
}

li:first-child {
  margin-right: 55%;
}

.description{
  margin-top: 5em; 
}
*/


/*section skills*/
#curve path{
  fill: #FFF;
}

.skill{
  background-color: #59C6C9;
  height: 100vh;
  color: #FFF;
}

.skill h1{
  font-size: 4em;
}

.rowSkill {
  margin-left: 15%;
}

i {
  font-size: 4em;
}

.skillsLogo {
  width: 100%;
  margin-top: 25%;
  margin-bottom: 0%;
}

#skillOne,#skillTwo,#skillThree {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5%;
}

#skillOne,#skillTwo {
  margin-left: 5%;
}

#skillThree {
  margin-left: 5%;
}


#skillOne {
  opacity: 0;
  transition: all 3s ease-out;
}

#skillOne.fade-in {
  opacity: 1;
  margin-top: 1%;
}

#skillTwo {
  opacity: 0;
  transition: all 2s ease-out;
}

#skillThree {
  opacity: 0;
  transition: all 2s ease-out;
}

#skillTwo.fade-in {
  opacity: 1;
}

#skillThree.fade-in {
  opacity: 1;
}


/*
.node {
  width: 12em;
  margin-left: -25%;
}

.computador {
  margin-left: 295%;
}
*/

/* section work*/
.work{
  height: 100vh;
}

.projectsOne {
  margin-bottom: 2%;
}

#titulo {
  margin-top: -7%;
}

.thumbnailOne {
  margin-top: -7%;
}

.thumbnail {
  width: 100%;
  margin-left: 10%;
  text-align: center;
  transition:all 0.8s ease;
  margin: 3%;
  opacity: 0;
}

.thumbnail.fade-in {
  opacity:1;
  margin-top: 10%;
}

.caption button {
  font-size: 1vw;
  background-color: #FFA254;
  color: #ffff;
}

.caption button:hover {
  background-color: #FFA240;
}

.caption button a {
  text-decoration: none;
  color: #fff;
}


/* section contact*/
#curve3{
  fill: #59C6C9;
}

.contact {
  background-color: #FFE44B;
  height: 85vh;
  color: #FFF;
}

.contact h1{
  font-size: 4em;
}

.contact p {
  font-size: 1.4em;
  margin-bottom: 5%;
}

.row.contactLogos {
  margin-top: 0%;
  margin-left: 40%;
}

.github,.mail,.linkedin {
  width: 12%;
  height: 5%;
  margin-bottom: 0%;
  opacity:1;
}

.mail {
  transition:all 2s ease;
}

.linkedin {
  transition:all 3s ease;
}

.github {
  transition:all 4s ease;
}
/*
.mail.fade-in {
  opacity: 1;
  margin-top: 1%;
}

.linkedin.fade-in {
  opacity: 1;
  margin-top: 1%;
}

.github.fade-in {
  opacity: 1;
  margin-top: 1%;
}
*/
.infoContact {
  font-size: 1.4vw;
  margin-top: -3%;
}

/*footer*/
footer{
  background-color: #EF517B;
  color: #FFF;
  height: 20vh;
}

footer p{
  margin: 0;
  padding: 2em;
}