@import url('https://fonts.googleapis.com/css2?family=Playfair:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Playfair:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,200&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Kanit:ital,wght@1,200&family=Lobster&display=swap');

:root {
  --verdecito : #D8EEB7;
  --verdecito-oscuro: #FFEECB;
  --sombra: #D6D6D6;
  --color-texto-botones: #A5BA8E;
}

html, body {
  scroll-behavior: smooth;
  margin: 0%;
  display: flex; 
  flex-direction: column;  
}



/*--------- Página 1 ----------*/



#pagina1 {
  background-image: url("https://i.pinimg.com/564x/3b/f7/67/3bf7677aa278f09d83ab347a1a0e6659.jpg");
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.titulo1 {
  margin: 0;
  color: white;
  font-family: 'Lobster', cursive;
  letter-spacing: 0.5vw;
  font-size: 6vw;
  text-align: center;
}

.titulo1:hover{
  text-shadow: 2px 4px 10px #686887;
}

.subtitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.19vw;
  background-color: #C6B695;
  width: 47vw;
  height: 9.70vh;
  padding: 2vh 0; 
  margin: auto;
  color: white;
  font-family: 'Playfair', serif;
  font-size: 4vw;
  text-align: center;
  margin-bottom: 10vh;
}

.subtitulo:hover{
  text-shadow: 2px 4px 10px #686887;
}

.botonera {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
}

.boton a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-botones);
  text-decoration: none;
  font-family: 'Rubik', sans-serif;
  font-size: 1.8vw;
}

#botonperfil {
  margin: 15vh 8vw 0 0;
  padding: 3vh;
  background-color: var(--verdecito-oscuro);
  width: 20vw;
  border-radius: 8vw;
  transition: 0.8s;
}
#botonperfil:hover{
  transform: scale(1.2);
}
  
  
#botonpasoporillia {
  margin: 15vh 8vw 0 0;
  padding: 3vh;
  background-color: var(--verdecito-oscuro);
  width: 20vw;
  border-radius: 8vw;
  transition: 0.8s;
}

#botonpasoporillia:hover{
  transform: scale(1.2);
}

#botonaudiovisual {
  margin: 15vh 0 0 0;
  padding: 3vh;
  background-color: var(--verdecito-oscuro);
  width: 20vw;
  border-radius: 8vw;
  transition: 0.8s;
}

#botonaudiovisual:hover {
  transform: scale(1.2);
}

#botonrandom{
  margin: 10vh 0 15vh 0;  
  padding: 3vh;
  background-color: var(--verdecito-oscuro); 
  width: 20vw;
  border-radius: 8vw;
  transition: 0.8s;
}

#botonrandom:hover {
  transform: scale(1.2);
} 

#botonfuturo {
  margin: 10vh 0 15vh 0;
  padding: 3vh;
  background-color: var(--verdecito-oscuro);
  width: 20vw;
  border-radius: 8vw;
  transition: 0.8s;
}

#botonfuturo:hover{
  transform: scale(1.2);
}



/*--------- Página 2 ----------*/



#pagina2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #E5D3FF;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.titulop {
  margin-top: -7.5vh;
  color: white;
  font-family: 'Lobster', cursive;
  letter-spacing: 1vh;
  font-size: 6vw;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: double;

}

.titulop:hover {
  color: #CCA8FF;
}

.texto-pagina2 {
  display: flex;
  felx direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}

.texto-pagina2 ul {
  padding: 0;
  margin: 0;
}

.texto-pagina2 li {
  background: white;
  text-decoration: none;
  border-radius: 8vw;
  padding: 1vh 3vw;
  font-family: 'Rubik', sans-serif;
  font-size: 1.5vw;
  margin: 3vh 0;
}

.texto-pagina2 li:hover {
  color: #CCA8FF;
}

.texto-pagina2 img {
  width: 30vw;
  height: 45vh;
  border: solid 0.6vw #CCA8FF;
  border-radius: 5vw;
  transition: transform 1s;
}

.texto-pagina2 img:hover {
  transform: scale(1.10);
}

.botonesPaginas {
  margin: 1vh 0;
}

.botonvolver {
  position: relative;
  bottom: 1vh; 
  padding: 5px 0;
  font-family: 'Abril Fatface', cursive;
  font-size: 2vw;
  text-align: center;
  color: white;
  background-image: url("https://i.pinimg.com/564x/2e/d4/3d/2ed43d0dce7fb7718cf418813c9eb5b5.jpg");
  background-repeat:no-repeat;
  text-align:center;
  border-radius: 0.7vw;
}

.botonSiguiente {
  position: relative;
  bottom: 1vh; 
  font-family: 'Abril Fatface', cursive;
  color: black;
  font-size: 2vw;
  padding: 5px 0;
  background-image: url("https://i.pinimg.com/564x/db/d9/29/dbd9290fad4c702a773a62a91dd14311.jpg");
  background-repeat: no-repeat;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  margin: 4px 2px;
}

