@font-face {
	font-family: "Renogare";
	src: url("fonts/Renogare.otf");
}

@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fa-brands-400.woff2?v=0-13-0') format('woff2');
}

*:not(td)::before {
	font-family: 'FontAwesome';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	--orange: hsl(22, 100%, 50%);
	--cyan: hsl(202, 100%, 50%);
	--dark: rgba(15, 15, 15, 0.5);
}

.orange {
	fill: var(--orange);
}

.cyan {
	fill: var(--cyan);
}

body {
	margin: 0;
	color: white;
	font-family: "Renogare", sans-serif;
	font-size: 14px;
	background-color: black;
	overflow-x: hidden;
	/*background-image:
	radial-gradient(white, transparent 1px),
	radial-gradient(white, transparent 1px),
	radial-gradient(white, transparent 1px),
	radial-gradient(white, transparent 1px),
	radial-gradient(white, transparent 1px);
	background-size: 1100px 1100px, 700px 700px, 500px 500px, 300px 300px, 1600px 1600px, 1920px 1920px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 370px 400px, 870px 1100px;*/
}

button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--dark);
	font-family: "Renogare", sans-serif;
	color: white;
	border: none;
	outline: none;
	cursor: pointer;
}

button::before {
	margin-right: 5px;
}

.cta {
	background-color: var(--orange);
	display: block;
	padding: 10px;
	font-size: 16px;
	margin: 30px;
	margin-top: 20px;
	text-align: center;
}

#backtotop {
	display: block;
	text-align: center;
	margin: 0 auto 30px;
	padding: 10px;
	font-size: 16px;
}

iframe {
	border: none;
	display: block;
}

nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

nav a,
h2,
h3,
h4 {
	font-family: "Renogare", sans-serif;
	text-transform: uppercase;
}

nav a::first-letter,
h2::first-letter,
h3::first-letter,
h4::first-letter {
	font-size: 114%;
}

/* main
{
	padding: 20px;
	background: var(--dark);
} */

a:not(.link) {
	color: white;
	text-decoration: none;
	transition: color 0.2s;
}

.link {
	color: var(--cyan);
}

nav a {
	padding: 10px;
	/*border-radius: 3px;*/
	font-size: 14px;
	transition: color 0.2s;
}

body>nav {
	margin-bottom: 20px;
}

body>nav>div {
	display: flex;
	flex-wrap: wrap;
}

footer a:not(.link),
body>nav a:hover {
	color: var(--cyan);
}

footer a:nth-of-type(2) {
	color: var(--orange);
}

nav a:first-child img,
nav svg {
	width: 115px;
}

nav svg circle {
	transform: translate(0, 0);
	transition: transform 0.3s;
}

nav svg:hover circle.orange {
	transform: translate(3%, -17%);
}

nav svg:hover circle.cyan {
	transform: translate(-3%, 17%);
}

.fa-x-twitter:hover {
	color: #1da1f2;
}

.fa-twitch:hover {
	color: #9146ff;
}

.fa-discord:hover {
	color: #5865F2;
}

.fa-youtube:hover {
	color: red;
}

.fa-tiktok:hover {
	color: #fe2c55;
}

.fa-steam:hover {
	color: #0B5C90;
}

.fa-xbox:hover {
	color: #107c10;
}

main>nav {
	display: flex;
	justify-content: center;
	background: var(--dark);
}

main>nav a {
	margin: 0 10px;
}

.cta,
main>nav a,
#backtotop {
	transition: background-color 0.2s;
}

.cta:hover,
main>nav a:hover,
#backtotop:hover {
	background-color: var(--cyan);
}

section,
figure {
	background: var(--dark);
	/*border: 3px solid white;*/
}

section {
	padding: 1px 10px;
	margin: 10px;
}

figure {
	display: flex;
	align-items: center;
	background: var(--dark);
	margin: 10px 0;
}

figcaption {
	padding: 10px;
}

dt {
	margin-left: 1.35em;
	display: list-item;
}

dd {
	margin-top: 3px;
	margin-bottom: 12px;
}

body:not([data-subpage=basics]) [data-subcontent=basics],
body:not([data-subpage=grab]) [data-subcontent=grab],
body:not([data-subpage=bounce]) [data-subcontent=bounce],
body:not([data-subpage=spin]) [data-subcontent=spin],
body:not([data-subpage=hazards]) [data-subcontent=hazards],
body:not([data-subpage="0"]) [data-subcontent="0"],
body:not([data-subpage="1"]) [data-subcontent="1"],
body:not([data-subpage="2"]) [data-subcontent="2"],
body:not([data-subpage="3"]) [data-subcontent="3"],
body:not([data-subpage="4"]) [data-subcontent="4"],
body:not([data-subpage="5"]) [data-subcontent="5"],
body:not([data-subpage="6"]) [data-subcontent="6"],
body:not([data-subpage="7"]) [data-subcontent="7"],
body:not([data-subpage="8"]) [data-subcontent="8"],
body:not([data-subpage="9"]) [data-subcontent="9"],
body:not([data-subpage="10"]) [data-subcontent="10"],
body:not([data-subpage="11"]) [data-subcontent="11"],
body:not([data-subpage="12"]) [data-subcontent="12"],
body:not([data-subpage="13"]) [data-subcontent="13"],
body:not([data-subpage="14"]) [data-subcontent="14"],
body:not([data-subpage="15"]) [data-subcontent="15"],
body:not([data-subpage="16"]) [data-subcontent="16"],
body:not([data-subpage="100"]) [data-subcontent="100"],
body:not([data-subpage="200"]) [data-subcontent="200"],
body:not([data-subpage="300"]) [data-subcontent="300"] {
	display: none;
}

