@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotateAndScale {
	0% {
		transform: rotate(0deg) scale(1);
	}
	25% {
		transform: rotate(90deg) scale(1.05);
	}
	50% {
		transform: rotate(180deg) scale(1.1);
	}
	75% {
		transform: rotate(270deg) scale(1.05);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}

html {
	background: var(--background);
	color: var(--color);
	font-family: Lexend Deca;
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 132px 32px 32px 32px;
	min-height: calc(100vh - 164px);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--color);
	font-family: Lexend Deca;
}

a {
	text-decoration: none;
}

.buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 10px;
	align-self: stretch;
	flex-wrap: wrap;
}

.button {
	display: flex;
	padding: 7.5px 15px;
	justify-content: center;
	align-items: center;
	gap: 6px;
	border-radius: 1000px;
	background: var(--primary);
	box-shadow: var(--shadow-primary);
	transition: 0.25s;

	i {
		transition: 0.25s;
	}
}

.button:hover {
	background: var(--secondary);
	box-shadow: var(--shadow-secondary);
	color: var(--background);
	transition: 0.25s;

	i {
		color: var(--background);
		transition: 0.25s;
	}
}

.button:active {
	border-color: transparent;
	transition: 0.25s;
}

.button.pill {
	padding: 15px 20px;
}

.button.pill:not(.regular):not(.border) {
	background: var(--secondary);
	box-shadow: var(--shadow-secondary);
	color: var(--background);
	border-radius: 10px;

	i {
		color: var(--background);
	}
}

.button.pill:not(.regular):not(.border):hover {
	opacity: 0.75;
}

.button.regular {
	background: var(--card);
	box-shadow: none;
	transition: 0.25s;
}

.button.regular:hover {
	background: var(--primary);
	color: var(--color);
	box-shadow: var(--shadow-primary);
	transition: 0.25s;

	i {
		color: var(--color);
		transition: 0.25s;
	}
}

.button.border {
	border: 1px solid var(--primary);
	background: var(--card);
	box-shadow: none;
	transition: 0.25s;
}

.button.border:hover {
	background: var(--primary);
	color: var(--color);
	transition: 0.25s;

	i {
		color: var(--color);
		transition: 0.25s;
	}
}

.group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: -webkit-fill-available;
}

.group.gap {
	gap: 15px;
}

.group.center {
	justify-content: center;
	align-items: center;
	text-align: center;

	.buttons {
		justify-content: center;
	}
}

.group.left {
	justify-content: left !important;
	align-items: flex-start !important;
	text-align: left !important;

	.buttons {
		justify-content: flex-start !important;
	}
}

.group.right {
	justify-content: right !important;
	align-items: flex-end !important;
	text-align: right !important;

	.buttons {
		justify-content: flex-end !important;
	}
}

h1,
h2,
h3 {
	background: var(--rtl);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1.center,
h2.center,
h3.center {
	text-align: center;
	width: -webkit-fill-available;
}

h1.left,
h2.left,
h3.left {
	text-align: left;
}

h1.right,
h2.right,
h3.right {
	text-align: right;
}

h1 {
	font-size: 55px;
	font-weight: 600;
}

h2 {
	font-size: 50px;
	font-weight: 500;
}

h3 {
	font-size: 30px;
	font-weight: 500;
}

p {
	font-size: 18px;
	font-weight: 400;
	overflow-wrap: anywhere;
}

img:not(.spotlight) {
	border-radius: 100%;
}

.alert {
	display: flex;
	width: 100vw;
	padding: 6.5px 10px;
	justify-content: center;
	align-items: center;
	gap: 5px;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--rtl);
	font-size: 14px;
	font-weight: 500;
	z-index: 100;
}

.spotlight {
	width: min(50vw, 805px);
	height: min(50vh, 608px);
	position: absolute;
	top: 0;
	z-index: -1;
}

.spotlight.left {
	left: 0;
}

.spotlight.right {
	right: 0;
	transform: scaleX(-1);
}

