/* Tipografías*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script&family=Fira+Sans:wght@300&family=Oswald:wght@300&family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Great+Vibes&family=Oswald:wght@300&display=swap');
/* font-family: 'Playfair Display', serif; */
/* font-family: 'Dancing Script', cursive; */
/* font-family: 'Fira Sans', sans-serif; */

/* Colores para Usar
rosa claro: rgba(255,222,220,255) 
rosa oscuro: rgb(242, 180, 181)
gris azulado: rgba(147,147,155,255)
gris claro: rgba(223,226,219,255)
verde oscuro: rgba(167,185,173,255)
verde claro: rgba(198,210,200,255)
*/

html, body {
  scroll-behavior: smooth;
  margin: 0px;
}

/*          Estilo de la Página 1          */

#pagina1{
  background-image: url(./img/portada/1.jpg);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  margin: 0px;
  max-width: 100%;
}

.anuario{
  font-size: 15vw;
  color: rgba(167,185,173,255);
  text-shadow: 5px 7px 7px black;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 2vh;
}
.anuario:hover{
  text-shadow: 2px 4px 10px pink;
}

.nombre{
  font-size: 6vw;
  font-weight: bold; 
  color: rgba(167,185,173,255);
  text-shadow: 2px 3px 4px black;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 2vh;
}
.nombre:hover{
  text-shadow: 2px 4px 10px pink;
}

.subtitulo{
  font-size: 5vw;
  color: rgba(167,185,173,255);
  text-shadow: 2px 4px 10px black;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 2vh;
}
.subtitulo:hover{
  text-shadow: 2px 4px 10px pink;
}

div.textoPagina1{
  margin-top: 35vh;
  margin-right: 3vw;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 30vh;
}

a{
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px rgb(242, 180, 181);
  text-decoration: none;
	font-family: 'Fira Sans', sans-serif;
  font-weight: bold;
  transition: color 1s;
}

.botones{
  font-size: 2.5vw;
  margin-top: 10vh;
  margin-left: 5vw;
  margin-bottom: 10vh;
  width: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-decoration: none;
}

#boton1{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  background-color: rgba(167,185,173,255);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px rgb(242, 180, 181);
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#boton1:hover{
  background-color: rgba(198,210,200,255);
  box-shadow: 8px 6px 20px pink;
}

#boton2{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: rgba(167,185,173,255);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px rgb(242, 180, 181);
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#boton2:hover{
  background-color: rgba(198,210,200,255);
  box-shadow: 8px 6px 20px pink;
}

#boton3{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: rgba(167,185,173,255);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px rgb(242, 180, 181);
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#boton3:hover{
  background-color: rgba(198,210,200,255);
  box-shadow: 8px 6px 20px pink;
}

#boton4{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: rgba(167,185,173,255);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px rgb(242, 180, 181);
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#boton4:hover{
  background-color: rgba(198,210,200,255);
  box-shadow: 8px 6px 20px pink;
}

#boton5{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: rgba(167,185,173,255);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px rgb(242, 180, 181);
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#boton5:hover{
  background-color: rgba(198,210,200,255);
  box-shadow: 8px 6px 20px pink;
}

/*          Estilo de la Página 2          */
#pagina2{
  background-color: rgb(255,222,220);
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.perfil{
  font-size: 6vw;
  color: rgb(77, 110, 88);
  text-shadow: 2px 2px 5px grey;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 7vh;
  margin-top: 0vh;
  padding-top: 3vh;
}
.perfil:hover{
  text-shadow: 2px 4px 10px pink;
}

.contenedor{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 60vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.cosasSobreMi{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 55vw;
}

.botones2{
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
  margin-right: 5vw;
}

#botonPagina2{
  font-size: 2.5vw;
  padding: 2vh;
  color: black;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 3vh;
  text-align: center;
  text-decoration: none;
  background-color: rgb(109, 148, 122);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px grey;
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#botonPagina2:hover{
  background-color: rgb(167,185,173);
  box-shadow: 8px 6px 10px rgb(109, 148, 122);
}

.imagenPerfil{
  width: 30vw;
  animation: fadeIn 5s;
  box-shadow: 5px 7px 7px 1px rgb(170, 96, 110);
}

@keyframes fadeIn{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.cosasSobreMi{
  font-family: 'Fira Sans', sans-serif;
  font-size: 1.75vw;
  color: rgb(77, 110, 88);
  text-shadow: 1px 1px 1px grey;
}

.botonVuelta{
  height: 10vh;
}

/*Estilo de la Página 3*/

#pagina3{
  background-color: rgb(167,185,173);
  height: 100vh;
  width: 100vw;
  margin: 0px;
  max-width: 100%;
}

