@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Old Standard TT", sans-serif;
}
body{
	background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)),url(media/Cover2.jpg);	
	background-position: center;
	background-size: cover;

	color: #fff;
}
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px 10%;
	background: transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
	text-shadow: 3px 3px 6px #131723;
}
.logo{
	font-size: 26px;
	color: gold;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
	animation: slideRight 1s ease forwards;
	opacity: 0;
}
.navbar a{
	font-family: "montserrat",san-serif;
	font-size: 16px;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 3px 3px 6px navy;
	font-weight: 600;
	margin-left: 35px;
	animation: slideTop .5s ease forwards;
	opacity: 0;
	animation-delay: calc(.2s*var(--clr));
}
.navbar a:hover{
	color: gold;
	text-shadow: 3px 3px 6px navy;
	
	transition: .2s ease;
}
.navbar a.active{
	color: gold;
	text-shadow: 3px 3px 6px navy;
}
.home{
	position: relative;	
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 70px 10% 0;
}
.home .home-detail{
	max-width: 600px;
}
.home-detail h3{
	font-size: 32px;
	font-weight: 700;
	animation: slideBottom 1s ease forwards;
	opacity: 0;
	animation-delay: .7s;
	text-shadow: 3px 3px 6px navy;
}
.home-detail h3:nth-of-type(2){
	margin-bottom: 5px;
	animation: slideTop 1s ease forwards;
	animation-delay: 2s;
	opactiy: 0;
}
span{
	color: gold;
}

span2{
	color: #fff;
	font-family: "poppins",san-serif;
}

.home-detail h1{
	font-size: 56px;
	font-weight: 800;
	margin: -3px 0;
	animation: slideRight 1s ease forwards;
	animation-delay: 1s;
	opactiy: 0;
	text-shadow: 3px 3px 6px navy;
}
.home-detail p{
	margin-top: 10px;
	font-family: "poppins",san-serif;
	font-size: 18px;
	font-weight: 595;
	animation: slideLeft 1s ease forwards;
	animation-delay: 1s;
	opacity: 0;
	text-shadow: 3px 3px 2px #131723;
}

.home-detail p i{
	margin-top: 10px;
	font-family: "Cormorant Garamond",san-serif;
	font-size: 21px;
	font-weight: 600;
	animation: slideLeft 1s ease forwards;
	animation-delay: 1s;
	opacity: 0;
}


.home-detail .social-media a{
	display: inline-flex;
	width: 40px;
	height: 40px;
	border: 2px solid gold;
	border-radius: 50%;
	color: gold;
	background: transparent;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	margin: 30px 15px 30px 0;
	transition: .5s ease;
	font-size: 30px;
	animation: slideLeft 1s ease forwards;
	animation-delay: calc(.2s*var(--vlr));
	opactiy: 0;
}
.social-media a:hover{
	background: gold;
	color: #131723;
	box-shadow: 0 0 20px gold;
}
.btn{
	display: inline-block;
	padding: 12px 28px;
	background: gold;
	color: #131723;
	border: none;
	outline: none;
	border-radius: 40px;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1px;
	transition: .5s ease;
	animation: Zoom 1s ease forwards;
	animation-delay: 2s;
	opactiy: 0;
	border: 2px solid yellow;
	}
.btn:hover{
	background: #131723;
	color: gold;	
	border: 2px solid gold;
	box-shadow: 0 0 15px gold;
	cursor: pointer;
	transition: .1s ease;
}
img{
	width: 300px;
	margin-right: -15px;
	border: 1px solid gold;
	
	box-shadow: 2px 4px 30px gold;
	animation: Zoom 2s ease forwards;
	animation-delay: 1s;
	opactiy: 0;
}
@keyframes slideRight{
	0%{
		transform: translateX(-100px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideTop{
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideBottom{
	0%{
		transform: translateY(-100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideLeft{
	0%{
		transform: translateX(100px);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes Zoom{
	0%{
		transform: scale(0);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}