/* VARIABLES */

:root {
	/*Transparencies:*/
	--trans_25: #5f3f3faf;
	--trans_50: #5f3f3f7f;
	--trans_75: #5f3f3f3f;
	--trans_100: #5f3f3f00;

	/*Lightness Shades:*/
	--light_00: #000000;
	--light_25: #3f3f3f;
	--light_50: #7f7f7f;
	--light_75: #afafaf;
	--light_100: #ffffff;

	/*Accent Colors*/
	--accent_0: #000000;
	--accent_25: #3f001f;
	--accent_50: #7f003f;
	--accent_75: #af007f;
	--accent_100: #ff00af;

	/*Other:*/
	--header_height: 128px;
	/*Set height as a variable so it can be used multiple times*/
	--blur: 8px;
	/*Standard value for blurred objects*/
}

/* BODY */

* {
	box-sizing: border-box;
	/*include border and padding in size*/
	min-width: 0;
	/*stop browsers applying custom min-width rules*/
}

html, body {
	background-image: url(/media/background/main.png);
	/*generated by ChatGPT (https://chatgpt.com/) by OpenAI*/
	background-color: var(--light_00);
	/*Black background if image loading fails*/
	background-repeat: no-repeat;
	/*Don't repeat image*/
	background-size: cover;
	/*Cover complete viewport*/
	background-attachment: fixed;
	/*Fix background regardless of scrolling*/

	margin: 0;
	/*apply individual margins, so the footer can cover the full width*/

	font-family: system-ui, sans-serif;
	/*System font, otherwise Sans font*/
	color: var(--light_100);
	/*White text*/
	text-align: justify;
	/*Justified text*/

	/*keep footer at bottom*/
	display: flex;
	/*display flex*/
	flex-direction: column;
	/*make it grow vertically*/
	height: 100%;
	/*100% height*/
}

#content {
	flex-grow: 1;
	/*let the content grow, to keep the footer at the bottom*/
}

img {
	vertical-align: middle;
	/*Required for some things*/
}

/* HEADER / FOOTER */

header, footer, h2, h3, h4, h5, h6 {
	font-family: monospace;
	text-transform: lowercase;
	/*Both to create emphasize them. To some degree also nostalgic to my first version.*/
}

#header {
	/*This is just the container for the header*/
	z-index: 1;
	/*Above content*/
	position: fixed;
	/*Fixed on viewport*/
	top: 0;
	/*Offset from top*/
	left: 0;
	/*Offset from left edge*/
	height: var(--header_height);
	width: 100vw;
	/*100% of the width (Viewport Width)*/
	background: linear-gradient(var(--trans_00), var(--trans_100));
	/*Linear gradient to create fade-out effect*/
}

#header img {
	height: 4em;
	/*4× text size*/
}

header {
	--width: 75vw;
	/*Set width because it is needed multiple times*/
	background-color: var(--trans_50);
	backdrop-filter: blur(var(--blur));
	padding: 8px;
	width: var(--width);
	position: absolute;
	/*Absolute positioning to center*/
	top: 16px;
	/*Spacing to top of screen*/
	left: calc(1/2*(100vw - var(--width)));
	/*Calculate how much space on the left is needed
	calc():				 Calculate
	1/2*():				 Half on this site, half on the right side
	(100vw:				 full viewport width
	- var(--width)):	 minus the width of the header
	*/
	border-radius: 16px;
}

footer {
	background-color: var(--trans_50);
	backdrop-filter: blur(var(--blur));
	padding: 32px;
}

header table, footer table {
	width: 100%;
	/*Full width, used to display multiple columns*/
}

footer table tr td {
	width: 50%;
	/*both columns have equal width*/
}

/* CONTENT */

#content {
	/*The main container for all the content*/
	--margin: 32px;
	margin: var(--margin);
	margin-top: calc(var(--margin) + var(--header_height));
	/*To display below the header and have the standard margin*/
}

/* LINKS */

a {
	color: var(--light_100);
}

a:hover {
	color: var(--light_75);
}


/* HEADINGS */

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

/* HEADINGS UNDERLINE */

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
	/*Set width of underline*/
	content: "";
	/*Needed to render it*/
	display: block;
	/*Needed to change dimensions*/
	position: relative;
	/*Needed to change position relative to the heading*/
	left: calc(1/2*(100% - var(--width)));
	/*
	Calculate distance from left origin point

	1/2:			half on the left, half on the right (implied)
	100%:			Full width
	- var(--width):	Without the width of the line
	*/
	width: var(--width);
	height: 4px;
	background-color: var(--light_100);
	border-radius: 2px;
	/*Rounded edges*/
}

/*set different values for each heading*/

h1 {
	--width: 75%;
}

h2 {
	--width: calc(100% / 2);
}

h3 {
	--width: calc(100% / 3);
}

h4 {
	--width: calc(100% / 4);
}

h5 {
	--width: calc(100% / 5);
}

h6 {
	--width: calc(100% / 6)
}

/* INPUT */

input, button, textarea, select {
	color: var(--light_100);
	accent-color: var(--light_00);
	/*Checkboxes, radio buttons, etc.*/
	background-color: var(--trans_75);
	backdrop-filter: blur(var(--blur));
}

