:root {
	--red: #c6706eff;
	--light-red: #dca4a3ff;
	--dark-red: #b7564fff;
	--olive: #b5b09aff;
	--green-1: #869054ff;
	--green-2: #9b9a68ff;
	--golden-1: #b9a662ff;
	--beige-1: #fcebb3ff;
	--brown-1: #91611fff;
	--black-1: #2b2a00ff;
	--black-2: #40391fff;
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	background-color: var(--light-red);
	scroll-behavior: smooth;
}

p {
	margin: 0;
	margin-button: 16px;
	font-family: 'poppins-light';
	color: var(--dark-red);
}

a {
	display: flex;
	font-family: 'poppins-light';
	font-size: 24px;
	margin: 0;
	color: var(--light-red);
	transition: color 0.5s ease-in-out;
	text-decoration: none;
}

a:hover {
	color: white;
	transition: color 0.5s ease-in-out;
}

.btn {
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--dark-red);
	transition: 'background' 0.5s ease-in-out;
}

.btn:hover {
	background: var(--red);
	transition: 'background' 0.5s ease-in-out;
}

.btn:active {
	background: var(--light-red);
	transition: 'background' 0.5s ease-in-out;
}

h1 {
	text-align: center;
	font-family: 'prata';
	font-size: 64px;
	color: var(--dark-red);
	margin: 0;
	padding: 32px;
}

main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100vh;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.image-section {
	width: 100%;
	height: 100%;
}

.image {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	opacity: 0.7;
	transition: opacity 0.5s ease-in-out;
}

.image:hover {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

@keyframes scroll {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(8px);
	}

	100% {
		transform: translateY(0);
	}
}

.arrow {
	animation-name: scroll;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.scroll {
	display: none;
	width: 64px;
}

.additional-infos {
	text-align: center;
	margin-top: 16px;
}

@media (max-width: 768px) {
	h1 {
		font-size: 32px;
	}

	main {
		display: grid;
		grid-template-columns: 1fr;
	}

	.image-section {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.scroll {
		display: block;
		position: absolute;
		z-index: 1;
		bottom: 64px;
	}

	.image {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	.text-section {
		height: 100vh;
	}
}