/* Beginn - CSS-Grid zur Aufteilung der Site */
.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 0.5em;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

nav {
  grid-column: 1 / 13;
  grid-row: 2;
  display: grid;
  gap: .5em;  
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}

article {
  grid-column: 4 / 13;
  grid-row: 3;
}

aside {
  grid-column: 1 / 4;
  grid-row: 3;
  text-align: center;
}

footer {
  grid-column: 1 / 13;
  grid-row: 4;
}
/* Ende -  CSS Grid zur Aufteilung der Seite */

/* Body Formatierungen */
body {
  background-color: #F5F5DC;
  font-family: Lora, Helvetica, Arial, sans-serif;
  padding: 0.5em;
}

body a {
  text-decoration: none;
}

/*Nav Formatierungen*/
nav {
    border-bottom: 1px solid black;
    padding: .5em;
}

nav a {
  font-family: Lora, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25vw;
/*  color: #F5F5DC;*/
  margin: .2em 15% .2em 15%;
  padding: .5em;
  border-radius: 5px;  
}

nav a:link {
  background-color: #E76F51;
  color: #F5F5DC;
}

nav a:visited {
  background-color: #E76F51;
  color: pink;
}

nav a:focus {
  background-color: #D65A3E;
  color: #F5F5DC;
}

nav a:hover {
  background-color: #D65A3E;
  color: #F5F5DC;
}

nav a:active {
  background-color: #D65A3E;
  color: #264653;
}

/* Header Formatierungen*/
header, footer {
  border-radius: 5px;
  padding: .5em;
  background-color: #0056b3;
  color: #F5F5DC; 
  vertical-align: middle;
}

header img {
  height: 6em;
  float: left;
  margin-right: 5%;
}

header h1 {
  font-family: "Mystery Quest", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
  font-size: 4vw;
  letter-spacing: .25em;
  margin-top: 0;
  margin-bottom: 0;
}

header span {
  margin-left: 10%;
  font-size: .6em;   
  letter-spacing: 0.2em;
}



/*Aside Formatierungen*/
aside {
  padding: .5em;
  border-radius: 5px;
  background-color: #F4A261;
  color: #264653;
  font-family: "Dancing Script", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5vw;
  text-align: justify;
}

/*Article Formatierungen*/

article {
  min-height: 30em;
  color: #264653;
  text-align: justify;
  font-size:1.25vw;
  padding: .5em;
}

/*Footer Formatierungen*/
footer {
  font-size: 1em;
}

/*Forum Formatierungen*/
form.forum {
  display: inline-block;
  padding: 0.5em;
  background-color: #F4A261;
  box-shadow: 3px 3px 3px 3px #264653;
  border-radius: 5px;
  width: 98%;
}

form.forum label {
  display: inline-block;
  width: 4em;
}

form.forum label.comment {
  display:inline-block;
  width: 6em;
}

form.forum input {
  width: 85%;
  font-size: 1em;
}
form.forum textarea {
  vertical-align: top;
  height: 6em;
  width: 85%;
  font-size: 1em;
}

form.forum input:focus, textarea a:focus {
  outline-style: solid;
  outline-color: #000;
}

form.forum button {
  margin-left: 0.5em;
  font-size: 1em;
}

div.posts {
  border-radius: 5px;
  background-color: #F4A261;
  box-shadow: 3px 3px 3px 3px #D65A3E;
  padding: .5em;
  margin: .5em .5em .5em 0;
  width: 98%;
}

div.posts p.timestamp_author {
  font-size: .8em;
  font-style: oblique;
}

div.posts p.topic {
  font-weight: bold;
  font-size: 1em;
}

div.posts p.content {
  font-size: .9em;
}

div.posts p.comments {
  font-size: .8em;
  font-style: oblique;
  
}


div.posts a:link {
  color: #264653;
}

div.posts a:visited {
  color: black;
}

div.posts a:focus {
  color: #0056b3;
}

div.posts a:hover {
  color: #0056b3;
}

div.posts a:active {
  color: #264653;
}
/*Ende Forum Formatierungen*/

/* Blog Formatierungen */
div.blog {
  border-radius: 5px;
  background-color: #F4A261;
  box-shadow: 3px 3px 3px 3px #D65A3E;
  padding: .5em;
  margin: .5em .5em .5em 0;
  width: 98%;
}

a.blog {
  display: grid;
  margin-bottom: 0.2em;
  place-items: center;
}