@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
	scrollbar-width: auto;
	scrollbar-color: #059c60 #000900;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 10px;
}

*::-webkit-scrollbar-track {
	background: #000900;
}

*::-webkit-scrollbar-thumb {
	background-color: #059c60;
	border-radius: 5px;
	border: 0px none #ffffff;
}

:focus-visible {
	outline: 3px solid var(--color-focus) !important;
	border-radius: 1em !important;
}

:root {
	--color-primary: #059c60;
	--color-secondary: #7ff9b6;
	--color-dark: #000900;
	--color-neon-green: #2bcb3b;
	--color-white: #fafafa;
	--color-focus: #9dffd2;
	--font-size-extrasuperultrasmall: clamp(0.35rem, calc(0.28rem + 0.33vw), 0.96rem);
	--font-size-omegasmall: clamp(0.42rem, calc(0.33rem + 0.42vw), 1.2rem);
	--font-size-ultrasmall: clamp(0.5rem, calc(0.39rem + 0.54vw), 1.5rem);
	--font-size-xxxs: clamp(0.6rem, calc(0.47rem + 0.69vw), 1.87rem);
	--font-size-xxs: clamp(0.72rem, calc(0.55rem + 0.88vw), 2.34rem);
	--font-size-xs: clamp(0.87rem, calc(0.64rem + 1.22vw), 2.92rem);
	--font-size-sm: clamp(1.04rem, calc(0.76rem + 1.42vw), 3.65rem);
	--font-size-base: clamp(1.5rem, calc(1.04rem + 2.29vw), 5.7rem);
	--font-size-md: clamp(2.16rem, calc(1.42rem + 3.68vw), 8.91rem);
	--font-size-lg: clamp(2.59rem, calc(1.66rem + 4.66vw), 11.14rem);
	--font-size-xl: clamp(3.11rem, calc(1.93rem + 5.89vw), 13.92rem);
	--font-size-xxl: clamp(3.73rem, calc(2.24rem + 7.45vw), 17.4rem);
}
@media (min-width: 2500px) {
	:root {
		--font-size-extrasuperultrasmall: clamp(0.42rem, calc(0.33rem + 0.42vw), 1.2rem);
		--font-size-omegasmall: clamp(0.5rem, calc(0.39rem + 0.54vw), 1.5rem);
		--font-size-ultrasmall: clamp(0.6rem, calc(0.47rem + 0.69vw), 1.87rem);
		--font-size-xxxs: clamp(0.72rem, calc(0.55rem + 0.88vw), 2.34rem);
		--font-size-xxs: clamp(0.87rem, calc(0.64rem + 1.12vw), 2.92rem);
		--font-size-xs: clamp(1.04rem, calc(0.76rem + 1.72vw), 3.65rem);
		--font-size-sm: clamp(1.5rem, calc(1.04rem + 2.29vw), 5.7rem);
		--font-size-base: clamp(2.16rem, calc(1.42rem + 3.68vw), 8.91rem);
		--font-size-md: clamp(2.59rem, calc(1.66rem + 4.66vw), 11.14rem);
		--font-size-lg: clamp(3.11rem, calc(1.93rem + 5.89vw), 13.92rem);
		--font-size-xl: clamp(3.73rem, calc(2.24rem + 7.45vw), 17.4rem);
		--font-size-xxl: clamp(4.48rem, calc(2.6rem + 9.42vw), 21.76rem);
	}
}
@media (max-width: 1000px) {
	:root {
		--font-size-extrasuperultrasmall: clamp(0.3rem, calc(0.19rem), 0.6rem);
		--font-size-omegasmall: clamp(0.36rem, calc(0.26rem + 0.3vw), 0.9rem);
		--font-size-ultrasmall: clamp(0.42rem, calc(0.33rem + 0.42vw), 1.2rem);
		--font-size-xxxs: clamp(0.5rem, calc(0.39rem + 3.54vw), 1.5rem);
		--font-size-xxs: clamp(0.6rem, calc(0.47rem + 1.69vw), 1.87rem);
		--font-size-xs: clamp(0.72rem, calc(0.55rem + 2.38vw), 2.34rem);
		--font-size-sm: clamp(0.87rem, calc(0.64rem + 3.12vw), 2.92rem);
		--font-size-base: clamp(1.04rem, calc(0.76rem + 1.42vw), 3.65rem);
		--font-size-md: clamp(1.5rem, calc(1.04rem + 5.29vw), 5.7rem);
		--font-size-lg: clamp(2.16rem, calc(1.42rem + 10.68vw), 8.91rem);
		--font-size-xl: clamp(2.59rem, calc(1.66rem + 4.66vw), 11.14rem);
		--font-size-xxl: clamp(3.11rem, calc(1.93rem + 5.89vw), 13.92rem);
	}
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	width: 100%;
	background-color: hsl(120deg, 100%, 2%);
	color: var(--color-primary);
	font-family: "Oswald";
	font-size: var(--font-size-xxxs);
	overflow-x: hidden;
}

