/* 
    Created on : 20.11.2020, 13:59:53
    Author     : luschjo
*/

@font-face {
  font-family: 'Orange Juice';
  src: url(../fonts/orange.ttf)  format('truetype');
}

body, header, nav, main, footer{box-sizing: border-box;}/*Damit Rahmen, Padding etc innen hinzugefügt werden. Muss ganz oben stehen.*/
/*******************************************************************************************
                                      Base-Layout-Styles
*******************************************************************************************/
body {
  display: grid;
  grid-template-columns: 17rem auto;
  grid-template-areas:  "header header"
                        "nav main";
  font-family: sans-serif;
  margin: 0;
  padding:0;
}

header {
  grid-area: header;
  height: 4rem;
  padding: 1rem 1rem 1rem 17rem;
}

nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 1rem;
}

main{
  grid-area: main;
  border-radius: 2rem 0 0 0;
  height: calc((100vh - 4rem) - 1px); /*100vh = Hoehe des sichtbaren Bereichs
                                        4rem = Hoehe des Headers
                                        1px = wegen dem Rahmen(border-top-width) in Combined Layout-Styles (body,main) */
  overflow: hidden;
  overflow: scroll;
  overflow: auto; /*Eigentlich sollte auto die anderen Werte überschreiben, aber der Firefox verhält sich nur korrekt, wenn vorher hidden oder scroll angegeben wurde.*/
  padding: 1rem;
  /*Dark Shadow*/
  box-shadow: 0rem 0rem 1rem 1px gray,
              inset 0.5rem 3rem 1.5rem -3rem gray;
}

footer {
  grid-area: footer;
  height: 5vh;
}

/*******************************************************************************************
                                 Combined Layout-Styles
*******************************************************************************************/
body,
header{
  /*Background Texture*/
  background: linear-gradient(45deg, #e1e1e1 17%, transparent 17%, transparent 25%, #d1d1d1 25%, #e1e1e1 36%, transparent 36%, transparent 64%, #e1e1e1 64%, #e1e1e1 75%, transparent 75%, transparent 83%, #e1e1e1 83%) 1px 1px;
  background-color: #ececec;
  background-size: 5px 4px;
  /*Light Shadow*/
  box-shadow: inset 1.7rem 0 1rem -1rem white, 
              inset 0 1.7rem 1rem -1rem white;
}

body,
main{
    border: solid 0px rgb(100,100,100);
    border-top-width: 1px; /*Der Rahmen von body muss bei der main Höhe abgezogen werden.*/
    border-left-width: 1px;
}
/*******************************************************************************************
                                      Header
*******************************************************************************************/
header{
  text-align: center;
}

header a {
  font-family: 'Orange Juice';
  line-height: 0.8em;
  font-size: 3em;
  text-shadow: 0 3px 2px rgb(50,50,50);
  text-decoration: none;
  color: #a60000;
}

/*******************************************************************************************
                                  Navigation-Sidebar
*******************************************************************************************/
nav a {
  color: white;
  text-decoration: none;
  text-align: center;
  margin-top: 1em;
  text-shadow: 2px 2px 1px black;
}

nav a:hover {
  margin-top: calc(1em - 1px);
  margin-left: -2px;
  text-shadow: 3px 3px 1px black;
  margin-bottom: 1px;
}

nav a:active {
  transition: 100ms;
}

nav a.active ,
nav a:active{
  color: white;
  margin-left:0;
  margin-top: 1em;
  margin-bottom: 0;
  text-shadow: 1px 1px 1px black;
}


/*******************************************************************************************
                                         Main
*******************************************************************************************/
main {
  background-color: white;
  font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
  font-weight: lighter;
  padding: 1em;
}

main h1 {
  font-family: Consolas, monaco, monospace;
  font-weight: lighter;
}

main h2 {
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
  font-weight: bold; 
}

main h3 {
  font-family: Consolas, monaco, monospace;
  font-style: italic;
  font-weight: lighter;
}

main a{
  color: #bd0000;
  font-weight: normal; 
  text-decoration: none;
  transition: 200ms;
}

main a:hover{
  text-shadow: 0 0 2em red;
}

main img{
  border-radius: 0.5rem;
}

main textarea {
  box-sizing: border-box;
  width: 100%;
  height: 30vh;
}

main input[type=text] {
  box-sizing: border-box;
  width: 100%;
}

main .box,
main input,
main textarea{
  padding: 1em;
  margin-bottom:1em;
  border-style: solid;
  border-width: 1px;
  border-radius: 2rem;
}

main span.code{
  font-style: italic;
  color: rgb(50,50,50);
}

main section.split-layout{
    display: flex;
    flex-wrap: wrap;
}
main section.split-layout > *{
    flex-basis: 10%;
    flex-grow: 1;
}

main section.split-layout > *:not(:last-of-type) {
  margin-right: 1em;
}

/*******************************************************************************************
                                      Footer
*******************************************************************************************/
footer {
  font-family: Tahoma, Verdana, Segoe, serif;
  font-weight: bold;
  padding-top: 3em;
  padding-bottom: 5em;
  text-align: center;
}

footer span.jonathan{
  color: black;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-weight: lighter; 
  font: italic normal;
}