/* I am not very fond of CSS */
@font-face {
	font-family: "Inter";
	src: url("fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	color-scheme: dark;
	--bg-overlay-color: radial-gradient(circle at top left, rgba(60, 60, 60, 0.35), rgba(15, 15, 15, 0.85));
	--card-bg: rgba(21, 21, 21, 0.82);
	--card-border: rgba(126, 248, 222, 0.2);
	--body-color: #f2f2f2;
	--muted: rgba(183, 183, 183, 0.7);
	--accent: #1eddb8;
	--accent-soft: rgba(30, 221, 184, 0.18);
	--capsule-border: rgba(255, 255, 255, 0.08);
	--capsule-shadow: 0 18px 35px rgba(15, 15, 15, 0.65);
	--blur-amount: 16px;
	--viewport-height: 100vh;
}

@supports (height: 100svh) {
	:root {
		--viewport-height: 100svh;
	}
}

@supports (height: 100dvh) {
	:root {
		--viewport-height: 100dvh;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
}

body {
	font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	color: var(--body-color);
	background: var(--bg-overlay-color), url("media/nautilus_background.jpg") center / cover fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(16px, 2vh, 24px);
	min-height: var(--viewport-height);
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--accent);
}

#main_card {
	width: min(1550px, 92vw);
	padding: clamp(28px, 3vw, 40px);
	border-radius: 18px;
	background: var(--card-bg);
	backdrop-filter: blur(var(--blur-amount));
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2.5vh, 28px);
	box-shadow: 0 35px 80px rgba(5, 9, 17, 0.55);
	margin-block: auto;
}

#main_card h1 {
	font-size: clamp(40px, 4vw, 56px);
	letter-spacing: -0.02em;
	margin: 0;
}

#main_card h2 {
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 500;
	margin: 0;
	color: var(--muted);
}

.separator {
	color: rgba(255, 255, 255, 0.25);
	padding: 0 0.4rem;
}

.intro {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.35;
	color: var(--body-color);
}

.intro a {
	color: var(--accent);
	font-weight: 600;
}

.intro a:hover,
.intro a:focus-visible {
	text-decoration: underline;
}

.work,
.contact {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 2vh, 18px);
}

.work h3,
.contact h3 {
	font-size: clamp(20px, 2vw, 26px);
	margin: 0;
}

.carousel_hint {
	margin: 0;
	font-size: 0.95rem;
	color: var(--muted);
}

.game_carousel {
	list-style: none;
	margin: 0;
	padding: 6px 4px 6px 0;
	display: flex;
	gap: clamp(18px, 1.8vw, 28px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.game_carousel::-webkit-scrollbar {
	height: 8px;
}

.game_carousel::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 999px;
}

.game_carousel::-webkit-scrollbar-thumb {
	background: var(--accent-soft);
	border-radius: 999px;
}

.game_carousel li {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.game_capsule {
	position: relative;
	width: clamp(180px, 14vw, 220px);
	aspect-ratio: 2 / 3;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--capsule-border);
	box-shadow: var(--capsule-shadow);
	isolation: isolate;
}

.game_capsule img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.45s ease, transform 0.45s ease;
	transform: scale(1.01);
}

.game_details {
	position: absolute;
	inset: 0;
	padding: clamp(16px, 3vh, 24px) clamp(14px, 2vw, 20px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.game_title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 19px);
	letter-spacing: 0.01em;
}

.game_info {
	margin: 0;
	color: rgba(239, 246, 255, 0.82);
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.4;
}

.game_links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.game_links a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent);
}

.game_capsule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	transition: background 0.45s ease;
	z-index: 1;
}

.game_capsule:is(:hover, :focus-within, .is-active) img {
	filter: blur(8px) brightness(0.35);
	transform: scale(1.04);
}

.game_capsule:is(:hover, :focus-within, .is-active)::after {
	background: rgba(15, 15, 15, 0.6);
}

.game_capsule:is(:hover, :focus-within, .is-active) .game_details {
	opacity: 1;
	transform: translateY(0);
	z-index: 2;
}

@media (min-width: 1025px) {
	body {
		gap: 18px;
		padding: 40px 0;
	}

	#main_card {
		width: 100%;
		max-width: 1200px;
		padding: 28px 34px;
		gap: 20px;
	}

	#main_card h1 {
		font-size: 42px;
	}

	#main_card h2 {
		font-size: 18px;
	}

	.intro {
		font-size: 16px;
		line-height: 1.45;
	}

	.work,
	.contact {
		gap: 18px;
	}

	.work h3,
	.contact h3 {
		font-size: 24px;
	}

	.carousel_hint {
        margin: 0;
		font-size: 1rem;
	}

	.game_carousel {
		gap: 20px;
	}

	.game_capsule {
		width: 170px;
		border-radius: 18px;
	}

	.game_details {
		padding: 18px 16px;
	}

	.game_title {
		font-size: 0.95rem;
	}

	.game_info {
		font-size: 0.8rem;
	}

	.game_links a {
		font-size: 0.75rem;
	}

	#contact_buttons {
		gap: 14px;
	}

	#contact_buttons button {
		font-size: 0.85rem;
		padding: 10px 16px;
	}
}

#contact_buttons {
	display: flex;
	gap: 16px;
}

#contact_buttons button {
	flex: 1;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	color: var(--body-color);
	font-size: 1rem;
	font-weight: 600;
	border-radius: 12px;
	padding: 12px 18px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#contact_buttons button:hover,
#contact_buttons button:focus-visible {
	background: var(--accent-soft);
	border-color: rgba(30, 221, 184, 0.55);
	color: var(--accent);
}

#footer {
	margin-top: clamp(14px, 2vh, 22px);
	color: var(--muted);
	text-align: center;
}

#footer a {
	color: var(--accent);
}

#footer a:hover,
#footer a:focus-visible {
	text-decoration: underline;
}

.footer_text {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 1024px) {
	body {
		align-items: center;
		justify-content: flex-start;
	}

	.intro {
		max-width: 100%;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	body {
		padding: clamp(28px, 6vh, 52px) clamp(24px, 6vw, 48px);
		gap: clamp(20px, 3vh, 32px);
	}

	#main_card {
		width: min(900px, 92vw);
		padding: clamp(26px, 3vw, 34px);
	}
}

@media (max-width: 768px) {
	body {
		padding: 0;
		align-items: stretch;
		gap: 0;
	}

	#main_card {
		width: 100%;
		max-width: none;
		flex: 1 0 auto;
		min-height: var(--viewport-height);
		border-radius: 0;
		padding: 24px 22px;
		gap: 22px;
		margin: 0;
	}

	#main_card h1 {
		font-size: 2.4rem;
	}

	#main_card h2 {
		font-size: 1.05rem;
		line-height: 1.5;
	}

	.game_carousel {
		gap: 16px;
		padding-bottom: 14px;
	}

	.game_capsule {
		width: 64vw;
		max-width: 260px;
		cursor: pointer;
	}

	#contact_buttons {
		flex-direction: column;
	}

	#contact_buttons button {
		width: 100%;
	}

	#footer {
		font-size: 0.85rem;
	}
}

@media (max-width: 480px) {
	#main_card {
		padding: 20px 18px 28px;
	}

	.carousel_hint {
		font-size: 0.9rem;
	}

	.game_capsule {
		width: 70vw;
	}
}