* {
	margin: 0;
	padding: 0;
	color: inherit;
}

html, body {
	height: 100%;
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	width: 100vw;
	background: linear-gradient(white, gainsboro, whitesmoke);
	background-repeat: no-repeat;
	padding: 0;
}

.container > * {
	margin: 16px;
}

.container > header * {
	color: white;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, .75),
	2px 2px 0px rgba(255, 255, 255, .5),
	3px 3px 0px rgba(255, 255, 255, .25);
}

.container > footer {
	position: relative;
	bottom: 0;
	flex-direction: column;
}

a {
	text-decoration: none;
}

a::before {
	content: "[";
}

a::after {
	content: "]";
}

header {
	position: relative;
	margin: 0;
	padding: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(mediumblue, midnightblue, darkblue);
	text-transform: capitalize;
	color: white;
}

header > * {
	display: flex;
	flex-direction: column;
	z-index: 1;
}

header img {
	width: 12rem;
}

nav {
	position: sticky;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	margin: 0;
	background: linear-gradient(rgba(220, 220, 220, .625), rgba(192, 192, 192, .875), rgba(211, 211, 211, .75));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
	inset 0 2px 2px rgba(255, 255, 255, 0.1);
	z-index: 100;
}

nav * {
	display: flex;
	flex: auto;
	align-items: center;
	justify-content: center;
	padding: 8px;
	font-size: .875rem;
	font-weight: bold;
	color: black;
}

nav *:hover {
	color: white;
	background: linear-gradient(darkgray, dimgray, gray);
}

nav *.selected {
	color: white;
	background: linear-gradient(red, darkred, firebrick);
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 16px;
	background: linear-gradient(darkgray, dimgray, gray);
}

footer * {
	font-size: .625rem;
	color: white;
}

footer .beyound_the_entity {
	font-weight: bolder;
	font-size: .75rem;
}

button {
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: linear-gradient(mediumblue, midnightblue, darkblue);
	text-transform: capitalize;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
	inset 0 2px 2px rgba(255, 255, 255, 0.1);
	color: white;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, .75),
	2px 2px 0px rgba(255, 255, 255, .5),
	3px 3px 0px rgba(255, 255, 255, .25);
	transition: all .2s ease-in-out;
}

button:hover {
	background: linear-gradient(darkblue, midnightblue, navy);
	color: rgba(255, 255, 255, .725);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, .5),
	2px 2px 0px rgba(255, 255, 255, .25),
	3px 3px 0px rgba(255, 255, 255, .125);
	transform: translateY(-3px);
	scale: .9;
}

button > a, button > p, button > b {
	height: 100%;
	width: 100%;
	z-index: 1;
}

ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

li {
	list-style: none;
}

li::before {
	content: "#";
	font-weight: bolder;
}

li li::before {
	content: "»";
}

.container {
	flex: 1 0 auto;
}

.banner, .swiper {
	position: relative;
	margin: 0;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
	inset 0 2px 2px rgba(255, 255, 255, 0.1);
}

.banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.banner .text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 16px;
	z-index: 1;
}

.banner .text * {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 21em;
}

.banner .text *, nav *.selected, nav *:hover {
	color: white;
	text-shadow: -1px -1px 2px rgba(255, 255, 255, .5),
	1px 1px 2px rgba(0, 0, 0, 1);
}

.banner .text:after, .banner .text *::after, .banner .text:before, .banner .text *::before, .floating-note::after, .floating-note::before, header *::after, header *::before {
	content: none;
}

.banner .mask {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
	background: linear-gradient(transparent, darkblue);
	mask: linear-gradient(transparent, black, black);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 0;
}

.card {
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
	inset 0 2px 2px rgba(255, 255, 255, 0.1);
}

.card > header {
	justify-content: space-between;
	border-radius: 8px 8px 0 0;
	padding: 6px 8px;
	font-weight: bold;
	font-size: .875rem;
}

.card > header > * {
	display: flex;
	flex-direction: row;
}

.card > header *, body > header * {
	color: white;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, .75),
	2px 2px 0px rgba(255, 255, 255, .5),
	3px 3px 0px rgba(255, 255, 255, .25);
}

.card > div {
	padding: 8px;
	background: linear-gradient(white, gainsboro, whitesmoke);
}

nav *, footer *, .card > div *, .warning *, .notice * {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .5),
	-1px -1px 1px rgba(255, 255, 255, 1);
}

.card > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.card > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 0 0 8px 8px;
	padding: 6px 8px;
	background: linear-gradient(gainsboro, silver, lightgray);
}

.card > footer * {
	font-size: .625rem;
	color: black;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .25),
	-1px -1px 1px rgba(255, 255, 255, .5);
}

.card .watermark, button .watermark {
	width: 50%;
}

.watermark {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	margin: 8px;
	mix-blend-mode: multiply;
}

.row-list {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	justify-content: space-evenly;
}

.row-list > * {
	width: 100%;
	position: relative;
}

.warning, .notice {
	margin: 0;
	padding: 8px 16px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
	inset 0 2px 2px rgba(255, 255, 255, 0.1);
}

.warning {
	background: linear-gradient(darkorange, saddlebrown, sienna);
}

.floating-note {
	display: flex;
	flex-direction: column;
	align-items: left;
	position: fixed;
	z-index: 10;
	right: -.5rem;
	bottom: 8vh;
	font-size: .625rem;
	margin: 0;
	padding: 8px 24px 8px 16px;
	background-image: url('../img/note.png');
	background-repeat: no-repeat;
    background-size: 100% 100%;
	user-select: none;
}

.floating-note * {
	color: rgba(0, 0, 0, .75);
}

code {
	margin: 0;
	padding: 2px 4px;
	background-color: black;
	color: lime;
}

code, code * {
	text-shadow: none !important;
}