/*Color Palette by Color Palettes: https://colorpalettes.net/color-palette-3880/ 
Blue-Black: #100e15
Dark-Blue: #323e53
Blue: #408fb4
Icy-Blue: #bddfef
Purple: #64566e */

html {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background-color: #323e53;
	color: #100e15;
	font-size:16px;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	margin:0;
	padding:0;
	min-height:100%;
}

#layout {
	height:100%;
	max-width: 1900px; 
	display:grid;
	grid-template-columns: 350px 2fr 1fr;
	grid-template-rows: 600px 1.5fr 1fr;
}
 #headerpic { 
	background-color: #e7d9be;
	background-image: url("images/header_image.png");
	background-repeat: no-repeat;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	z-index:5;
} 
#header_scroll {
	background-color: #e7d9be;
	background-image: url("images/header_scroll.png");
	background-repeat: repeat-y;
	grid-column: 1 / 2;
	grid-row: 2 / 4;
}
#random_fact {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	color:rgb(145, 106, 34);
	padding:20px;
	bottom: 0px;
}
#content {
	background-color: #e7d9be;
	grid-column: 2 / 3;
	grid-row: 1 / 4;
	padding: 10px 20px 20px 20px;
	
}

#rightside {
	background-image: url("images/rand.png");
	background-repeat: repeat-y;
	pointer-events:none;
	grid-column: 3 / 4;
	grid-row: 1 / 4;
	z-index:1; 
}

#navi {
	padding-left: 50px;
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	
}

#impressum {
	padding-left: 50px;
	padding-bottom: 20px;
	background-color:#64566e; 
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}

nav {
	width: 200px;
	pointer-events:auto;
	z-index:2;
}
nav ul {
	margin-left: -40px;
	padding: 0;
	list-style-type: none;	
	
}

nav li {
	text-align: right;
	font-weight: bold;
	background-color:#408fb4;
	margin-top:10px;
}

nav li a {
    display: block;
	padding: 8px 16px;
	text-decoration: none;
	color: #bddfef;
}

/* Purple Color for the link to the chargen */
.nav_chargen {
	background-color:#64566e;
	color: pink;
}
nav li a:hover {
  background-color: #bddfef;
  color: #323e53;
}

h1 {
	background-color: #323e53;
	border-radius:5px;
	padding: 5px 10px 5px 10px;
	color: #bddfef;
	font-size: 18px;
	font-variant:small-caps;
}
h1 a{
	color: #bddfef;
}
h1 a visited {
	color: #bddfef;
}

a {
	color: #408fb4;
}

a visited {
	color: #64566e;
}
.text::first-letter {
  font-weight: bold;
  font-size:38px;
  float:left;
  padding-top: 10px;
  padding-right: 3px;
}

hr.moons {
	border: 4px double #64566e; 
	border-left: none; border-right: none; border-bottom: none;
	text-align: center;
}
hr.moons:after {
	content: '\00263D' '\0025EF''\00263E';
	background-color: #e7d9be;
	display: inline-block;
	position: relative;
	top: -15px; 
	padding: 0 10px;
	color: #64566e ;
	font-size: 18px;
}

.button, .button:visited {
	background-color:#323e53;
	display:inline-block;
	padding:5px 10px 6px; 
	color:#bddfef; 
	text-decoration:none; 
	border-radius:5px;
	-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
	position:relative; 
	cursor:pointer; 
	font-weight:bold;}
 	
.button:hover {
	background-color:#bddfef; 
	color:#100e15; 
}

.post_container {
	display:flex;
	flex-wrap:wrap;
}
.post {
	flex:3;
}
.post_sidebar{
	flex:1;
	padding-left: 20px;
	border-left: green;
}