/*para poder scrollear sin las flechas del costado */
::-webkit-scrollbar {
  display: none;
}

@import url('https://fonts.googleapis.com/css2? family= Barlow+Condensed & display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* para eliminar todo margen default de la pagina, para mas estetica */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/*estilo lading page*/
#landing-page{
  height: 90vh;
  color: #171717;
}
.Playa{
  margin-top: 9vh;
  margin-left: 5vw;
  position: absolute;
  width: 30%;
  border-radius: 10%;
  filter: saturate(0%);
  border-color: #fff;

}

.Playa:hover {
  filter: saturate(100%);
  transition: 500ms;
}

#titulo {
  position: absolute;
  text-align: center;
  font-size: 200%;
  color: yellow;
  font-family: 'Bebas Neue';
  margin-top:35vh ;
  margin-left: 55vw;
}

.titulo:hover {
  color: orange;
  transition: 600ms;

}
.textoinicio{
  position: absolute;
  color: black;
  margin-top: 20vh;
  margin-left: 38vw;
  margin-right: 2vw;

}
#año{
  margin-top: 10vh;
  position: absolute;
}
/*borrar la barra de navegacion */
html {
  overflow: auto;
}

/* estilo general del cuerpo*/
body {
  background-color: yellow;
  font-family: 'Bebas Neue', cursive;
  font-size: 1.23vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 5%;
}

/*estilo lading page*/
#landing-page{
  height: 5vh;
  justify-content: center;
  line-height: -20vh;
  
}
.foto {
  margin-top: 1vh;
  margin-left: -55vw;
  position: absolute;
  width: 30%;
  border-radius: 10%;
  filter: saturate(0%);
  border-color: #fff;
}

.foto:hover {
  filter: saturate(100%);
  transition: 500ms;
}

#titulo {
  position: absolute;
  text-align: center;
  font-size: 200%;
  color: black;
  font-family: 'Bebas Neue';
  margin-top:35vh ;
  margin-left: 55vw;
  
}
.parrafoA{
  color: white;
  margin-left: -10vw;
  margin-right: 2vw;

}
#año{
  margin-top: 40vh;
  position: absolute;
  margin-left: 55vw;
  font-size: 1.3vw;
  color: #171717;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.landing2{
  height: 90vh;
}

/*estilo de los parrafos en general */
p{
  font-family: 'Asap Condensed', sans-serif;
  color: white;
}

/*barra de navegacion  superior para volver */
.head {
  display: flex;
  align-items: center;
  height: 60px;
  background: #171717;
  position: fixed;
  width: 100%;
  z-index: 100;
  position: sticky;
  top: 0;

}

.logo {
  margin-left: 50px;
  font-family: 'Heebo', sans-serif;
}

.logo a {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
}

/*"Casita" para volver al inicio/menu de la pagina (no landing page) */
.fa-solid,
.fa-house {
  color: #fff;
  display: flex;
  justify-content: right;
  margin: 20px;
  margin-left: 88vw;


}

#casita {
  margin-right: 2vw;
  color: #fff;
  display: flex;
  justify-content: right;

}

#casita:hover {
  transition: 0.4s;

}

/* Parte principal "Home" */
.Home {
  background-color: black;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 1.23vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 4%;


}


/*Cuestionario de preguntas */
.titulo1{
  color: #fff;
  font-size: 5vw;
}
#presentacion{
  color:aliceblue

}
#nombre1 {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); /*Me llamo mucho la atencion el uso de un degradado de fondo en vez de una imagen u otro color solido*/


}

.TituloPreguntas {
  margin-top: 2vh;
}

.cuestionario {
  border: solid rgb(0, 155, 142) 5px;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
}
/*Estilo de las preguntas*/
.Pregunta {
  font-family: 'Bebas Neue', cursive;
  color: rgb(197, 144, 64);
  margin: 2vh;

}
/*Estilo de las respuestas*/

.respuesta {
  background-color: #fff;
  color: #171717;
  margin: 2vh;
  padding: .5vh;
  border-radius: 1vw;

}
/* no puedo hacer andar esto */
.Pregunta::before {
  content:✅;
  padding-right: 2%;
} 
.respuesta::after{
  content:⭕;
  padding-left: 2%;

}

