@charset "utf-8";

/* @link https://crazygermanotaku.neocities.org */

/* Schriftarten */

@font-face {
	font-family: "Mochiy Pop One";
	src: local("Mochiy Pop One"), url("/assets/fonts/MochiyPopOne-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Press Start 2P";
	src: local("Press Start 2P"), url("/assets/fonts/PressStart2P.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto"), url("/assets/fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Some Time Later";
	src: local("Some Time Later"), url("/assets/fonts/Some Time Later.otf") format("opentype");
}

/* Schriftartenklassen */

.press-start-2p {
	font-family: "Press Start 2P";
}

.segoe-ui {
	font-family: "Segoe UI", sans-serif;
}

.some-time-later {
	font-family: "Some Time Later";
}

/* Zurücksetzen des Außenabstands sowie Farben und Hintergründe setzen */

body {
	background: url("https://64.media.tumblr.com/9c6669eba2a2baa025a9e87046d2c06f/tumblr_nk03vgtl9l1u289dqo3_250.png");
	background-color: #cff;
	font-family: "Tahoma", sans-serif;
	margin: 0;
}

/* Regeln für allgemeine Elemente */

h1, h2, h3, h4, h5 {
	line-height: 1;
}

h1 {
	font-size: 5em;
	margin: 0.5em 0;
}

h2 {
	font-size: 3em;
	margin: 0.3em 0;
}

h3 {
	font-size: 2em;
	margin: 0.2em 0;
}

h4 {
	font-size: 1.5em;
	margin: 0.15em;
}

h5 {
	font-size: 1.25em;
	margin: 0.125em;
}

h6 {
	font-size: 1em;
	margin: 0.1em;
}

a {
	text-decoration: none;
}

h1 a {
	color: black;
}

ul {
	display: block;
	padding: 0;
}

button ul {
	text-align: left;
}

#content button li, .window-body li {
	display: list-item;
}

button li:before, .window-body li:before {
	content: "★ ";
	font-size: 18px;
	vertical-align: 2px;
}

.window-body ul li::before {
	font-size: 14px;
}

button:disabled, button[disabled] {
	border: dashed red;
}

#list, .imgbox {
	margin: 0 240px 0 240px;
}

/* Bar */

#bar {
	background: linear-gradient(white, #dcdcdc);
	border-bottom: 1px solid #ccc;
	width: 100%;
	height: 24px;
}

#bar ul {
	display: flex;
	margin: 0;
	padding: 0;
}

#bar li {
	border-left: 1px solid #ccc;
	border-right: 1px solid white;
	list-style: none;
	margin: unset;
	padding: 0 10px 0 10px;
}

#bar b, #bar a, #bar span {
	vertical-align: middle;
}

#bar li:hover {
	background: linear-gradient(white, #e5e5e5);
}

/* Navigation */

nav {
	background: #003399;
	color: white;
	display: table-cell;
	margin: 0;
	padding: 0;
	overflow: auto;
	position: absolute;
	width: 226px;
	height: auto;
}

nav h1 {
	font-size: inherit;
	padding: 10px 0 5px 15px;
}

nav h2 {
	font-size: .9em;
	padding: 5px 0 5px 20px;
}

nav h3 {
	font-size: .8em;
	padding: 5px 0 5px 25px;
}

nav ul {
	list-style-type: none;
	margin: 0 0 0 35px;
}

nav ul ul {
	margin: 0 0 0 10px;
}

nav li {
	color: white;
	font-size: .8em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 0.4em 0;
}

nav a {
	color: white;
}

nav a:hover {
	background: white url(/assets/img/arrow.gif) no-repeat 0 50%;
	background-color: white;
	color: #003399;
	font-weight: bold;
	padding: 0 5px 0 17px;
}

nav a:active {
	background: white;
	color: #003399;
}

nav .active {
	color: aqua;
	font-weight: bold;
}

/* Inhalt */

#content {
	padding-top: 40px;
	text-align: center;
}

#content a:hover {
	background: transparent;
	color: #039;
}

#content li {
	display: inline-block;
	list-style: none;
	margin: 4px 1.5px 4px 1.5px;
}

