@font-face {
	font-family: 'minecrafter';
	src: url('https://raw.githubusercontent.com/Itz-Miles/Funkin-MINECRAFT/refs/heads/main/assets/fonts/Minecrafter.ttf') format('truetype');
	font-weight: lighter;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #0d1117;
	--pg: #222227;
	--pb: #1e1e23ff;
	--git: #3d444d;
	--bar: #24282f;

	--face: #cedae4;
	--botm: #5f697a;

	--prime: #ffcc00;
	--alpha: #ffa500;
	--beta: #c9a100;
	--rim: #655100;

	--load: #368528;
	--load-hvr: #27ae60;
	--load-prs: #073e1d;

	--inset: inset 0px 0px 0px 0.25em #3f3f3f;
	--shade: 0px 5px 20px 5px #00000063;
	--clear: #40404ebc;
}

html {
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

body {
	background-color: var(--bg);
	color: #d3d3d3;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.container {
	width: 80%;
	margin: auto;
}

section {
	scroll-margin-top: 18vh;
}

.section-header {
	font-family: 'minecrafter', sans-serif;
	margin: 0.5em 0em 0.5em 0em;
	font-size: 7.4vw;
	color: var(--prime);
	text-align: center;
	font-weight: lighter;
}

h2 {
	text-align: center;
}


.tooltip,
.legal p {
	background-color: var(--pg);
	border-bottom: var(--pb) 0.5em solid;
	box-shadow: var(--inset), var(--shade);
	outline: 2px solid black;
	text-indent: 0em;
	text-align: center;
}

p {
	font-size: 1.2em;
	padding: 0.75em;
	text-indent: 4em;
}

.title {
	width: min(120vh, 95vw);
	height: auto;
	filter: drop-shadow(0px 0.5em 0.25em #03002287);
}

.hero {
	height: min(90vh, 70vw);
	margin-bottom: min(10vh, 10vw);
	padding-top: 20vh;
	margin-top: -20vh;
	background-image: url('assets/panorama.webp');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-align: center;
	z-index: 1;
}

.hero-content p {
	text-indent: 0em;
	padding: 0.2em 0em 0.2em 0em;
	font-size: min(3vh, 2.4vw);
	width: min(112vh, 90vw);
	font-family: 'minecrafter', sans-serif;
	font-weight: lighter;
	justify-content: center;
	background-color: var(--prime);
	margin: 1em auto;
	color: var(--bg);
	border: 0px;
	border-bottom: var(--bar) 0.25em solid;
	transform: scaleY(1.5);
	box-shadow: unset;
	filter: drop-shadow(0px 0.5em 0.25em #03002287);
}

.links a,
p a {
	color: var(--prime);
	text-decoration: none;
	margin: 10px;
	display: inline-block;
	font-weight: bold;
	font-size: 1.2em;
	transition: color 0.3s ease-in-out;
}

.links a:hover,
p a:hover {
	color: var(--alpha);
	text-decoration: underline;
}

.navbar {
	padding: 0.5em;
	padding-bottom: 0.7em;
	position: sticky;
	top: 2.5vh;
	margin-left: auto;
	margin-right: auto;
	max-width: 97.5vw;
	height: 4.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
}

.nav-links {
	background-color: var(--clear);
	backdrop-filter: blur(6px);
	outline: 0.2em solid black;
	display: flex;
	overflow-x: scroll;
	flex-grow: 1;
	padding: 0.5em;
	padding-bottom: 0.7em;
	box-shadow: inset 0px -0.8em 0px 0.2em #757575, inset 0px -0em 0px 0.2em #757575, #0c0c1099 0 0.2em 0.5em 0.4em;
}

.nav-links::after {
	position: relative;
	box-shadow: inset 0px -0.8em 0px 0.2em #757575, inset 0px -0em 0px 0.2em #757575;
	z-index: 12;
}

.nav-links a {
	font-family: 'minecrafter', sans-serif;
	font-size: 1.5em;
	color: var(--bg);
	background-color: var(--face);
	padding: 0.5em;
	box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.431), 0px 5px 5px 2px #00000043;
	border-bottom: var(--botm) 0.3em solid;
	text-decoration: none;
	margin: 0.2em 0.25em 0.1em 0.25em;
	font-weight: lighter;
	transition: all 0.1s ease-in-out;
	outline: 2px solid black;
}

.nav-links a:hover {
	color: var(--beta);
	border-bottom: var(--botm) 0.4em solid;
	margin-top: 0.1em;
}

.nav-links a:active {
	color: var(--alpha);
	border-bottom: 0.1em var(--prime) solid;
	box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.431), 0px 5px 5px 2px #ffdd0047, -2px 0px 3px 2px #ffdd0030, 2px 0px 3px 2px #ffdd0047;
	margin-top: 0.4em;
}

.avatar {
	background-color: var(--clear);
	backdrop-filter: blur(6px);
	box-shadow: inset 0px 0em 0px 0.2em #757575, #0c0c1099 0 0.2em 0.5em 0.4em;
	height: 4em;
	outline: 0.2em solid black;
	padding: 0.5em;
	border-bottom: 0.75em var(--bar) solid;
	margin-left: 1em;
}

.avatar img {
	transform: scaleX(-1);
	width: 64px;
	height: 64px;
	margin-top: -0.05em;
	padding: 0em;
}

.characters-section {
	position: relative;
	margin-bottom: -3em;
	margin-top: -2vw;
	background-color: transparent;
	overflow: hidden;
	padding: 1em;
	padding-bottom: 4em;
}

.characters-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('assets/panorama.webp');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	z-index: -1;
}

