:root {
	--imperial-red: #e63946ff;
	--honeydew: #f1faeeff;
	--powder-blue: #a8dadcff;
	--celadon-blue: #457b9dff;
	--prussian-blue: #1d3557ff;
}


#image-1 {
	grid-area: 2 / 3 / span 4 / span 4;
	height: 80vh;
	border-radius: 6px;
	filter: drop-shadow(30px 10px 4px #1B2637);
}


#span-1 {
	grid-area: 3 / 10 / span 3 / span 6;
	font-size: 14vh;
	color: var(--imperial-red);
}


#span-2 {
	grid-area: 3 / 10 / span 1 / span 4;
	font-family: sans-serif;
	font-size: 20px;
}


#span-3 {
	grid-area: 6 / 11 / span 2 / span 6;
	font-size: 90px;
}


#span-4 {
	grid-area: 15 / 1 / span 6 / span 16;
	background-color: #1B2637;
	font-size: 100px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}


#span-5 {
	border-radius: 10px;
	grid-area: 30 / 1 / span 3 / span 11;
	background-color: var(--imperial-red);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 35px;
	width: 68.75vw;
}


#span-6 {
	border-radius: 10px;
	grid-area: 40 / 6 / span 3 / span 11;
	background-color: #EE7744;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 35px;
	width: 68.75vw;
}


#span-8 {
	grid-area: 48 / 1 / span 3 / span 16;
	background-color: #1B2637;
	line-height: 30vh;
	font-size: 46px;
	text-align: center;
	font-family: sans-serif;
	text-decoration: underline;
	cursor: pointer;
}


html, body {
	margin: 0;
	background-color: var(--prussian-blue);
	font-family: georgia;
	color: var(--honeydew);
}


body {
	display: grid;
	grid-template-columns: repeat(16, 6.25vw);
	grid-template-rows: repeat(50, 10vh);
}


html::-webkit-scrollbar {
	display: none;
}


/* animations */

@keyframes zoomin {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}