@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;
}
body{
	background-image: url(../img/DSC_0943.JPG);
	background-position: center;
	background-size: cover;
	overflow:hidden;
}
#container{
	width:100vw;
	height:100vh;
	animation-name: oscurecerse;
	animation-duration: 1.5s;
	background: rgb(0,0,0,0.5);
	color:#fff;
}
@keyframes oscurecerse{
	from{background: rgb(0,0,0,0);}
	to{background: rgb(0,0,0,0.5);}
}
#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;
}
h1{
	font-size: 62px;
	font-family: 'Shippori Antique B1', sans-serif;
	text-align: center;
}
#centro > p{
	font-size: 36px;
	font-family: 'Playfair Display', serif;
	text-align: center;
}
#centro > p, #centro > h1, #centro > a{
	margin-bottom: 50px;
}
/* From uiverse.io by @Jedi-hongbin */
.atras {
 display: flex;
 height: 3em;
 width: 100px;
 align-items: center;
 justify-content: center;
 background-color: #eeeeee4b;
 border-radius: 3px;
 letter-spacing: 1px;
 transition: all 0.2s linear;
 cursor: pointer;
 border: none;
 background: #fff;
}

.atras > svg {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 transition: all 0.4s ease-in;
}

.atras:hover > svg {
 font-size: 1.2em;
 transform: translateX(-5px);
}

.atras:hover {
 box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
 transform: translateY(-2px);
}
/* From uiverse.io by @alexmaracinaru */
.next {
 cursor: pointer;
 font-weight: 700;
 font-family: Helvetica,"sans-serif";
 transition: all .2s;
 padding: 10px 20px;
 border-radius: 100px;
 background: #cfef00;
 border: 1px solid transparent;
 display: flex;
 align-items: center;
 font-size: 15px;
}

.next:hover {
 background: #a6c900;
}

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

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

.next:active {
 transform: scale(0.95);
}
a{
	text-decoration: none;
}
@keyframes aparecer{
	from{
		position:relative;
		top:25vh;
		visibility: hidden;
	}
	to{
		position: relative;
		top:10vh;
		visibility: visible;
	}
}
@media only screen and (max-width: 349px){
	h1{
		font-size: 48px;
	}
}