/*DESARROLLO*/
html, body {
  scroll-behavior: smooth;
  margin:0;
}

/*PAGINA PRINCIPAL*/
#paginaprincipal{
  background-color: #FFC0CB;
  height: 100vh;
  width:100vw;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:space-evenly;
}

#tituloprincipal{
  font-family: 'Epilogue', sans-serif;
  font-size: 11vw;
  color: #FAEBD7;
  text-shadow: 2px 4px 10px rgb(219,112,147,);
  text-align: center;
  margin-bottom: 0vh;
  margin-top: 5vh; 
}

#titulo2{
  font-family: 'Ms Madi', cursive;
  font-size: 15vw;
  color: #DC143C;
  text-align: center;
  margin-bottom: -5vh;
  margin-top: -25vh;
}

#titulo2:hover{
  color: #191970;
}

/*TITULOS*/
.titulos{
  font-family: 'Sora', sans-serif;
  font-size: 7.5vw;
  color: #191970;
  text-align: center;
  margin-top: 0vh;
  padding-top: 4vh;
}
.titulos:hover{
  text-shadow: 4px 6px 5px #DEB887;
}

/*PERFIL*/
#perfil{
  background-color: #FFE4C4;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#contenidosobremi{
  background-color: #FFE4C4;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  align-items:center;
  height: 50%;
  width:100%;
  margin-top: 10vh;
  margin-bottom: 5vh;
}

#textoperfil{
  width:35%;
  heigth:auto;
  font-family: 'Arsenal', sans-serif;
  font-size:4vw;
  text-align:justify;
  margin-top: -5vh;
}

#imagenperfil{
  margin-left:-10vw;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  transition: transform 0.5s;
}

#imagenperfil:hover {
  transform: scale(1.5);
}

/*FUTURO*/
#futuro{
background-color: #FFE4C4;
 margin: 0;
 height: 100vh;
 width: 100vw;
}

#contenidofuturo{
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 60%;
  width: 90%;
  margin-top: -5vh;
  margin-bottom: 0vh;
  margin-left: 6vh;  
}

#textofuturo{
  width:45%;
  heigth:auto;
  font-family: 'Arsenal', sans-serif;
  font-size:2vw;
  text-align:justify;
}

#imagenfuturo{
  
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  transition: transform 1s;
}

#imagenfuturo:hover {
  transform: scale(1.15);
}

/*MI PASO POR EL ILLIA*/
#mipasoporelillia{
  background-color:#FFE4C4;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#contenidomipasoporelillia{
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 45%;
  width:90%;
}

#textomipasoporelillia{
  width:90%;
  heigth:auto;
  font-family: 'Arsenal', sans-serif;
  font-size:2.5vw;
  text-align:center;
  margin-left:7vh;
  margin-top:-8vh;
}

#imagenesmipasoporelillia{
  display: flex;
  flex-direction: row;
  
}

.imagen01{
  width: 20%;
  height: auto;
  justify-content: space-evenly;
  display:flex;
  flex-wrap: nowrap;
  margin-bottom: 5vh;
  margin-left: 10%;
  transition: transform 1s;
}


.imagen02{
  width: 20%;
  justify-content: space-evenly;
  display:flex;
  flex-wrap: nowrap;
  margin-bottom: 5vh;
  margin-left: 10%;
}


.imagen03{
  width: 20%;
  justify-content: space-evenly;
  display:flex;
  flex-wrap: nowrap;
  margin-bottom: 5vh;
  margin-left: 10%;
  margin-right: 10%;
}


.imagen01:hover { 
  transition: transform 0.75s;
  transform: scale(1.45);
}

.imagen02:hover { 
  transition: transform 0.75s;
  transform: scale(1.45);
}

.imagen03:hover { 
  transition: transform 0.75s;
  transform: scale(1.45);
}

/*AUDIOVISUAL*/
#audiovisual{
  background-color:#FFE4C4;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#contenedoraudiovisual{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  align-items:center;
  height: 50%;
  margin-top: 0vh;
  margin-bottom: 5vh;
  margin-left:10vh;  
  margin-right:10vh;
}

/*RANDOM*/
#random{
  background-color:#FFE4C4;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#contenedorrandom{
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  justify-content: space-evenly;
  align-items:center;
  height: 40%;
  width:100%;
  margin-top: 10vh;
  padding-bottom: 10vh;
}

#textorandom{
  width:40%;
  heigth:auto;
  font-family: 'Arsenal', sans-serif;
  font-size:3.75vw;
  text-align: left;
}

#imagenrandom{
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
  border-bottom-left-radius: 5px 5px;
  border-bottom-right-radius: 5px 5px;
  margin-left:-5vw;
  box-shadow:4px 4px 10px pink;
  transition: transform 0.8s;
}

#imagenrandom:hover {
  transform: scale(1.15);
}

/* BOTONES*/
#botonera {
  margin-bottom: 6vh;
  width: 90%;
  justify-content: space-evenly;
  display:flex; 
}

#boton:hover{
  cursor:pointer; 
}

#boton {
/*alto y ancho*/
    width: 90px;
    height: 40px;

/*formato del texto*/
    color: #fff;
    text-aling: center;
    border-radius: 5px;
    padding: 10px 25px;
    line-height: 8vh;
    font-family: 'Epilogue', sans-serif;
    font-size: 27px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;   
  
    outline: none;

    display: inline-block;
    justify-content: space-around;
    flex-direction: row;
    align-content: space-around;
   }
   
#boton {
    background: #496D4C;
    background: linear-gradient(0deg, #496D4C 0%, #314F34 100%);
    border: none;
   }
   
#boton:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, #607E63 0%, #77977A 100%);
   }

#boton2 {
/*alto y ancho*/
    width: 90px;
    height: 40px;

/*formato del texto*/
    color: #fff;
    text-aling: center;
     
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Epilogue', sans-serif;
    font-size: 20px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;   
   

    display: inline-block;
    justify-content: space-around;
    flex-direction: row;
    align-content: space-around;
   }
   
#boton2 {
    background: #496D4C;
    background: linear-gradient(0deg, #496D4C 0%, #314F34 100%);
    border: none;
   }
   
#boton2:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, #607E63 0%, #77977A 100%);
   }

#volver{
/*alto y ancho*/
    width: 55px;
    height: 40px;
    
    

/*formato del texto*/
    color: #fff;
    text-aling: center;
     
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Epilogue', sans-serif;
    font-size: 20px;
    background: transparent;
    cursor: pointer;
    line-height: 7vh;
    transition: all 0.3s ease;   
   

    display: inline-block;
    justify-content: space-around;
    flex-direction: row;
    align-content: space-around;
   }
   
#volver {
    background: #496D4C;
    background: linear-gradient(0deg, #496D4C 0%, #314F34 100%);
    border: none;
   }
   
#volver:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, #607E63 0%, #77977A 100%);
   height: 10vh;
  right:5%;
}