.titulo {
  text-align: center;
  font-size: 500%;
  color: yellow;
  font-family: 'Bebas Neue';
  margin-top: 50px;
}

.titulo:hover {
  color: orange;
  transition: 600ms;

}

.subtitulo {
  text-align: center;
  color: white;
  font-family: 'Bebas Neue';
  font-size: 250%;
}


/* estilos de todas las secciones */
.contenido {
  min-height: 150vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*estilo de la seccion nombre */
.nombre {
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: white;
}

/*estilo de los parrafos en general */
.parrafos {
  font-family: 'Asap Condensed', sans-serif;
}
.nombre{
  height: 120vh;
}
#infoperfil {
  color: black;
  border: 3px solid yellow;
  margin: 0 100px 0 100px;
  padding: 15px;
}

#foto2 {
  width: 45%;
  margin-top: 10px;
  opacity: 100%;

}

.Illia {
  background-color: goldenrod;
  height: 150vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.titulo3 {
  margin-top: 1vh;
  font-size: 200%;

}

.titulo3:hover {
  color: aliceblue;
  transition: 600ms;
}

.galeria {
  margin-left: 120px;
  margin-top: 20px;

}

.galeria:hover {
  filter: grayscale(100%);
  transition: 1000ms;
}

img {
  border-style: solid;
}

.AmorOdio {
  background-color: aliceblue;
}
li{
  list-style: none;
}
.MeGusta{
  background-color: green;
  padding-left: 1.5vw ;
  padding-right: 1.5vw ;
  margin-bottom: 1vh;
  margin-left: -25vw;

}
.NoMeGusta{
  background-color: red;
  padding-left: 1.5vw ;
  padding-right: 1.5vw ;
  margin-bottom: 1vh;
  margin-right: -25vw;
}
#Amor{
  color: green;
}
#Odio{
  color: red;
}
.pie {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, .2);
  background-color: #fff;
  font-family: 'Signika', sans-serif;
}

#contenidofuturo {
  color: black;
  border: 3px solid white;
  margin: 0 100px 0 100px;
  padding: 15px;
}

.titulo4 {
  font-size: 36px;
  margin-top: 1vh;
}

.titulo5 {
  font-size: 36px;
}

#foto3 {
  width: 45%;
  margin-top: 10px;
  opacity: 100%;

}

#foto2:hover {
  width: 55%;
  transition: 1000ms;

}

/*estilo del pie de pagina */
.pie {
  background-color: #171717;
  height: 1vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: right;
  position: fixed;
  bottom: 0;
  min-width: 100vw;

}

.textopie {
  color: aliceblue;
  font-family: 'Bebas Neue';
  font-size: 15px;
  margin-left: 50px;

}

.IG, .In{
  color: #fff;
  padding: 5%;
  font-family: 'Asap Condensed', sans-serif;

}
.collage_v, .collage_h{
  display: none;
  width: 90%;
  margin: auto;
}
@media (orientation:landscape){
  .collage_h{
    display: block;
  }
}
@media (orientation:portrait){
  .collage_v{
    display: block;
  }
}
/* Galeria estilo */
.container
{
	width: 100%;
	margin: 0px auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.container .box
{
	position: relative;
	width: 300px;
	height: 300px;
	background: #ff0;
	margin: 10px;
	box-sizing: border-box;
	display: inline-block;
}
.container .box .imgBox
{
	position: relative;
	overflow: hidden;
}
.container .box .imgBox img
{
	max-width: 100%;
	transition: transform 2s;
}
.container .box:hover .imgBox img
{
	transform: scale(1.2);
}
.container .box .details
{
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	background: rgba(0,0,0,.8);
	transform: scaleY(0);
	transition: transform .5s;
}
.container .box:hover .details
{
	transform: scaleY(1);
}
.container .box .details .content
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	padding: 15px;
	color: #fff;
}
.container .box .details .content h1
{
	margin: 0;
	padding: 0;
	font-size: 20px;
	color: #ff0;
}
.container .box .details .content p
{
	margin: 10px 0 0;
	padding: 0;
}

@media screen and (max-width: 768px) {
	.container {
		padding: 0;
	}
	.container .box {
	margin: 0;
	}

	}