/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

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

/*          Estilo todas las páginas          */

.titulo{
/*  display: inline;*/
  font-size: 7vw;
  color: #0F045A;
  text-shadow: 2px 4px 10px rgb(139, 139, 139);
  font-family: 'Josefin Sans', sans-serif;
  margin-bottom: 3vh;
  margin-top: 2vh;
  transition-duration: 1s;
}
.titulo:hover{
  color: #EFF601;
}


/*          Estilo de la pagina1          */

#pagina1{
  background-image: url(https://images6.alphacoders.com/989/thumb-1920-989983.jpg);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  margin: 0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

.titulo1{
  font-size: 10vw;
  color: white;
  text-shadow: 2px 4px 10px rgb(139, 139, 139);
  font-family: 'Josefin Sans', sans-serif;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 2vh;
}

.textoPagina1{
  margin-top: 35vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 46vw;
  height: 30vh;
}

#botones{
  margin-top: 20vh;
  margin-left: 10vw;
  width: 45vw;
}

#botones a {
  color: #3470C1;
}

#boton1{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  background-color: #A0BFEC;
  border-radius: 1.83vw;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px #4D6D8D;
}

#boton1 a:hover {
  color: #E7E589;
}

#boton1:hover {
  transition: 0.5s;
  background-color: #6E8FBF;
  box-shadow: 8px 6px 20px #686887;
}

#boton2{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: #A0BFEC;
  border-radius: 1.83vw;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px #4D6D8D;
}

#boton2 a:hover {
  color: #E7E589;
}

#boton2:hover{
  transition: 0.5s;
  background-color: #6E8FBF;
  box-shadow: 8px 6px 20px #686887;
}

#boton3{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: #A0BFEC;
  border-radius: 1.83vw;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px #4D6D8D;
}

#boton3 a:hover {
  color: #E7E589;
}

#boton3:hover {
  transition: 0.5s;
  background-color: #6E8FBF;
  box-shadow: 8px 6px 20px #686887;
}

#boton4{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: #A0BFEC;
  border-radius: 1.83vw;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px #4D6D8D;
}

#boton4:hover {
  transition: 0.5s;
  background-color: #6E8FBF;
  box-shadow: 8px 6px 20px #686887;
}

#boton4 a:hover {
  color: #E7E589;
}

#boton5{
  padding: 3vh;
  margin: 3vh;
  width: 20vw;
  text-align: center;
  text-decoration: none;
  background-color: #A0BFEC;
  border-radius: 1.83vw;
  cursor: pointer;
  box-shadow: 4px 4px 7px 1px #4D6D8D;
}

#boton5 a:hover {
  color: #E7E589;
}

#boton5:hover {
  transition: 0.5s;
  background-color: #6E8FBF;
  box-shadow: 8px 6px 20px #686887;
}

div.boton{
  align: center;
  color: black;
  text-decoration: none;
	font-family: 'Fira Sans', sans-serif;
  font-size: 1.5vw;
  font-weight: bold;
  transition: color 0.5s;
}

/*          Estilo de la página2          */
#pagina2{
  background-color: thistle;
  padding-top: 5vh;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina2 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.8vw;
  margin: 0 0 30px 0;
  color: #A18AA1;
}

.img-container2 img {
  border: solid 0.3vw white;
  border-radius: 7.32vw;
  margin: 0 5vw;
  width: 17vw;
  height: 21.2vw;
  transition: 1s;
}

.img-container2 img:hover {
  transform: scale(1.1);
}

#pagina2 a {
  text-decoration: none;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 0.4vw;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.4vw;
	font-weight: bold;
	padding: 0.7vw 1.4vw;
	text-decoration: none;
  border-radius: 3.7vw;
}

#pagina2 a:hover{
  color: #E7E589;
  background-color: grey;
}

  
/*          Estilo de la página3          */

