:root {
	box-sizing: border-box;
	--ff: "Epilogue", sans-serif;
	--Fs__p: 18px;
	--fw: 500;
	--fw__bold: 700;
	--AlmostWhite: hsl(0, 0%, 98%);
	--MediumGray: hsl(0, 0%, 41%);
	--AlmostBlack: hsl(0, 0%, 8%);
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
body {
	font-family: var(--ff);
	background-color: var(--AlmostWhite);
}
.container {
	max-width: 1440px;
	margin: 0 auto;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
	object-fit: contain;
}
ul {
	list-style: none;
}
.nav-bar {
	padding: 1.5em 1em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2em;
}
.hamburger {
	position: relative;
	z-index: 10;
	width: 32px;
	height: 30px;
}
.menuClose,
.menuOpen {
	cursor: pointer;
	position: absolute;
}

.nav-list {
	position: fixed;
	z-index: 1;
	top: 0;
	right: -60%;
	bottom: 0;
	width: 60%;
	padding: 4em 0 0;
	background-color: var(--AlmostWhite);
}
.overlay {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* z-index: -1; */
}
.nav-item + .nav-item {
	margin-top: 0.5em;
}
.nav-link {
	display: block;
	margin: 0 1em;
	padding: 0.3em 0;
	color: var(--MediumGray);
	font-weight: 600;
}
.nav-link:hover {
	color: #000;
}
.arrow__down{
	margin-left: 0.4em;
}
/* .arrow-container {
	position: relative;
	margin-left: 0.4em;
	width: 1em;
	height: 1em;
	display: inline-block;
}
.arrow {
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
} */

.login {
	text-align: center;
}
.register {
	text-align: center;
	border: 1px solid;
	border-radius: 10px;
	padding: 0.5em 1em;
	transition: all 0.7s ease-in-out;
}
.register:hover {
	color: #000;
	border: 2px solid #000;
}

.sub-nav-list {
	margin: 0 0 1em 2em;
	display: none;
}
.sub-nav-item {
	margin-top: 1em;
}
.sub-nav-link img {
	margin-right: 0.6em;
}
/* .dropdown {
	transition: all 0.3s ease-in-out;
} */
/* .dropdown:hover .sub-nav-list {
	display: block;
} */
.arrow__down{
	transition: all .3s ease-in-out;
}
/* .dropdown:hover .arrow__down {
	transform: rotate(180deg);
} */
/* !=============================================================================================================================================================================================================================================================================================================================================================================================================== */
.hero {
	background-image: url(../images/image-hero-mobile.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 75.2%;
}
.content {
	padding: 0 1em;
	text-align: center;
	margin: 3.5em 0;
}
.content-title {
	font-size: 2rem;
	font-weight: var(--fw__bold);
	line-height: 1.5;
}
.content-description {
	line-height: 1.5;
	color: #726cee;
	max-width: 350px;
	margin: 0.7em auto 2em;
}
.cta {
	display: block;
	padding: 0.5em 1em;
	background-color: var(--AlmostBlack);
	color: var(--AlmostWhite);
	border-radius: 10px;
	width: 8em;
	margin: 1.5em auto 0;
	position: relative;
	overflow: hidden;
	border: 2px solid var(--AlmostBlack);
	transition: all 1.2s ease-in;
}
.cta::before {
	content: "";
	background-color: var(--AlmostBlack);
	border-radius: 10px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
	transition: all 1s ease-in;
}
.cta:hover {
	background-color: transparent;
	border: 2px solid var(--AlmostBlack);
	color: var(--AlmostBlack);
}
.cta:hover::before {
	content: "";
	background-color: var(--AlmostBlack);
	border-radius: 10px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 100%;
	left: 0;
}

.sponsors {
	padding: 0 1em;
	margin-bottom: 2.5em;
	display: flex;
	justify-content: space-between;
	justify-content: space-evenly;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
}
.sponsors img {
	width: 3.8em;
}
.attribution {
	font-size: 11px;
	text-align: center;
	margin: 1em 0;
}
.attribution a {
	color: hsl(228, 45%, 44%);
}
.is-active {
	opacity: 1;
	height: 100%;
}
@media (min-width: 450px) {
	.content-title {
		font-size: 2.5rem;
	}
	.content-description {
		font-size: var(--Fs__p);
		max-width: 370px;
	}
	.sponsors {
		padding: 0 2em;
	}
	.sponsors img {
		width: 5em;
	}
}
@media (min-width: 550px) {
	.hero {
		background-image: url(../images/image-hero-mobile.png);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
		background-size: auto;
		background-size: contain;
		padding-top: 50%;

	}
}

@media (min-width: 900px) {
	.container {
		display: grid;
		grid-template-rows: 15vh 85vh;
		grid-template-columns: 1fr;
	}

	.hamburger,
	.overlay {
		display: none;
	}
	.nav-bar {
		grid-row: 1;
		grid-column: 1;
		padding: 1.5em 2.5em;
		display: grid;
		grid-template-columns: 0.3fr 1.7fr;
		margin-bottom: 0;
		/* border: 1px solid; */
		/* padding: 0; */
	}
	.nav-list {
		width: 100%;
		position: static;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0;
		z-index: 10;

		/* margin-left: 3.5em; */
	}
	.nav-item + .nav-item {
		margin-top: 0em;
		/* margin-left: 2.5em; */
		margin-left: 1.5em;
	}
	.nav-link {
		display: inline-block;
		display: block;
		margin: 0;
		color: var(--MediumGray);
		font-weight: 600;
		padding: 1em 0.5em;
		/* border: 1px solid; */
	}
	.nav-item:nth-child(5) {
		margin-left: auto;
	}
	.register {
		padding: 0.5em 1.5em;
	}
	.dropdown {
		position: relative;
	}
	.sub-nav-list {
		background-color: #fff;
		padding: 1em 0;
		border-radius: 10px;
		position: absolute;
		top: 52px;
		left: 0;
		width: 7.5em;
		height: 8em;
		margin: 0;
		/* display: none; */
		/* !CHECK OUT */
		box-shadow: 8.2px 12.4px 5.5px rgba(0, 0, 0, 0.02),
		27.7px 41.5px 18.5px rgba(0, 0, 0, 0.03),
		124px 186px 83px rgba(0, 0, 0, 0.05);
	}
	.dropdown__content--1 {
		left: -37px;
		width: 9.5em;
		height: 12em;
	}
	.sub-nav-item {
		margin-top: 0em;
	}
	.sub-nav-item + .sub-nav-item {
		margin-top: 0.5em;
	}
	.sub-nav-item + .sub-nav-item {
		margin-top: 0.5em;
	}
	.sub-nav-link {
		display: block;
		font-size: 14px;
		padding: 0.5em 1.6em;
		/* color: #726cee; */
		/* border: 1px solid; */
	}
	.sub-nav-link img {
		margin-right: 0.6em;
	}
	main {
		grid-row: 2;
		grid-column: 1;
		display: grid;
		grid-template-rows: auto 2em auto;
		grid-template-columns: 0.25fr 0.85fr 0.1fr 0.85fr 0.2fr;
		align-items: center;
	}
	.hero {
		grid-column: 4;
		grid-row: 1/3;
		background-image: url(../images/image-hero-desktop.png);
		background-size: contain;
		height: 100%;
	}
	.content {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		padding: 0;
		align-self: center;
	}
	.content-title {
		font-size: 3.2rem;
		margin: 0.5em 0;
		line-height: 1;
		font-weight: var(--fw__bold);
	}
	.blockText {
		display: block;
	}
	.content-description {
		max-width: 330px;
		margin: 0;
		font-size: 14px;
	}
	.cta {
		display: block;
		padding: 0.5em 1em;
		background-color: var(--AlmostBlack);
		color: var(--AlmostWhite);
		border-radius: 10px;
		width: 8em;
		margin: 1.5em 0;
		position: relative;
		overflow: hidden;
		transition: all 1s linear;
		text-align: center;
	}
	.sponsors {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		margin: 0;
		padding: 0;
		justify-self: start;
	}
	.sponsors img {
		width: 4.5em;
		width: 3.5em;
	}
	.attribution {
		grid-row: 3;
		grid-column: 1/-1;
		align-self: end;
	}
}
@media (min-width: 1100px) {
	.sponsors img {
		width: 5em;
	}
	.nav-item + .nav-item {
		margin-top: 0em;
		margin-left: 2.5em;
	}
	.nav-item:nth-child(5) {
		margin-left: auto;
	}
	.content-title {
		font-size: 3.8rem;
		margin: 0.5em 0;
	}
	.content-description {
		/* max-width: 380px; */
		margin: 0;
		/* font-size: var(--Fs__p); */
	}
}