:root {
	--bg-color:       #000000;
	--bg-section:     rgba(12,12,12,0.4);
	--bg-section-sel: rgba(4,4,4, 0.8);
	--text-color:   #FFFFFF;
	--accent-color: #FFCCDD;
	--second-color: #FF8888;
	--tierlist-s: #FFDD44FF;
	--tierlist-a: #88FF88FF;
	--tierlist-b: #44BBFFFF;
	--tierlist-c: #FFAA44FF;
	--tierlist-d: #FF8877FF;
	--text-shadow-size: 0.4em;
	--gap-between-sections: 0.8em;
	--gap-between-mix-elements: 1.6em;
	--max-width: 70em;
	--borders-radius: 0px;
	--font: monospace;
	--blur-size: 0.12em;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	background-image:
		url("./img/webfg.webp"),
		url("./img/bg_1.webp"),
		url("./img/bg_2.webp"),
		url("./img/bg_3.webp"),
		url("./img/petals.apng"),
		url("./img/webbg.webp");

	background-attachment: fixed;
	background-size:
		0.4em,
		100% auto,
		100% auto,
		100% auto,
		70% auto,
		0.4em;
	background-repeat:
		repeat,
		repeat-y,
		repeat-y,
		repeat-y,
		repeat,
		repeat;
	background-position:
		center,
		center 0,
		center 0,
		center 0,
		center,
		center;

	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 1em auto;
	padding: 0 var(--gap-between-sections);
	max-width: var(--max-width);
	font: 1.2em/1.6 var(--font);
}

img {
	display: block;
	margin: 1em auto;
}

h1,h2,h3,h4 {
	line-height: 1.2;
	text-shadow: 0 0 var(--text-shadow-size) var(--text-color);
	color: var(--text-color);
}

h1 {
	text-shadow: 0 0 var(--text-shadow-size) var(--text-color);
	font-size: 3.0em;
	text-align: center;
}

section {
	width: 100%;
	padding: 0.8em 1.2em;
	background: var(--bg-section);
	transition: 0.4s;
	border-radius: var(--borders-radius);
	box-shadow: 0 0 0.8em var(--bg-section);
	backdrop-filter: blur(var(--blur-size));
	-webkit-backdrop-filter: blur(var(--blur-size));
}

section.even { flex: 1; }

section:hover {
	background: var(--bg-section-sel);
	box-shadow: 0 0 0.8em var(--bg-section-sel);
}

div {
	color: var(--text-color);
	max-width: var(--max-width);
	border-radius: var(--borders-radius);
}

div.main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-between-sections);
}

div.slave {
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: var(--gap-between-sections);
}

div.popup {
	border: none;
	box-shadow: 0 0 0.8em var(--second-color);
	width: 98%;
	padding: 0.4em 1.6em;
	background: var(--bg-color);
	transition: 0.4s;
}

div.popup:hover {
	box-shadow: 0 0 1.2em var(--second-color);
}

div.mix {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0em var(--gap-between-mix-elements);
	width: 100%;
}

div.mix-element { color: var(--text-color); }

@media (max-width: 800px) {
	body { font: 1.0em/1.6 var(--font); }
	div.slave {
		flex-direction: column;
	}

	div.mix {
		flex-direction: column;
		align-items: center;
	}

	div.mix-element { width: 100%; }
}

.tierlist-s { text-shadow: 0 0 var(--text-shadow-size) var(--tierlist-s); }
.tierlist-a { text-shadow: 0 0 var(--text-shadow-size) var(--tierlist-a); }
.tierlist-b { text-shadow: 0 0 var(--text-shadow-size) var(--tierlist-b); }
.tierlist-c { text-shadow: 0 0 var(--text-shadow-size) var(--tierlist-c); }
.tierlist-d { text-shadow: 0 0 var(--text-shadow-size) var(--tierlist-d); }

button {
	background: transparent;
	color: var(--accent-color);
	text-shadow: 0 0 var(--text-shadow-size) var(--accent-color);
	border: none;
	font-size: 1em;
	font-family: var(--font);
	cursor: pointer;
}

button:hover { text-decoration: underline; }

button.footnote {
	display: inline;
	vertical-align: super;
	font-size: 0.75em;
}

details, summary {
	display: inline;
	vertical-align: super;
	font-size: 0.75em;
}

summary { cursor: pointer; }

details[open] { display: contents; }

h2 {
	font-size: 1.6em;
	text-align: center;
}

h3 { font-size: 1.2em; }
h4 { font-size: 1.0em; }
p { text-align: justify; }

a {
	color: var(--accent-color);
	text-shadow: 0 0 var(--text-shadow-size) var(--accent-color);
	text-decoration: none;
}

a:hover { text-decoration: underline; }

ul { list-style-type: square; }

dt {
	color: var(--second-color);
	text-shadow: 0 0 var(--text-shadow-size) var(--second-color);
	font-size: 1.2em;
}

dd { text-align: justify; }