h2 {
	font-size: 36px;
}
h3 {
	font-size: 20px;
}
.tags a {
	font-size: 12px;
}

.desc {
	font-size: 16px;
}

.menu {
	display: flex;
}

header .container {
	position: relative;
}

.nav-container {
	flex-direction: column;
	z-index: 10;
	position: absolute;
	color: #fff;
	background-color: hwb(0 13% 87% / 0.9);
	/* background-color: var(--dark); */
	opacity: 0;
	top: -800px;
	right: 0;
	left: 0;
	padding: 1rem 0;
	height: 600px;
	overflow-y: auto;

	transition: all 0.3s ease-in;
	transition: opacity 0.4s ease-in;
}

.show {
	top: 140px;
	bottom: 0;
	opacity: 1;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.top-nav,
.bottom-nav {
	flex-direction: column;
	flex-wrap: wrap;
}
.top-nav {
	border-bottom: none;
}
.nav-container li:last-child {
	padding: 1rem 2rem;
}
.nav-container li a:hover {
	background-color: white;
	color: black;
	padding: 5px 8px;
}

/* HERO */

.hero-section {
	height: calc(100vh - 140px);
}

.banner {
	/* height: 480px; */
	height: 95%;
	padding: 2rem;
}

.banner h1 {
	font-size: 52px;
}

/* LATEST NEWS */
.cards-container {
	gap: 1rem;
}

/* FOOTER */
.footer-container {
	flex-direction: column;
}

.footer-desc {
	width: 100%;
}

.links-and-socials {
	align-items: center;
}

.footer-links {
	width: 100%;
}