body {
	background-image: url("../_shared/assets/shit.svg");
	background-repeat: no-repeat;
	background-size: 93.3vw 100vh;
	background-position-x: 3.3vw;
}

header {
	--margin: 1rem;

	width: 100%;
	height: 7.5vh;

	display: flex;
	align-items: center;

	margin-top: var(--margin);
}

.link {
	display: block;

	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	width: 70px;
	height: 100%;

	margin-left: var(--margin);

	filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));

	opacity: 0.8;

	transition: all 150ms var(--t-f);
}

.link:hover {
	opacity: 0.5;
	transform: scale(0.95);
}

#discord {
	background-image: url("../assets//Discord/Discord-Symbol-White.svg");
}
#twitter {
	background-image: url("../assets/x/logo.svg");

	background-size: 53px;
}
#tapas {
	position: relative;
}
#tapas::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url("../assets/tapas.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90px;

	filter: brightness(0) invert(1) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));

	z-index: 99;
}

main {
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.box {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	color: #e0e0e0;

	width: 250px;
	height: 150px;

	display: flex;
	justify-content: center;
	align-items: center;

	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;

	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

	position: relative;
	overflow: hidden;

	cursor: pointer;

	transition: all 300ms var(--t-f);
}

#fan:hover {
	--theme-c: #fbbf24;
}
#main:hover {
	--theme-c: #f1f1f1;
}
#lore:hover {
	--theme-c: #3ade80;
}

.box:hover {
	transform: translateY(-5px) scale(1.05);

	background: rgba(255, 255, 255, 0.05);

	color: var(--theme-c);
	border-color: var(--theme-c);

	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
	text-shadow: 0 0 15px var(--theme-c);
}