/* Tipografías*/
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Darumadrop+One&display=swap');

html, body {
  scroll-behavior: smooth;
  
}
/* Estilo todas las páginas */
.paginas{
  margin: 2%;
  
}
p{
  font-size: 9vw;
  color: white;
  text-shadow: 2px 4px 10px pink
   ;
  font-family: 'Darumadrop One', cursive;
  text-align: center;
  margin-bottom: 3vh;
  margin-top: 2vh;
}
p:hover{
  text-shadow: 2px 4px 10px pink;
  border-color: pink;
}
/*Imagenes de todas las páginas*/
img{
  height: 40%;
  width: 18%;
  align: center;
 
}

/*Estilo y funcion etiquetas */
a{
  text-decoration: none;
	background-color: indianred;
	border-radius: 16px;
	cursor: wait;
	color: white;
	font-family:'Amatic SC', cursive;
	font-size: 3vw;
	font-weight: bold;
	padding: 6px 24px;
	text-decoration:none;
  border-radius: 30px;
  transition: color 0.5s;
  
}
/*botones*/
a:hover{
  color: white;
  background-color: darksalmon;
}
#botonesPerfil{
  align: center;
  position: asolute;
  margin-top: 5%;
  margin-left: 40%;
}

#botonesinicio{
  width: 100vw;
  text-align: center;
  padding-bottom: 3vw;
}

/*Estilo de la pagina1*/
#pagina1{
  background-image: url("./img/fondos/fondo1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 115vh;
  width: 100vw;
}

/*Estilo de la página2*/
#pagina2{
  background-image: url("./img/fondos/fondo2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 120vh;
  width: 100vw;
}

/*Estilo de la página4*/
#pagina4{
  background-image: url("./img/fondos/fondo3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 120vh;
  width: 100vw;
}

#botonesrandom{
  align: center;
  position: asolute;
  margin-top: 5%;
  margin-left: 40%;
  margin-left: 40%;
  margin-top: 2%;
}

#videosrandom{
 margin-left: 35%
}

#videosrandom1{
  margin-right: 3%;
}

/*Estilo de la página5*/
#pagina5{
  background-image: url("./img/fondos/fondo4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 150vh;
  width: 100vw;
}

#fotosillia{
  margin-top: 6vw;
  margin-left: 1.2vw;
}

#fotoillia:hover{
  transform: scale(1.35);
  transition: transform 1s;
}


#botonespaso{
  margin-left: 40%;
  margin-top: 10%;
}

/*Estilo de la página6*/
#pagina6{
  background-image: url("./img/fondos/fondo5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 110%;
  width: 100vw;
}

.container2 {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem 2rem;
  
}
.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height:100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}

@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 1rem;
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}


#imagenesPerfil{
  margin-left: 5%;
}
#imagenesInicio{
  text-align: center;
}

#imagenesInicio img {
  border: solid 2px indianred;
  width: 40vw;
  max-width: 220px;
  
}


#botonespaso{
  margin-left: 40%;
}

#botonesfuturo{
  margin-left: 45%;
}