@charset "utf-8";

/*
 * This is the main style page.
 * It will manage most global styles.
 * 
 * In contrast to the old Version it will take more browsers' standard values like margins and paddings.
 * */

@import "nav-mobile.css" (max-width: 799px);
@import "nav.css" (min-width: 800px);
@import "../lib/font-awesome-4.7.0/css/font-awesome.min.css";
@import "../lib/fontawesome-free-5.13.0-web/css/fontawesome.css";
@import "../lib/fontawesome-free-5.13.0-web/css/brands.css";
@import "../lib/fontawesome-free-5.13.0-web/css/solid.css";

body {
	font-family: Arial, sans-serif;
	background-color: #404040;
	margin: 0;
}

#top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: #8080FF;
	color: white;
	text-align: center;
	line-height: 50px;
	font-size: 40px;
	vertical-align: middle;
	text-decoration: none;
}

#container {
	width: 90%;
	margin: 0 auto;
	box-shadow: 0 0 5px 0 black;
	margin-bottom: 500px;
}

#nav::before, #nav::after, #footer::before {
	content: "";
	display: block;
	width: 100%;
	height: 5px;
	background-color: black;
	background: linear-gradient(90deg, #FF0000 0%, #FFFF00 25%, #00FF00 50%, #0000FF 75%, #FF00FF 100%);
}
#nav::before, #nav::after {
	height: 2px;
}

#header {
	text-align: center;
	background-color: #FFFFFF;
	background: radial-gradient(ellipse at center, #E0E0E0 0%, #FFFFFF 100%);
	/* not with padding (was 80px) to guarantee same height also if content has different height */
	/* line-height: 200px; won't give the same because there might be more than one line */
	min-height: 180px; /* if necessary take more space; 180px because of padding to get a total height of 200px */
	display: flex; /* a vertical flex (-> column) */
	flex-direction: column;
	justify-content: center;
	padding: 10px;
}

@media screen and (max-width: 799px) {
#container {
	width: 100%;
}

#header {
	padding-left: 10px; /* those two will have no effect, because 10px is now also standard for bigger screens */
	padding-right: 10px;
	overflow-wrap: break-word;
}
}

#header h1 {
	font-size: 3em;
	margin: 0;
}

/* for nav see import on top of this file */

#content {
	background-color: #FFFFFF;
}

#main h1, #main h2, #main h3 {
	color: #4040FF;
}

#main p {
	color: #606060;
}

#main a, #main a:hover, #main a:active, #main a:visited {
	color: #202020;
	text-decoration: none;
}

#main a::after {
	font-family: FontAwesome;
	content: " \f0c1";
}

#main, #news, #sidenav {
	padding: 5px;
}

@media screen and (min-width: 800px) {
#content {
	display: flex;
}

#main {
	flex-basis: 0%;
	flex-grow: 4;
}

#news {
	order: 100;
	flex-basis: 0%;
	flex-grow: 1;
}

#sidenav {
	order: 0;
	flex-basis: 0%;
	flex-grow: 1;
}
}

@media screen and (max-width: 799px) {
#news, #sidenav {
	max-height: 200px;
	overflow-y: scroll;
	box-shadow: 0 -10px 10px 0 #606060 inset;
}
#sidenav {
	max-height: 100px;
}
}

#news, #sidenav {
	background-color: #C0C0C0;
}

#footer ul {
	display: flex;
	background-color: #FFFFFF;
	list-style-type: none;
}
#footer ul li {
	flex-grow: 1;
}
#footer * {
	margin: 0;
	padding: 5px;
}
#copyright {
	flex-grow: 1;
	text-align: right;
}