a {
	color: currentColor;
	text-decoration: unset;
}

.desktop-nav {
	position: fixed;
	justify-content: space-evenly;
	width: 100%;
	height: 10vh;
	align-content: center;
	z-index: 100;
	background: transparent;
	border-radius: 0 0 1em 1em;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: all 0.3s ease-in-out;
	text-align: center;
}
.desktop-nav figure {
	position: relative;
}
.desktop-nav figure img {
	height: 160%;
	-o-object-fit: contain;
	object-fit: contain;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}
.desktop-nav figure img:hover {
	transform: scale(1.2);
}
.desktop-nav figure::after {
	content: "";
	background-color: var(--color-primary);
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	width: 160%;
	height: 180%;
	position: absolute;
	transform: rotate(180deg);
	top: -50%;
	left: 50%;
	translate: -50% 0;
	z-index: -1;
}
.desktop-nav div {
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8);
	display: flex;
	display: -webkit-flex;
	gap: 4vw;
	align-items: center;
	color: #7ff9b6;
}
.desktop-nav div span > a {
	color: var(--color-white);
	background-color: var(--color-primary);
	padding: 1vh 2vw;
	transition: all 0.1s ease-in;
	border-radius: 10px;
}
.desktop-nav div span > a:hover {
	background-color: var(--color-neon-green);
	filter: brightness(1.5);
}

.mobile-nav {
	position: relative;
	width: 100%;
	height: 100%;
}
.mobile-nav #hamburger-icon {
	background: transparent;
	position: fixed;
	height: 8%;
	top: 4vw;
	z-index: 101;
	right: 4vw;
	transform: rotate(0deg);
	transition: all 5.5s ease-in-out;
	cursor: pointer;
}
.mobile-nav .mobile-nav__content {
	background-color: var(--color-dark);
	position: fixed;
	top: 0;
	left: -200vw;
	overflow: hidden;
	z-index: 100;
	height: 100%;
	width: 100%;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	align-items: center;
	gap: 6vh;
	padding: 10vh 1vw;
	transition: all 0.4s ease-in-out;
}
.mobile-nav .mobile-nav__content #mobile-nav__logo {
	height: 15vh;
}
.mobile-nav .mobile-nav__content .mobile-nav__links {
	color: var(--color-primary);
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	font-size: var(--font-size-sm);
	text-align: center;
	gap: 4vh;
}
.mobile-nav .mobile-nav__content .mobile-nav__links #mobile-nav__bgs {
	background-color: var(--color-primary);
	color: var(--color-neon-green);
	border-radius: 1em;
	padding: 1.5vh 5vw;
}
.mobile-nav .mobile-nav__content .mobile-nav__socials {
	display: flex;
	display: -webkit-flex;
	margin: 5vh 0;
	gap: 3vw;
	flex-wrap: wrap;
	justify-content: center;
}
.mobile-nav .mobile-nav__content .mobile-nav__socials img {
	height: 5vh;
	width: 5vh;
}

@media (min-width: 1000px) {
	.desktop-nav {
		display: flex;
		display: -webkit-flex;
		visibility: visible;
	}
	.mobile-nav {
		visibility: hidden;
		display: none;
	}
}
@media (max-width: 1001px) {
	.desktop-nav {
		display: none;
		visibility: hidden;
	}
	.mobile-nav {
		display: flex;
		display: -webkit-flex;
		visibility: visible;
	}
}
.hover-underline-animation:not(#cta) {
	position: relative;
}

.hover-underline-animation:not(#cta)::after {
	content: "";
	position: absolute;
	width: 110%;
	transform: scaleX(0);
	height: 0.3vh;
	bottom: -0.2vh;
	left: -5%;
	background-color: currentColor;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:not(#cta)::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

header {
	display: flex;
	display: -webkit-flex;
	gap: 7vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: url(../img/header-triangle.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	text-align: center;
}
header h1 {
	font-size: var(--font-size-lg);
	line-height: 1;
	text-shadow: 0px 4px 8px rgb(0, 0, 0);
}
header h1 span {
	color: var(--color-white);
}
header p {
	color: var(--color-white);
	font-size: var(--font-size-xxxs);
	width: min(90%, 75vw);
	font-weight: 200;
	word-spacing: 3px;
}
header p span {
	color: var(--color-secondary);
}
header a {
	color: var(--color-white);
	background-color: var(--color-primary);
	padding: 1vh 2vw;
	transition: all 0.1s ease-in;
	border-radius: 10px;
}