.futuro{
  background-image: url("https://i.imgur.com/YQHhCYx.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 6vw;
  color: white;
  text-shadow: 2px 4px 10px pink;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 0vh;
}

.imagenes3{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 65vh;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 7vh;
}

.imagenFuturo{
  width: 30vw;
}

.texto{
  color: white;
  font-size: 2vw;
}

.botones3{
  display: flex;
  justify-content: space-between;
  background-image: url("https://i.imgur.com/YQHhCYx.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 0vh;
  height: 15vh;
}

#botonPagina3{
  font-size: 2vw;
  padding: 2vh;
  color: white;
  text-shadow: 2px 2px 2px black;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 3vh;
  text-align: center;
  text-decoration: none;
  background-color: rgb(242, 180, 181);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px white;
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
  margin-left: 5vw;
}
#botonPagina3:hover{
  background-color: rgb(255,222,220);
  box-shadow: 8px 6px 20px pink;
}

.botonVuelta{
  height: 10vh;
  margin-right: 5vw;
  margin-top: 2vh;
}

/*Estilo de la página 4*/

#pagina4{
  background-color: rgb(255,222,220);
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.illia{
  font-size: 3vw;
  color: rgb(77, 110, 88);
  text-shadow: 2px 2px 5px grey;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 2vh;
  margin-top: 0vh;
  padding-top: 3vh;
}
.illia:hover{
  text-shadow: 2px 4px 10px pink;
}

.botones4{
  display: flex;
  margin-left: 5vw;
  margin-right: 5vw;
  
}

#botonPagina4{
  font-size: 2.5vw;
  padding: 2vh;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 4vh;
  color: white;
  text-shadow: 2px 2px 2px pink;
  text-align: center;
  text-decoration: none;
  background-color: rgb(109, 148, 122);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px grey;
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#botonPagina4:hover{
  background-color: rgb(167,185,173);
  box-shadow: 8px 6px 10px rgb(109, 148, 122);
}

#fotos{
  animation: fadeIn 5s;
  margin-left: 6vw;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.botonVuelta2{
  height: 10vh;
  margin-left: 60vw;
  padding-top: 5vh;
}

/* Ondas */

.ondas{
  height: 15vh;
  width: 100vw;
  background-color: rgb(255,222,220);
  margin-top: 5vh;
  max-width: 100%;
}

/* Animación */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

.ondas, .botones4 {
    position: absolute;
}
.botones4 {
    z-index: 2;
}

/*          Estilo de la Página 5          */

#pagina5{
  background-image: url("https://i.imgur.com/YQHhCYx.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.galeria{
  font-size: 6vw;
  color: rgb(242, 180, 181);
  background-color: rgb(167,185,173);
  text-shadow: 2px 4px 2px white;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 1vh;
  margin-top: 0vh;
  padding-top: 1vh;
}
.galeria:hover{
  text-shadow: 2px 4px 10px rgb(198,210,200);
}

.contenedor2{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 60vh;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.botones5{
  display: flex;
  justify-content: space-between;
  background-color: rgb(167,185,173);
  margin-bottom: 0vh;
}

#botonPagina5{
  font-size: 2.5vw;
  padding: 2vh;
  color: white;
  text-shadow: 2px 2px 2px black;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 3vh;
  text-align: center;
  text-decoration: none;
  background-color: rgb(242, 180, 181);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px white;
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
  margin-left: 5vw;
}
#botonPagina5:hover{
  background-color: rgb(255,222,220);
  box-shadow: 8px 6px 20px pink;
}

.botonVuelta{
  height: 10vh;
  margin-right: 5vw;
  margin-top: 2vh;
}

.slides {
    padding: 0;
    width: 60vw;
    height: 55vh;
    margin: 0;
    position: relative;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 60vw;
    height: 55vh;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 20vw;
    height: 100%;
    display: none;
    position: absolute;
	  opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    color: #FFF;
    font-size: 20vw;
    text-align: center;
    line-height: 45vh;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, 0.3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}

/*          Estilo de la página 6          */


#pagina6{
  background-color: rgb(255,222,220);
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
}

.random{
  font-size: 6vw;
  color: rgb(77, 110, 88);
  text-shadow: 2px 2px 5px grey;
  font-family: 'Dancing Script', cursive;
  text-align: center;
  margin-bottom: 2vh;
  margin-top: 0vh;
  padding-top: 3vh;
}
.random:hover{
  text-shadow: 2px 4px 10px pink;
}

p{
  font-family: 'Cookie', cursive;
  font-size: 2.6vw;
  margin: 1vw;
  text-align: center;
}

#charly{
  margin: 2vw;
  width: 50vw;
  height: 40vh;
}

#charly2{
  margin: 2vw;
  width: 50vw;
  height: 40vh;
}

.botones6{
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
  margin-right: 5vw;
  font-size: 2.5vw;
}

.contenedor3{
  display: flex;
  flex-direction: row;
}

#botonPagina6{
  padding: 2vh;
  color: black;
  padding-left: 3vw;
  padding-right: 3vw;
  margin: 3vh;
  text-align: center;
  text-decoration: none;
  background-color: rgb(109, 148, 122);
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px grey;
  transition: background-color 0.7s ease;
  transition: box-shadow 0.7s ease;
}
#botonPagina6:hover{
  background-color: rgb(167,185,173);
  box-shadow: 8px 6px 10px rgb(109, 148, 122);
}

.botonVuelta{
  height: 10vh;
}