/* Container */

.container h2 {
	display: inline-block;
	vertical-align: middle;
}

.imgbox img {
	height: 200px;
}

/* Body */

.no-border {
	border: 0;
}

.white button {
	color: white;
}

.red {
	color: red;
}

/* XP-Button (slightly modified)
 *
 * XP.css is MIT licensed.
 * https://github.com/botoxparty/XP.css/blob/main/LICENSE
 */

button {
	background: white;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(236, 235, 229, 1) 86%,
		rgba(216, 208, 196, 1) 100%
	);
	border: 1px solid #003c74;
	border-radius: 3px;
	box-shadow: none;
	box-sizing: border-box;
	font-family: "Tahoma", sans-serif;
	font-size: 1.5em;
	-webkit-font-smoothing: antialiased;
	min-width: 75px;
	min-height: 23px;
	padding: 0.5em;
	vertical-align: middle;
}

button:not(:disabled):active, button:not(:disabled).active {
	background: linear-gradient(
		180deg,
		rgba(205, 202, 195, 1) 0%,
		rgba(227, 227, 219, 1) 8%,
		rgba(229, 229, 222, 1) 94%,
		rgba(242, 242, 241, 1) 100%
	);
	box-shadow: none;
}

button:not(:disabled):hover {
	box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}

button:focus, .focused {
	box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4;
	outline: 1px dotted black;
	outline-offset: -4px;
}

button::-moz-focus-inner {
	border: 0;
}

/* Retro-Button */

.tech-outer {
	background: black;
	border: 0;
	color: white;
	padding: 13px;
}

.tech-inner {
	border-radius: 0.4rem;
	box-shadow: 0 0 0 2px blue, 0 0 0 6px black, 0 0 0 8px blue;
	font-family: "Press Start 2P";
	padding: 16px 10px;
}

/* Weitere Buttons */

#denpa {
	background: #cff;
	border: 2px solid #069;
	color: #069;
	font-family: "Mochiy Pop One";
}

/* Regeln für verschiedene Auflösungen */

@media only screen and (max-width: 2560px) {
	#header {
		width: 1440px;
	}
}

@media only screen and (max-width: 1920px) {
	#header {
		width: 1280px;
	}
}

@media only screen and (max-width: 1760px) {
	#header {
		width: 1024px;
	}
}

@media only screen and (max-width: 1600px) {
	h1 {
		font-size: 4em;
	}

	h2 {
		font-size: 2.5em;
	}

	h3 {
		font-size: 1.75em;
	}

	h4 {
		font-size: 1.5em;
	}

	h5 {
		font-size: 1.25em;
	}

	#header {
		width: 960px;
	}
}

@media only screen and (max-width: 1440px) {
	#header {
		width: 800px;
	}
}

@media only screen and (max-width: 1320px) {
	nav {
		display: none;
	}
}

@media only screen and (max-width: 1280px) {
	h1 {
		font-size: 3.2em;
	}

	h2 {
		font-size: 2em;
	}

	h3 {
		font-size: 1.6em;
	}

	h4 {
		font-size: 1.4em;
	}

	h5 {
		font-size: 1.2em;
	}
	
	.container img {
		max-width: 100px;
	}
}

@media only screen and (max-width: 1024px) {
	h1 {
		font-size: 2.5em;
	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.25em;
	}

	h5 {
		font-size: 1.125em;
	}

	#header {
		margin-top: 1em;
		width: 640px;
	}
	
	.container img {
		max-width: 80px;
	}

	button {
		font-size: 1em;
	}
}

@media only screen and (max-width: 720px) {
	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.5em;
	}

	h3 {
		font-size: 1.375em;
	}

	#header {
		max-width: 576px;
	}
}

@media only screen and (max-width: 640px) {
	h1 {
		font-size: 1.75em;
	}

	h2 {
		font-size: 1.375em;
	}

	h3 {
		font-size: 1.25em;
	}

	h4 {
		font-size: 1.125em;
	}

	h5 {
		font-size: 1.1em;
	}
	
	.container img {
		max-width: 60px;
	}
}