.characters-strip {
	display: flex;
	gap: 1em;
	overflow-x: auto;
	padding: 0.5em;
	padding-bottom: 1em;
	scroll-snap-type: x mandatory;
	scroll-padding: 14px;
}

.character-card {
	display: flex;
	flex-direction: row;
	width: 400px;
	height: 200px;
	background-color: var(--pg);
	border-bottom: var(--pb) 0.5em solid;
	box-shadow: var(--inset), var(--shade);
	flex: 0 0 auto;
	color: var(--face);
	scroll-snap-align: start;
	outline: 2px solid black;
}

.character-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
	padding: 1em;
}

.character-card img {
	height: auto;
	margin: 0.5em;
	padding: 0.5em;
	border: 3px solid var(--prime);
	background-color: var(--bar);
	image-rendering: pixelated;
}

.character-card h2 {
	margin: 0em 0 0em;
	font-family: 'minecrafter', sans-serif;
	font-weight: lighter;
	font-size: 1.2em;
	color: var(--prime);
}

.character-card p {
	text-indent: 1em;
	background-color: var(--bg);
	font-size: 1em;
	margin-top: 1em;
	margin-bottom: 0em;
	padding: 0.5em;
	height: 100%;
	overflow-y: auto;
}

@media (aspect-ratio < 0.9) {
	.character-card {
		flex-direction: column;
		width: 200px;
		height: auto;
	}
}

.external-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: center;
	min-height: 5em;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'minecrafter', sans-serif;
	font-size: 1.6em;
	text-decoration: none;
	padding: 0.5em;
	flex: 1 1 15em;
	border-bottom: 0.3em solid;
	transition: all 0.1s ease-in-out;
	margin: 0.5em 0em 0em 0em;
	text-align: center;
	gap: 0.25em;
	max-height: 2em;
	outline: 2px solid black;
}

.button img {
	height: 1em;
	width: auto;
}

.button.gamebanana {
	background-color: var(--prime);
	color: black;
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 0.5), 0px 0px 12px 3px rgba(255, 225, 0, 0.75);
	border-bottom-color: var(--beta);
	word-spacing: -0.2em;
	outline-color: var(--rim);
}

.button.github {
	background-color: black;
	color: white;
	box-shadow: inset 0px 0px 0px 3px white, 0px 0px 10px 2px rgba(255, 255, 255, 0.5);
	border-bottom-color: #b9b9b9;
}

.button:hover {
	border-bottom-width: 0.4em;
	margin-top: 0.4em;
}

.button:active {
	margin-top: 0.7em;
	border-bottom-width: 0.1em;
}

.table-wrapper {
	margin-top: 2em;
	width: 100%;
	overflow-x: scroll;
	border: 0.25em solid #323232;
	box-shadow: var(--shade);
	box-sizing: border-box;
	outline: 2px solid black;
}

.platform-table {
	width: 100%;
	background-color: var(--pb);
}