.botonvolver:hover{
  cursor: pointer;
  color: black;
  transition: 1s;
  background-image: url("https://i.pinimg.com/564x/db/d9/29/dbd9290fad4c702a773a62a91dd14311.jpg");
}

.botonSiguiente:hover {
  cursor:pointer;
  color:white;
  transition:1s;
  background-image: url("https://i.pinimg.com/564x/2e/d4/3d/2ed43d0dce7fb7718cf418813c9eb5b5.jpg");
}


/* --------- Página 3 --------- */

#pagina3{
  display: flex;
  flex-direction: column;
  background-color: #C7FFD8;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

#pagina3 h2 {
  color: #005C7B;
  font-size: 5vw;
  margin: 4vh 4vw;
}

#pagina3 h2:hover {
  color: #007695;
}

#pagina3 p {
  text-align: center;
  color: #008B8E;
  font-size: 1.5vw;
  font-family: 'Rubik', sans-serif;
}

#galeria-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 10.5vw;
  padding: 1vw;
  grid-gap: 1vw;
}

#galeria-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 3.8vw;
  transition: transform 1s;
}

#galeria-container img:hover {
  transform: scale(1.20);
}

.galeria__img:nth-child(1) {
  grid-column-start: span 2;
}

.galeria__img:nth-child(2) {
  grid-column-start: span 2;
}

.galeria__img:nth-child(3) {
  grid-column-start: span 2;
}

.galeria__img:nth-child(4) {
  grid-column-start: span 2;
}

.galeria__img:nth-child(6) {
  grid-column-start: span 2;
}

.botonesPaginas {
  display: flex;
  align-items: center;
  flex-direction: column;
}


/* --------- Página 4 --------- */


#pagina4{
  background-color:#990000;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina4 h4 {
  margin: 6vh 4vw;
}

#Audiovisual-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#youtube {
  width: 35vw;
  height: 30vh;
  margin: 0.7vh 0;
  border-radius: 2vw;
  transition: 1s;
} 

#youtube:hover {
  transform: scale(1.1);
}

#spotify {
  width: 35vw;
  height: 20vh;
  margin: 0.7vh 0;
  transition: 1s;
}

#spotify:hover {
  transform: scale(1.1);
}

/* --------- Página 5 --------- */


#pagina5{
  background-color: #FFEBC3;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#pagina5 h5 {
  color: #4D4637;
  margin: 6vh 4vw;
}

#pagina5 p {
  text-align: center;
  font-family: 'Rubik', sans-serif;
  font-size: 1.5vw;
  margin: 5vh 0;
  color: #655735;
}

.pagina5__img-text-container {
  display: flex;
  align-items: center;
  justify-content: space-around; 
}

.pagina5__img-text-container  li {
  margin: 3.3vh 0;
  font-family: 'Rubik', sans-serif;
  font-size: 2vw;
  color: #655735;
}

#pagina5 img {
  width: 30vw;
  height: 38vh;
  border-radius: 3.7vw;
  border: solid 5px #655735;
  transition: 1s;
  margin: 0 3vw 0 3vw;
}

#pagina5 img:hover {
  transform: scale(1.1);
}


/* --------- Página 6 --------- */


#pagina6 {
  background-color: #5c5cd6;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#pagina6 h6 {
  color: #484554;
}

#pagina6 p {
  text-align: center;
  font-family: 'Rubik', serif;
  font-size: 1.4vw;
  color: #484554;
}

#img6-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#pagina6 img{
  width: 20vw;
  height: 30vh;
  border-radius: 3vw;
  margin: 3vh 2vw;
  border: solid 0.5vw #938BB7;
  transition: 1s;
}

#pagina6 img:hover {
  transform: scale(1.1);
}

.titulof {
  color: white;
  font-family: 'Lobster', cursive;
  letter-spacing: 1vh;
  font-size: 6vw;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: double;
  margin: 6vh 4vw;
}

/*Imagenes de todas las páginas*/



@media screen and (min-width: 800px) {
  #pagina3 p {
    font-size: 15px;
  }
  .botonvolver {
    position: relative;
    bottom: 2vh; 
    padding: 5px 0;
    font-family: 'Abril Fatface', cursive;
    font-size: 1.5vw;
    text-align: center;
    color: white;
    background-image: url("https://i.pinimg.com/564x/2e/d4/3d/2ed43d0dce7fb7718cf418813c9eb5b5.jpg");
    background-repeat:no-repeat;
    text-align:center;
    border-radius: 0.7vw;
  }
  .botonSiguiente {
    position: relative;
    bottom: 2vh; 
    font-family: 'Abril Fatface', cursive;
    color: black;
    font-size: 1.5vw;
    padding: 5px 0;
    background-image: url("https://i.pinimg.com/564x/db/d9/29/dbd9290fad4c702a773a62a91dd14311.jpg");
    background-repeat: no-repeat;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    margin: 4px 2px;
  }
}