/*fuentes importadas a utilizar*/
@import url('https://https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
/*diseño general*/
*{
   
    background-color:rgb(158, 53, 255);
    color:rgb(224, 224, 224);
    font-size: larger;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}


/*diseño título y subtítulo*/
.titulo{
    font-family: 'Times New Roman', Times, serif;
    font-size:10vmin;
    color: rgb(179, 125, 87);
    background-color: #016DD9;

}

.subtitulo{
    font-family: monospace;
    font-size: 6vmin;
    color: rgb(255, 212, 22);
    letter-spacing: 0.25cm;
    background-color: rgb(156, 35, 187);
    text-align: center;
    text-shadow: lightyellow;
    padding-top: 1%;
    
}

/*diseño de la cabecera*/
.cabecera{

    width: 100vw;
    height: 10vh;
    background-color: rgb(53, 15, 100);
    color: rgb(255, 197, 197);
    position: fixed;
    top: 0vh;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: larger;
    z-index: 90;



}

.menu{
  width: 100%;
  display: flex;  
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.menu a{
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 2.5vmax;
}

/*diseño de la barra de navegación*/
ul{
  width: 100%;

  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

  list-style: none;
  background-color: rgb(37, 206, 206);
  padding: 10px 0px;
}
        
/*diseño del pie de página*/
.pie{

    width: 100%;
    height: 10vh;
    background-color: rgb(255, 103, 111);
    color: rgb(18, 76, 235);
    position: fixed;
    bottom: 0vh;
    font-family: sans-serif;
    text-align: center;
    font-size: larger;
}

.contenido{


    width: 90vw;
    margin: auto;
    padding-top: 10vh;
    
    display: flex;
    flex-direction: column;

}


.seccion{

    width: 100%;
    min-height: 80vh;
    padding: 0;

}
/*diseño para el nombre de presentación*/
.presentacion{

    background-color: rgb(233, 103, 226);

    

    
    

}
/*fuentes importadas para la presentación*/
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

body {
  background: rgba(233, 142, 142, 0.9); 
}

h1 {
  color: rgba(134, 9, 9, 0.9);
  font: normal 100px Varela Round, sans-serif;
  height: 100px;
  left: 0;
  letter-spacing: 5px;
  margin: -80px 0 0 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  width: 100%;
  animation: move linear 2000ms infinite;  
  background-color: transparent;
}

@keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }  
}
/*diseño para las preguntas personales*/
.preguntas{

    background-color: rgb(13, 106, 143);
    font-size: 2.5vmin;
    line-height: 4.5vmin;
    background-size:cover;
    background-image: url("../img/carta2.jpg")

}

.p1{
    background-color: rgb(235, 255, 59);
    margin-left: 5%;
    padding-left: 5%;
    margin-right: 5%;
    font-size: larger;
    text-align: center;
    color: rgb(126, 3, 3);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border-left: 1vmax solid rgb(119, 119, 0);


}

.p1::before{
    content: "😏";
    padding-left: 2%;

}


.p2{
    background-color: rgb(238, 160, 238);
    margin-right: 5%;
    padding-right: 5%;
    margin-left: 5%;
    text-align: center;
    font-size: larger;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(35, 104, 255);
    border-right: 1vmax solid rgb(108, 169, 248);


}

.p2::after{
    content: "😎";
    padding-left: 2%;

}


.respuesta1{

    font-family: sans-serif;
    background-color: rgb(143, 252, 143);
    font-weight: 900;
    color: rgb(61, 0, 0);
    font-size: 2.75vmin;

}

.respuesta2{

    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: rgb(15, 0, 116);
    font-weight: 900;
    color: rgb(255, 227, 133);
    font-size: 2.75vmin;

}
/*diseño para la galería de imagenes del illia*/
.illia{

background-color: rgb(221, 11, 81);

}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

