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


header {
	--margin: 1rem;

	flex: 0.075;

	display: flex;
	align-items: center;

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

	position: relative;

	/* outline: 1px solid green; */
}

/* header > *::after {
	content: "";

	--size: 3.8rem;

	width: var(--size);
	height: var(--size);

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

	outline: 1px solid red;
} */

.link {
	display: block;

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

	width: 3.8rem;
	height: 100%;

	margin-left: var(--margin);

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

	opacity: 0.5;

	transition: all 150ms var(--func-cb);
}

.link:hover {
	opacity: 0.8;
	transform: scale(1.05);

	border: 1px dashed #e0e0e0;
}

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

#twitter {
	background-image: url("../_shared/assets/x/logo.svg");
}

#tapas {
	background-image: url("../_shared/assets/tapas.svg");

	background-size: 125%;
}

#mangaplus-creators {
	background-image: url("../_shared/assets/mangaplus-creators-2.svg");

	background-size: 160%;
	background-repeat: repeat-y;
	border-radius: 12px;
}

#webtoon {
	background-image: url("../_shared/assets/webtoon.svg");
}

#globalcomix {
	background-image: url("../_shared/assets/globalcomix.svg");
}

#tiktok {
	background-image: url("../_shared/assets/Tiktok/TIKTOK_SIMPLIFIED_NOTE/SVG/TIKTOK_SIMPLIFIED_NOTE_WHITE.svg");

	background-size: 150%;
}

main {
	flex: 1;

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

.box {
	color: #e0e0e0;

	width: 15.6rem;
	height: 9.4rem;

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

	border-radius: 12px;

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

	overflow: hidden;

	cursor: pointer;

	transition: all 300ms var(--func-cb);
}

.box:hover {
	--theme-c: #f1f1f1;
}
#fan:hover {
	--theme-c: #fbbf24;
}
#lore:hover {
	/* #f4ebe1 */
	/* 3c2a21 */
	--theme-c: #ffb38d;
}

.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);
}


@media (max-width: 1000px) {
	header {
		flex: 0.05;
	}

	header::after {
		content: "";

		position: absolute;
		bottom: -1rem; left: 0;

		background-color: #fff;

		opacity: 0.5;

		width: 100dvw;
		height: 0.1rem;
	}

	main {
		flex-direction: column;
		gap: 1rem;
		flex: 0.9;
	}
}