.platform-table td {
	padding: 1em;
	border-top: 1px solid #333;
	border-bottom: 1px solid var(--bg);
	border-spacing: 0px 1px;
	font-size: 1em;
	margin-top: 0.1em;
	text-align: center;
}

.platform-table .top td {
	border-top: 1px solid transparent;
}

.platform-table .bottom td {
	border-bottom: 1px solid transparent;
}

.platform-table th {
	padding: 1em;
	background-color: #2a2a2a;
	color: var(--prime);
	font-family: 'minecrafter', sans-serif;
	font-weight: lighter;
	font-size: 1.2em;
	border-bottom: 0.25em solid var(--bg);
}

.platform-button {
	min-width: 50%;
	text-align: center;
	font-family: 'minecrafter', sans-serif;
	font-weight: lighter;
	font-size: 1.4em;
	background-color: var(--load);
	color: white;
	padding: 0.5em 0.5em;
	text-decoration: none;
	border-bottom: 0.3em solid #174c10;
	transition: background-color 0.1s ease-in-out, margin 0.1s ease-in-out;
	display: inline-block;
	outline: 2px solid black;
}

.platform-button:hover {
	background-color: var(--load-hvr);
}

.platform-button:active {
	background-color: var(--load-prs);
}

.changelog-wrapper {
	border: 1px solid var(--git);
	border-radius: 6px;
	padding: 1em;
	margin: 1.5em 0;
}

.changelog-wrapper .changelog-content p {
	border: 0px solid transparent;
	box-shadow: unset;
	border-radius: 0px;
	padding: 1em;
	margin: 0.25em;
	text-indent: 0em;
}

.tab-menu {
	border: 1px solid var(--git);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.5em;
	padding-bottom: 0.75em;
	justify-content: center;
	max-width: 100%;
}

.tab {
	flex: 1 1 20rem;
	min-width: 10rem;
	font-family: 'minecrafter', sans-serif;
	font-size: 1.5em;
	color: #ffffffad;
	background-color: unset;
	padding: 0.5em;
	text-align: center;
	text-decoration: none;
	box-shadow: inset 0px 0px 0px 4px #ffffff92;
	border: 0px;
	border-bottom: #ffffff35 0.35em solid;
	margin: 0.1em;
	font-weight: lighter;
	cursor: pointer;
	transition: color 0.1s ease-in-out, margin 0.1s ease-in-out, border 0.1s ease-in-out;
}

.tab.active {
	color: white;
	box-shadow: inset 0px 0px 0px 4px white;
	border-bottom: 0.1em #b9b9b9 solid;
	margin-top: 0.3em;
}

.changelog-content {
	margin-top: 1em;
	background-color: var(--bg);
	color: #eee;
	padding: 1em;
	height: 50vh;
	overflow-y: auto;
	font-family: 'Segoe UI', 'sans-serif';
}

.changelog-content p {
	background-color: unset;
	border: 1px solid #3d444d;
	padding: 0.5em;
	border-radius: 6px;
}

.button.twitter {
	background-color: #1DA1F2;
	color: white;
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 0.5),
		0px 0px 10px 2px rgba(29, 161, 242, 0.6);
	border-bottom-color: #0d8ddb;
}

.button.youtube {
	background-color: #FF0000;
	color: white;
	box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 0.5),
		0px 0px 10px 2px rgba(255, 0, 0, 0.6);
	border-bottom-color: #b30000;
}

.follow-buttons {
	gap: 0.5em;
	justify-content: center;
	margin-top: 0.5em;
}


footer.legal {
	background-color: #1a1a1a;
	text-align: center;
	font-size: 0.9em;
	padding: 2em 1em;
	border-top: 1px solid #333;
	margin-top: 5em;
}

footer.legal p {
	max-width: 70%;
	margin: 2em auto;
	padding: 1em;
	line-height: normal;
}

footer.legal a {
	color: var(--prime);
	text-decoration: underline;
}

footer.legal a:hover {
	color: var(--alpha);
}

::-webkit-scrollbar {
	width: 0.75em;
	height: 0.75em;
}

::-webkit-scrollbar-track {
	background-color: var(--bar);
}

::-webkit-scrollbar-thumb {
	background-color: var(--prime);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--alpha);
}

#tab-content::-webkit-scrollbar-thumb {
	background-color: white;
}