input[type=text], input[type=search], input[type=email], input[type=number], input[type=button], input[type=submit], textarea {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	/*Required that the width is uniform*/
	outline: none;
	border-style: solid;
	border-width: 2px;
	border-radius: 8px;
	resize: vertical;
	/*textarea: only vertical resizing*/
}

input[type=search] {
	padding: 16px;
	/*more padding to make it special*/
	text-align: center;
	/*center alignment*/
	text-transform: lowercase;
	/*to show the user that capitalization will be ignored*/
	/*this does not change the actual text, this needs to be done through JS*/
}

/* RESPONSIVE DESIGN */

/*will be done with header redo*/

@media only screen and (max-width: 650px) {
	body {
		text-align: left;
		/*remove justify align, as it starts to look bad*/
	}
}

/* USEFUL CLASSES */

.center {
	/*Center Items*/
	width: 100%;
	/*Cover everything*/
	display: flex;
	/*Required to center*/
	justify-content: center;
}

.no_underline, .no_underline a {
	/*most often used for secret a links*/
	text-decoration: none;
	/*no underline*/
}

.text_right {
	text-align: right;
}

.text_verticalMiddle {
	vertical-align: middle;
}

.text_center {
	text-align: center;
}

.fullWidth {
	/*full width*/
	width: 100%;
}

.hidden {
	/*Used to interact through JS*/
	display: none;
}

/* TEXT SIZES */

.text_2em {
	font-size: 2em
}

.text_5em {
	font-size: 5em;
}

/*UL*/

.lined_ul ul {
	/*Apply to containers*/
	list-style-type: none;
	/*No bullets*/
}

.lined_ul ul ul {
	/*apply to uls in the root lis*/
	border-left: 4px solid white;
	/*left border (line)*/
	padding-left: 16px;
	margin-left: 8px;
}

/* IMAGE SIZES */
/*applied through outter containers*/

.img_64 img {
	width: 64px;
	height: 64px;
}

/* MARGINS */

.margin_8 * {
	margin: 8px;
}

/* FLEX WRAPPING */

.flex_container {
	display: flex;
	/*change display mode*/
	flex-wrap: wrap;
	/*set wrapping to wrap into multiple rows*/
	justify-content: center;
	/*center content*/
	flex-basis: 25%;
	/*set base width if not overridden*/
	gap: 16px;
	/*slight gap between items*/
	overflow: hidden;
	/*hide any scrolling bars*/
}

/* MULTI-LEVEL DROPDOWN */

/*
Layout:
<div class="multi-level_dropdown">
	<ul>
		<li>
			root
			<ul>
				[CONTENT]
			</ul>
		</li>
	</ul>
</div>
*/

/* function */

/*main*/

.multi-level_dropdown ul ul {
	display: none;
	/*initially hide all further elements except root*/
}

.multi-level_dropdown li:hover>ul,
.multi-level_dropdown li:focus-within>ul {
	display: block;
	/*show them again if they are hovered or if the focus is within (keyboard support)*/
}

/*positioning*/

.multi-level_dropdown {
	display: inline-block;
	/*in flow*/
	position: relative;
	/*anchor point for nested elements*/
}

.multi-level_dropdown li {
	position: relative;
	/*align further sub-categories to*/
	margin: 0;
	padding: 0;
	/*remove any default margin/padding*/
}

.multi-level_dropdown>ul {
	/*root*/
	position: relative;
	/*normal flow*/
	margin: 0;
	padding: 0;
	/*no default margins or paddings*/
}

.multi-level_dropdown ul ul {
	/*further down*/
	position: absolute;
	/*relative to the upper ul*/
	top: 100%;
	/*100% space on top*/
	left: 0;
	margin: 0;
	padding: 0;
	/*nothing on the left*/
	z-index: 2;
	/*above header and content*/
}

.multi-level_dropdown ul ul ul {
	/*all after that*/
	left: 100%;
	/*100% space on the left*/
	top: 0;
	/*no extra space to the top*/
}

/* aesthetic */

.multi-level_dropdown li {
	list-style: none;
	/*no bullets*/
	padding: 12px;
	/*padding (inside element)*/
}

.multi-level_dropdown>ul>li, .multi-level_dropdown>ul>li>ul>li {
	width: 256px;
	/*width for root and first dropdown*/
}

.multi-level_dropdown li li li {
	white-space: nowrap;
	/*as narrow as possible*/
	min-width: 128px;
	/*not too narrow*/
}

.multi-level_dropdown ul {
	background-color: var(--accent_25);
	border-radius: 8px;
}

.multi-level_dropdown li:hover, .multi-level_dropdown li:focus-within {
	background-color: var(--accent_50);
	/*selected item visible by lighter background*/
	border-radius: 8px;
}

/*add arrow symbol*/

.multi-level_dropdown li:has(ul)::after {
	content: "ᐅ";
	/*arrow symbol*/
	position: absolute;
	/*position it absolute*/
	right: 8px;
	/*8px from the right (small gap)*/
}

/* HEADER / FOOTER: CONTENT */

#tm_lego, #tm_rb {
	/*initally hide all legal stuff in the footer, it will be shown again on relevant pages*/
	display: none;
}