.header {
	display: flex;
	padding: 6.5px 12px 6.5px 6.5px;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
	position: fixed;
	top: 60px;
	border-radius: 1000px;
	border: 1px solid var(--border);
	background: var(--header), var(--background);
	box-shadow: var(--shadow-border);
	z-index: 100;
	max-height: 100vh;
	max-width: 100vw;
	overflow: hidden;
	transition: 0.5s;

	.logo {
		display: flex;
		align-items: center;

		img {
			height: 50px;
			width: 50px;
		}
	}

	.link {
		font-size: 16px;
		font-weight: 500;
		width: max-content;
		min-width: max-content;
		transition: 0.25s;

		i {
			transition: 0.25s;
		}
	}

	.link:hover {
		color: var(--secondary);
		transition: 0.25s;

		i {
			color: var(--secondary);
			transition: 0.25s;
		}
	}

	.button {
		width: max-content;
		min-width: max-content;
	}
}

.header.scrolled {
	max-width: 65px;
	padding-right: 6.5px;
	animation: rotateAndScale 5s linear infinite 0.5s;
	transition: 0.5s;
}

main {
	display: flex;
	padding: 32px min(10%, 130.4px);
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: min(20vw, 100px);
}

.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 25px;
	align-self: center;
	min-height: 500px;
	max-width: min(100%, 600px);

	img {
		height: min(90vw, 250px);
		width: min(90vw, 250px);
	}

	img.loaded {
		animation: rotate 5s linear infinite 1s;
	}

	.group {
		max-width: min(100%, 600px);
	}
}

.section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	gap: 15px 25px;
	align-self: stretch;

	.group {
		max-width: 750px;
	}
}

.section.center {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;

	.group {
		justify-content: center;
		align-items: center;
		text-align: center;
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-content: center;
	align-self: stretch;
	gap: 25px;

	.item {
		display: flex;
		padding: 25px;
		flex-direction: column;
		align-items: flex-start;
		gap: 25px;
		border-radius: 10px;
		border: 1px solid var(--primary-tinted);
		background: var(--card);
		box-shadow: var(--shadow-border);
		transition: 0.25s;

		img {
			animation: rotate 5s linear infinite;
			animation-play-state: paused;
		}

		audio {
			opacity: 0;
			user-select: none;
			pointer-events: none;
			position: fixed;
		}

		[data-as] {
			margin-top: -5px;
		}
	}

	.item:hover {
		border-color: var(--secondary);
		box-shadow: var(--shadow-secondary);
		margin-top: -5px;
		margin-bottom: 5px;
		transition: 0.25s;
	}

	.item.playing img {
		animation-play-state: running;
	}
}

.footer {
	display: flex;
	padding: 50px 25px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 25px;
	align-self: stretch;
	min-width: 300px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--card);
	box-shadow: var(--shadow-border);
	margin-top: min(10vw, 100px);

	.logo {
		width: 150px;
	}

	.group {
		max-width: 750px;
	}
}

@media screen and (max-width: 750px) {
	h1 {
		font-size: 40px;
		line-height: 50px;
	}

	h2 {
		font-size: 35px;
		line-height: 35px;
	}

	h3 {
		font-size: 25px;
		line-height: 40px;
	}

	.header {
		flex-direction: column;
		border-radius: 25px;
		padding: 6.5px;
	}

	.header.scrolled {
		max-width: 65px;
		max-height: 65px;
		border-radius: 40px;
	}

	.header.scrolling {
		animation: none;
	}

	main {
		padding: 32px 0px;
	}

	.section {
		flex-direction: column;

		h2 {
			text-align: center;
			width: -webkit-fill-available;
		}

		.group:first-child {
			margin-bottom: 10px;
		}

		.group.left.gap {
			justify-content: center !important;
			align-items: center !important;
			text-align: center !important;

			.buttons {
				justify-content: center !important;
			}
		}
	}

	.grid .item {
		gap: 20px;

		.group {
			gap: 0px;
		}
	}

	.footer p {
		font-size: 16px;
	}
}