/* Importación de las fuentes */
@import url('https://fonts.googleapis.com/css2?family=Cardo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Shippori+Antique+B1&display=swap');
*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

/* Cuerpo */
body{
	background-image: url(../img/Ing2022-intro.png);
	background-position: center;
	background-size: cover;
	
}

/* Contenedor */
#container{
	display:flex;
	width:100vw;
	height:100vh;
	animation-name: oscurecerse;
	animation-duration: 1.5s;
	background: rgb(0,0,0,0.5);
	color:#fff;
}
/* Animación del contenedor */
@keyframes oscurecerse{
	from{background: rgb(0,0,0,0);}
	to{background: rgb(0,0,0,0.5);}
}

/* Contenedor de los elementos en el centro */
#centro{
	position: relative;left: 10vw;right:10vw;top:10vh;bottom: 10vh;
	width:80vw;
	height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	animation-name: aparecer;
	animation-duration: 1s;
}

/* Logo y título */
.flex-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Logo del león */
#logo{
	width: 180px;
}
/* Título principal */
h1{
	font-size: 62px;
	font-family: 'Montserrat', serif;
	text-align: center;
	color: #EFC300;
	font-weight: bold;
	line-height: 0.7;
}
h1 span{
	font-size: 36px;
	font-family: 'Montserrat', serif;
}

/* Título 2 */
#centro > h2{
	font-size: 36px;
	font-family: 'Playfair Display', serif;
	text-align: center;
}
/* Título 3 */
h3{
	text-align: center;
	font-family: 'Shippori Antique B1', sans-serif;
}

/* Todo lo que está en el medio */
#centro > h2, #centro > h1, #centro > a, #centro >h3, #centro >h4, #centro>.boton, .prox-container{
	margin-bottom: 30px;
}

/* Botones */
.boton {
 cursor: pointer;
 font-weight: 700;
 font-family: Helvetica,"sans-serif";
 transition: all .2s;
 padding: 10px 20px;
 border-radius: 100px;
 border: 1px solid transparent;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 15px;
 width:300px;
 height: 7vh;
}

.boton > img {
	width: 15%;
}

.boton > svg {
 width: 34px;
 margin-left: 10px;
 transition: transform .3s ease-in-out;
}

.boton:hover svg {
 transform: translateX(5px);
}

.boton:active {
 transform: scale(0.95);
}
a{
	text-decoration: none;
}

/* Primer boton */
 .prox-container {
	position: relative;
  }
  
  #proximamente {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(50, 50, 50, 0.7);
	padding: 5px 10px;
	border-radius: 5px;
	z-index: 2;
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-items: center;
  }
  #sitio-web {
	position: relative;
	z-index: 1;
  }
 #conocenos{
	background: #cfef00;
 }
 #conocenos:hover {
 	background: #a6c900;
}

/* Segundo botón */
#redes-sociales{
	background: #12DFFF;
}
#redes-sociales:hover{
	background: #0EB0C9;
}



/* Boton de Instagram */
#instagram{
	background: #FF0500;
}
#instagram:hover{
	background: #C50500;
}

/* Botones ocultos */
.oculto{
	display: none !important;
}

/* Botón de tutorías */
#tutorias{
	background: #00CC31;
}
#tutorias:hover{
	background: #009C24;
}

/* Botón de Repositorio */
#rep{
	background: #4285F4;
}
#rep:hover{
	background: #425FF4;
}

/* Último botón */
#crear{
	background: #FFDB00;
}
#crear:hover{
	background: #C9AF00;
}

/* Animación del centro */
@keyframes aparecer{
	from{
		position:relative;
		top:25vh;
		visibility: hidden;
	}
	to{
		position: relative;
		top:10vh;
		visibility: visible;
	}
}

/* Resposive design */
@media only screen and (max-width: 349px){
	h1{
		font-size: 48px;
	}
}