@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700.woff2') format('woff2');
}

body {
	background-color: #5260d6;
}

#main-container {
	width: 100%;
	display: flex;
	justify-content: center;
}

main {
	width: 100%;
	max-width: 850px;
}

#intro {
	width: 100%;
	text-align: center;
	margin-top: 4%;
	font-family: 'Lato';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	container-type: inline-size;
}

#intro-logo {
	width: 85%;
	filter: drop-shadow(0px 0px 10px #ffffff);
}

#intro-text {
	margin-top: 2%;
	position: relative;
	display: inline-block;
	width: 89%;
	font-size: 2.9cqw;
	text-align: justify;
}

#features {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 5%;
	font-family: 'Lato';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	container-type: inline-size;
}

#features-gba {
	position: relative;
	width: 100%;
	margin-top: -3.5%;
	filter: drop-shadow(0px 0px 10px #000000);
	z-index: 1;
}

#features-gba-screen {
	position: absolute;
	width: 42.6%;
	left: 28.95%;
	top: 8.75%;
	z-index: 2;
}

#features-mario {
	position: absolute;
	width: 53%;
	margin-left: -10%;
	margin-top: -17%;
	z-index: 3;
}

#features-text {
	position: relative;
	width: 60%;
	margin-top: 2%;
	margin-left: 30%;
	display: inline-block;
	font-size: 2.9cqw;
	line-height: 1;
}

#features-text-title {
	margin-left: 20%;
}

#features-text-tedium {
	margin-left: 38%;
}

#features-text-start {
	margin-left: -16%;
}

#features-text-challenge {
	text-align: center;
	line-height: 1.4;
}

#download {
	width: 100%;
	text-align: center;
	margin-top: 5%;
	font-family: 'Lato';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	container-type: inline-size;
	position: relative;
}

#download-now {
	position: relative;
	width: 75%;
	transition: 0.2s;
	margin-top: -8%;
	margin-left: -26%;
	z-index: 2;
	transition: transform 0.2s ease-out;
}

#download-now:hover {
	transform: scale(1.1);
}

#download-text {
	position: absolute;
	width: 36%;
	margin-left: -68%;
	margin-top: 42%;
	display: inline-block;
	font-size: 2.9cqw;
}

#download-text a, #thanks-text a, #contact-text a {
	color: #00fffd;
	text-decoration: none;
}

#download-text a:hover, #thanks-text a:hover, #contact-text a:hover {
	text-decoration: underline;
}

#download-bowser {
	position: absolute;
	width: 58%;
	margin-left: -28%;
	margin-top: 18%;
	z-index: 1;
}

#thanks {
	width: 100%;
	text-align: center;
	font-family: 'Lato';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	margin-top: 36%;
	container-type: inline-size;
	position: relative;
}

#thanks-cartridge {
	position: absolute;
	width: 59%;
	margin-left: -47%;
	transform: rotate(-5.5deg);
}

#thanks-text {
	position: absolute;
	width: 40%;
	margin-top: 5%;
	margin-left: 7%;
	font-size: 2.9cqw;
}

#contact {
	width: 100%;
	text-align: center;
	font-family: 'Lato';
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	margin-top: 36%;
	container-type: inline-size;
	margin-bottom: 5%;
}

#contact-text {
	width: 100%;
	font-size: 2.9cqw;
}