#pagina3{
  background-color: #DFAF79;
  padding-top: 5vh;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.titulo2{
  margin: 0;
  display: inline;
  font-size: 7vw;
  color: #0F045A;
  text-shadow: 2px 4px 10px rgb(139, 139, 139);
  font-family: 'Josefin Sans', sans-serif;
}

.list-img__container {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
}

#pagina3 img {
 border-radius: 4.4vw;
 width: 40vw;
 height: 24.36vw;
 margin: 0 3.7vw;
 border: solid 0.4vw #514538;
 transition: 1s;
}

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

.list-img__container li {
  margin: 3.3vw 0;
  font-family: 'Belanosima', sans-serif;
  font-size: 1.8vw;
  color: #514538;
}

#pagina3 a {
  text-decoration: none;
  text-align: center;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 0.4vw;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 1.6vh 1.5vw;
	text-decoration: none;
  border-radius: 3.7vw;
}


/*          Estilo de la página4          */

#pagina4{
  background-color: #6172B9;
  padding-top: 5vh;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina4 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.8vw;
  color: #98A6F1;
}

#galeria-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 12vw;
  padding: 1.8vw;
  grid-gap: 1.5vw 5vw;
}

#galeria-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 3.7vw;
  transition: transform 1s;
  border: solid 0.3vw #98A6F1;
}

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

#pagina4 a {
  text-decoration: none;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 6px;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 1.6vh 1.5vw;
	text-decoration: none;
  border-radius: 3.7vw;
}


/*          Estilo de la página5          */
#pagina5 {
  background-color: #71BB75;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina5 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.7vw;
  color: #3D4A3D;
}

#youtube {
  width: 45vw;
  height: 45vh;
  border-radius: 3vw;
  margin: 8vh 0 4vh 0;
  border: solid 0.5vw #3B8544;
  transition: 1s;
}

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

#pagina5 a {
  text-decoration: none;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 6px;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 10px 20px;
	text-decoration: none;
  border-radius: 50px;
}

/*          Estilo de la página6          */
#pagina6{
  background-color: #ECE150;
  padding-top: 5vh;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina6 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.5vw; 
  color: #4177FF;
}

.img-container6 {
  display: flex;
  flex-direction: row;
}

#pagina6 img {
  width: 28vw;
  height: 25vh;
  border-radius: 2.9vw;
  margin: 1.5vw;
  transition: 1s;
  border: solid 0.2vw #4177FF;
}

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

#pagina6 a {
  text-decoration: none;
  width: 15vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 6px;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
  padding: 1.6vh 1.5vw;
	text-decoration: none;
  border-radius: 3.7vw;
}

@media screen and (min-width:700px){
  #pagina4{
  background-color: #6172B9;
  padding-top: 5vh;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina4 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.8vw;
  color: #98A6F1;
}

#galeria-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 9vw;
  padding: 1.8vw;
  grid-gap: 1.5vw 5vw;
}

#galeria-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 3.7vw;
  transition: transform 1s;
  border: solid 0.3vw #98A6F1;
}

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

#pagina4 a {
  text-decoration: none;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 6px;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 1.6vh 1.5vw;
	text-decoration: none;
  border-radius: 3.7vw;
}
  #pagina5 {
  background-color: #71BB75;
  text-align: center;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#pagina5 p {
  font-family: 'Belanosima', sans-serif;
  font-size: 1.7vw;
  color: #3D4A3D;
}

#youtube {
  width: 45vw;
  height: 45vh;
  border-radius: 3vw;
  margin: 6vh 0 3vh 0;
  border: solid 0.5vw #3B8544;
  transition: 1s;
}

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

#pagina5 a {
  text-decoration: none;
  width: 10vw;
  align-items: center;
  display: block;
  transition: color 0.5s;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #6E8FBF;
	border-radius: 6px;
	cursor: pointer;
	color: black;
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: bold;
	padding: 10px 20px;
	text-decoration: none;
  border-radius: 50px;
}