/*article,
article:target ~ #basics
{
	display: none;
}

article:target,
#basics
{
	display: block;
}*/

[data-page=characters] [data-nav=characters]:not(:hover),
[data-page=maps] [data-nav=maps]:not(:hover),
[data-page=mechanics] [data-nav=mechanics]:not(:hover),
[data-page=devlog] [data-nav=devlog]:not(:hover),
[data-page=tournaments] [data-nav=tournaments]:not(:hover) {
	color: var(--orange);
}

[data-subpage=basics] [href="#basics"]:not(:hover),
[data-subpage=grab] [href="#grab"]:not(:hover),
[data-subpage=bounce] [href="#bounce"]:not(:hover),
[data-subpage=spin] [href="#spin"]:not(:hover),
[data-subpage=hazards] [href="#hazards"]:not(:hover),
[data-subpage="0"] [href="#0"]:not(:hover),
[data-subpage="1"] [href="#1"]:not(:hover),
[data-subpage="2"] [href="#2"]:not(:hover),
[data-subpage="3"] [href="#3"]:not(:hover),
[data-subpage="4"] [href="#4"]:not(:hover),
[data-subpage="5"] [href="#5"]:not(:hover),
[data-subpage="6"] [href="#6"]:not(:hover),
[data-subpage="7"] [href="#7"]:not(:hover),
[data-subpage="8"] [href="#8"]:not(:hover),
[data-subpage="9"] [href="#9"]:not(:hover),
[data-subpage="10"] [href="#10"]:not(:hover),
[data-subpage="11"] [href="#11"]:not(:hover),
[data-subpage="12"] [href="#12"]:not(:hover),
[data-subpage="13"] [href="#13"]:not(:hover),
[data-subpage="14"] [href="#14"]:not(:hover),
[data-subpage="15"] [href="#15"]:not(:hover),
[data-subpage="16"] [href="#16"]:not(:hover),
[data-subpage="100"] [href="#100"]:not(:hover),
[data-subpage="200"] [href="#200"]:not(:hover),
[data-subpage="300"] [href="#300"]:not(:hover) {
	background-color: var(--orange);
}

article {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

article>section {
	flex-grow: 1;
}

[data-page=characters] article>section,
[data-page=maps] article>section,
[data-page=tournaments] article>section {
	flex-basis: 800px;
	max-width: 960px;
}

[data-page=characters] video,
[data-page=maps] video,
[data-page=tournaments] video,
[data-page=tournaments] iframe {
	box-sizing: content-box;
	width: 100%;
	max-width: 960px;
}

[data-page=tournaments] iframe {
	height: 540px;
}

[data-page=mechanics] article>section {
	flex-basis: 840px;
	max-width: 1280px;
}

[data-page=devlog] article>section:not(.hero) {
	flex-basis: 560px;
	max-width: 900px;
}

article>section.hero {
	width: 100%;
	display: flex;
	flex-direction: column;
	place-items: center;
}

[data-page=devlog] iframe,
[data-page=devlog] video,
[data-page=devlog] main img {
	display: block;
	width: 560px;
	margin: 10px 0;
}

[data-page=devlog] iframe,
[data-page=devlog] video {
	height: 315px;
}

[data-page=mechanics] main img {
	height: 18px;
	vertical-align: bottom;
}

input[type="text"],
select {
	padding: 3px 7px;
}

table {
	border-collapse: collapse;
	border-style: hidden;
	margin: 0 auto;
}

th,
td {
	border: 2px solid #444;
	border-left-width: 0px;
	border-right-width: 0px;
	padding: 20px;
}

tbody th {
	text-align: right;
}

td {
	text-align: center;
}

footer {
	text-align: center;
	padding: 25px;
}

@media (min-width: 720px) {
	[data-page=devlog] .hero iframe {
		width: 640px;
		height: 360px;
	}

	article>section {
		margin: 40px;
	}

	figure:nth-of-type(even) {
		flex-direction: row-reverse;
	}

	video {
		width: 480px;
	}
}

@media (max-width: 720px) {
	figure {
		flex-direction: column;
	}

	[data-page=devlog] iframe,
	[data-page=devlog] video {
		width: 90vw;
		height: 50.625vw;
	}

	[data-page=devlog] main img {
		width: 90vw;
	}

	video {
		width: 100%;
	}
}

@media (max-width: 800px) {
	thead {
		display: none;
	}

	tr {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	tbody th {
		width: 100%;
		text-align: left;
	}

	td,
	tbody th {
		display: flex;
		border-bottom: none;
	}

	td {
		display: flex;
		border-bottom: none;
	}

	td::before {
		content: attr(label);
		font-weight: bold;
		width: 115px;
		min-width: 115px;
	}
}

/* @media (min-width: 860px) {
	body>nav>div:last-child {
		margin-left: auto;
	}
} */

@media (max-width: 1005px) {

	body>nav,
	body>nav>div {
		justify-content: center;
	}
}