body {
  display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: radial-gradient(circle at center center, rgba(33,33,33,0),rgb(33,33,33)),repeating-linear-gradient(135deg, rgb(33,33,33) 0px, rgb(33,33,33) 1px,transparent 1px, transparent 4px),repeating-linear-gradient(45deg, rgb(56,56,56) 0px, rgb(56,56,56) 5px,transparent 5px, transparent 6px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));
}

.wrapper {
	width: 300px;
	height: 300px;
	margin: 7% auto;
}

.box-area {
	-webkit-animation: animate 10s ease-in-out infinite;
	        animation: animate 10s ease-in-out infinite;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transform-origin: 100px 100px 0;
	    -ms-transform-origin: 100px 100px 0;
	        transform-origin: 100px 100px 0;
}

@-webkit-keyframes animate {
	from, to {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	16% {
		-webkit-transform: rotateY(-90deg);
		        transform: rotateY(-90deg);
	}

	33% {
		-webkit-transform: rotateY(-90deg) rotateZ(90deg);
		        transform: rotateY(-90deg) rotateZ(90deg);
	}

	50% {
		-webkit-transform: rotateY(-180deg) rotateZ(90deg);
		        transform: rotateY(-180deg) rotateZ(90deg);
	}

	66% {
		-webkit-transform: rotateY(-270deg) rotateZ(90deg);
		        transform: rotateY(-270deg) rotateZ(90deg);
	}

	83% {
		-webkit-transform: rotateX(-270deg);
		        transform: rotateX(-270deg);
	}
	
}

@keyframes animate {
	from, to {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	16% {
		-webkit-transform: rotateY(-90deg);
		        transform: rotateY(-90deg);
	}

	33% {
		-webkit-transform: rotateY(-90deg) rotateZ(90deg);
		        transform: rotateY(-90deg) rotateZ(90deg);
	}

	50% {
		-webkit-transform: rotateY(-180deg) rotateZ(90deg);
		        transform: rotateY(-180deg) rotateZ(90deg);
	}

	66% {
		-webkit-transform: rotateY(-270deg) rotateZ(90deg);
		        transform: rotateY(-270deg) rotateZ(90deg);
	}

	83% {
		-webkit-transform: rotateX(-270deg);
		        transform: rotateX(-270deg);
	}
	
}

.box-area div {
	position: absolute;
	width: 300px;
	height: 300px;
	line-height: 300px;
}

.box-area .box1 {
	background-image: url(../img/campsegundo.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: translateZ(100px);
	        transform: translateZ(100px);
}

.box-area .box2 {
	background-image: url(../img/fotoquinto.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(90deg) translateZ(100px);
	        transform: rotateY(90deg) translateZ(100px);
}

.box-area .box3 {
	background-image: url(../img/fotoprimero.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
	        transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}

.box-area .box4 {
	background-image: url(../img/camptercero.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
	        transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box5 {
	background-image: url(../img/Fotoescuela.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
	        transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box6 {
	background-image: url(../img/Fotosexto.jpg);
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateX(-90deg) translateZ(100px);
	        transform: rotateX(-90deg) translateZ(100px);
}
/*diseño para las imagenes de preferencias*/
.preferencias{

    background-color: rgb(214, 3, 186);
}
.preferencias img{
  width: 90%;
/*   margin-left: 5%;
 */}

.futuro{

    background-color:rgb(14, 0, 90);
    
    

}

.collage_v, .collage_h{

    display: none;

    width: 90%;
    margin: auto;
}

.collage_v img{

    width: 100%;
}

.collage_h img{

    width: 100%;

}

@media (orientation:landscape){

  .collage_h{
    display: block;
  }
}

@media (orientation:portrait){

  .collage_v{
      display: block;

  }
  
}

/*diseño para los botones de redes sociales*/
.buttons {
  min-width: 700px;
  display: flex;
  justify-content: space-around;
}

.buttons a {
  text-decoration: none;
  font-size: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #314652;
  color: #f1f1f1;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
  transition: all .4s ease-in-out;
}

.buttons a:hover {
  transform: scale(1.2);
}