@font-face {
	font-family: "greatvibes";
	src: url("myFont.woff2");
}

@keyframes wait {
    0% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body {
	margin: 0;
}

.fade-in.ord-1 {
	animation: wait 500ms, fadeIn 1s 500ms;
}

.fade-in.ord-2 {
	animation: wait 1000ms, fadeIn 1s 1000ms;
}

.fade-in.ord-3 {
	animation: wait 1500ms, fadeIn 1s 1500ms;
}

.fade-in.ord-4 {
	animation: wait 2500ms, fadeIn 1s 2500ms;
}

.background {
	position: fixed;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: row;
	justify-content: center;
	z-index: -1;

	background: linear-gradient(rgba(177, 172, 154, 1) 0%, rgba(218, 132, 78, 1) 28%, rgba(167, 160, 146, 1) 40%, rgba(71, 69, 37, 1) 100%);

	.shadow {
		flex: 0 1;
		mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	}

	img {
		height: 100%;
	}
}

main {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	h1 {
		color: #ffffff;
		font-family: "Montserrat", sans-serif;
		text-align: center;
		font-size: 188px;
		margin: 0;
	}

	p {
		color: #ffffff;
		font-size: 33px;
		font-family: "Montserrat", sans-serif;
		margin: 0;
	}

	.main-content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		scroll-snap-align: start;
		flex-shrink: 0;
		h1,p {
			font-family: "Great Vibes", cursive;
		}
	}

	.supplementary-content {
		height: 100vh;
		scroll-snap-align: start;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;

		*:last-child {
			margin-bottom: 200px;
		}
	}
}

@media (max-width: 1000px) {
	main h1 {
		font-size: 144px;
	}
}

@media (max-width: 720px) {
	main h1 {
		font-size: 96px;
	}
}