/*           --------            */
/*         Basic Colours         */
/*           --------            */

:root {
	--clr-background-rgb: 29, 26, 27; /*#1d1a1b*/
	--clr-shiny: #df5940;
	--clr-shinier: #ff7158;
	--clr-text-200: #58372a;
	--clr-text-300: #8d5743;
	--clr-text-400: #987c7a;
	--clr-text-500: #cfc6c3;
}

/*           --------            */
/*            Layout             */
/*           --------            */

body {
	background-image: url(../img/pexels-cottonbro-4488651_cr.jpg);
	background-position: top center;
	background-size: 100rem;
	background-repeat: no-repeat;
	background-color: #080000;
	font-family: sans-serif;
	color: var(--clr-text-500);
	margin: 0 auto;
	width: min(90%, 85rem);
}



header {
	padding: 3rem;
}

nav {
	background-color: rgba(var(--clr-background-rgb), 0.8);
	border-radius: 1rem;
}

nav ul {
	padding: 0;
	margin: 0;
	display: inline-block;
}

nav ul a li {
	float: left;
	list-style-type: none;
	text-decoration: none;
	font-weight: bolder;

	color: var(--clr-shiny);
	background-color: var(--clr-text-200);
	margin: 1rem -1rem 1rem 2rem;
	padding: 1rem;
	border-radius: 1rem;
}

nav ul a:hover li,
nav ul a:active li {
	background-color: var(--clr-text-500);
	color: rgb(var(--clr-background-rgb));
	transition: 0.3s;
}

section {
	background-color: rgba(var(--clr-background-rgb), 0.8);
	padding: 2rem;
	margin-top: 1rem;
	border-radius: 1rem;
}

@media only screen and (max-width: 700px) {
	nav ul a li {
		margin: 0.5rem;
		padding: 0.6rem;
		float: left;
		list-style-type: none;
		text-decoration: none;
		font-weight: bolder;
		font-size: 1rem;
		color: var(--clr-shiny);
		background-color: var(--clr-text-200);
		border-radius: 1rem;
	}
	section {
		padding: 1rem;
	}
	aside {
		width: 100%;
	}
	header {
		padding-top: 1rem;
	}
	body {
		background-image: url(../img/pexels-cottonbro-4488651_600px.jpg);
		background-size: auto;
	}
}



/* Für main und aside */
.flexmainandside {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.flexmainandside > main{
	flex: 1 1 70%;
	min-width: 35ch;
}
.flexmainandside > main{
	flex: 1 1 30%;
}

aside {
	background-color: rgba(var(--clr-background-rgb), 0.8);
	padding: 2rem;
	margin-top: 1rem;
	border-radius: 1rem;	
}
footer {
	margin-top: 2rem;
	bottom: 0;
	padding: 1rem 0;
	width: 100%;
	background-color: rgb(var(--clr-background-rgb));
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

/*           --------            */
/*         Basic Styling         */
/*           --------            */

a {
	color: var(--clr-shiny);
}
a:hover,
a:active {
	color: var(--clr-shinier);
}

h1,
h2,
h3 {
	color: var(--clr-text-400);
	line-height: 1.2;
}

p {
	line-height: 1.2;
}

.text-center {
	text-align: center;
}

img {
	max-width: 100%;
}

/* Table */
table {
	border-collapse: collapse;
	overflow: hidden;
	border: none;
	background-color: rgba(var(--clr-background-rgb), 0.8);
}

td,th {
	padding: 5px;
	border: 1px solid var(--clr-text-400);
}

th {

	text-align: left;
}




@media screen and (prefers-reduced-motion) { 
  header {
    animation: none;
  }
}

/* Flickering animation */
@keyframes flicker {
	0%,
	19%,
	21%,
	25%,
	54%,
	56%,
	100% {
		text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
			0 0 40px var(--clr-shinier), 0 0 80px var(--clr-shinier),
			0 0 90px var(--clr-shinier), 0 0 100px var(--clr-shinier),
			0 0 150px var(--clr-shinier);
	}

	20%,
	24%,
	55% {
		text-shadow: none;
	}
}

header {
	animation: flicker 2s 2 alternate;
	color: #f2edec;
	font-size: calc(1.5rem + 3vw);
	font-family: "Quicksand", sans-serif;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
			0 0 40px var(--clr-shinier), 0 0 80px var(--clr-shinier),
			0 0 90px var(--clr-shinier), 0 0 100px var(--clr-shinier),
			0 0 150px var(--clr-shinier);
}