@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

* {
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	background-color: #0f172a;
	margin: 0;
	padding: 0;
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}

.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	animation: slideDown 0.5s ease-out;
}

.nav-item {
	position: relative;
}

.nav-item::after {
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: -4px;
	height: 0.4vh;
	border-radius: 100em;
	background: linear-gradient(90deg, #ec7a40, #c26881 50%, #a231bb);
	opacity: 0;
	transform: scaleX(0);
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

@media (min-width: 768px) {
	.nav-item:hover::after {
		opacity: 1;
		transform: scaleX(1);
	}
}

.nav-item.active::after {
	opacity: 1;
	transform: scaleX(1);
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeInLeftToRight {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.landing {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	letter-spacing: 0.05em;
	font-weight: 800;
	font-style: normal;
	color: #ffffff;
	animation: fadeIn 2s ease-in-out;
}

.landing-gradient-text {
	background: linear-gradient(90deg, #ec7a40, #c26881 50%, #a231bb);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: fadeInLeftToRight 1s ease-out;
}

/* #about {
	animation: fadeIn 2s ease-in-out;
} */

#socials .container h1,
#pricing h1 {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	letter-spacing: 0.05em;
	font-weight: 800;
	font-style: normal;
	position: relative;
	text-decoration: none;
}

#socials .container h1::after,
#pricing h1::after {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: -0.8vh;
	height: 0.4vh;
	background: linear-gradient(to right, red, rgb(162, 0, 255));
}

#socials .container h1:hover {
	filter: brightness(80%);
}

.socials-a {
	background: linear-gradient(
		45deg,
		rgb(213, 0, 74),
		rgb(130, 0, 124),
		rgb(85, 0, 255)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.socials-a:hover {
	filter: brightness(50%);
}

#contact .container h1::after {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: -0.8vh;
	height: 0.4vh;
	background: linear-gradient(to right, red, rgb(162, 0, 255));
}

.gradient-text {
	background: linear-gradient(
		45deg,
		rgb(213, 0, 74),
		rgb(130, 0, 124),
		rgb(85, 0, 255)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient-btn-border {
	border: 4px solid transparent;
	border-radius: 100px;

	border-image: linear-gradient(
			45deg,
			rgb(213, 0, 74),
			rgb(130, 0, 124),
			rgb(85, 0, 255)
		)
		1;
}

.gradient-border {
	padding: 0.25em;
	background: linear-gradient(45deg, red, blue);
	position: relative;
	overflow: hidden;
}

#loading {
	position: absolute;
	width: 5vw;
	height: auto;
	align-items: center;
}

details summary::-webkit-details-marker {
	display: none;
}

details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}