html    {
font-size: 18px;
}
body   {
background-color: dodgerblue;
margin: 0;
font-family: 'Nanum Gothic Coding', monospace;
font-size: 18px;
box-sizing: border-box;
display: grid;
grid-template-columns: 3.5fr;
grid-template-areas:
"header"
"nav"
"content"
"footer"
}
/* /////////// Grid Layout ///////////// */
.header   {
grid-area: header;
padding-bottom: 2%;
background-image: -o-linear-gradient(  dodgerblue , black    );
background-image: -webkit-gradient(  linear , left top, left bottom , from(dodgerblue) , to(black)    );
background-image: linear-gradient(  dodgerblue , black    );
}
.nav   {
grid-area: nav;
background-color: black;
padding-bottom: 2%;
}
.content   {
grid-area: content;
background-image: -o-linear-gradient(    black , #282525    );
background-image: -webkit-gradient(    linear , left top, left bottom , from(black) , to(#282525)    );
background-image: linear-gradient(    black , ##282525    );
padding-bottom: 2rem;
min-width: 1280px;
}
.footer   {
grid-area: footer;
background-image: -o-linear-gradient( #282525 , #1e90ff  );
background-image: -webkit-gradient( linear , left top, left bottom , from(#282525) , to(#1e90ff)  );
background-image: linear-gradient( #282525 , #1e90ff  );
height: 150px;
}
/*////// description content //////*/
.description   {
background-color: black;
color: white;
margin: 0% 3% 6% 3%;
padding: 0.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
border-radius: 10px;
text-align: left;
line-height: 2;
border-style: solid;
border-color: dodgerblue;
border-width: 1px;
box-shadow: #ff8000 0px 0px 12px;
}
/*////// description example //////*/
.example   {
color: white;
font-family: arial;
margin: 6% 3%;
border-style: solid;
border-color: silver;
border-width: 1px;
text-align: left;
line-height: 1;
border-radius: 5px;
overflow-x : auto;
overflow-y : auto;
scrollbar-color: dodgerblue white;
box-shadow: #1e90ff 0px 0px 12px;
line-height: 1.4;
white-space: nowrap;
font-size: 20px;
}
/*////// description show //////*/
.output   {
background-image: URL(Bilder/Screenshot.png);
background-size: cover;
margin: 6% 3%;
padding-top: 5rem;
padding-bottom: 4rem;
border-radius: 10px;
font-family: arial;
border-style: solid;
border-color: black;
border-width: 1px;
box-shadow: #ffffff 0px 0px 12px;
}
ul li {
list-style-image: URL('Bilder/Logo12Marker.png');
	
}
.nav ol  {
display: flex;	
}
.nav ol li  {
list-style-type: none;	
padding: 10px;
margin:  15px;
box-shadow: 4px 4px 4px white;
background-color: transparent;
border-left: 1px solid orange;
border-top: 1px solid dodgerblue;
}
.nav ol li:last-child  {
margin-right:  3%;
}
.nav ol li a {
	text-decoration: none;
}
.active   {
background-color: transparent;
color: red;
padding: 5px 5px;
}
.nav ol li a:link  {
	color: orange;
	
}
.nav ol li a:visited  {
	color: dodgerblue;
	
}
.nav ol li a:hover  {
	color: grey;
	
}
.nav ol li a:active  {
	color: red;
	
}

.footerFloatRight   {
float: right;
padding:  4rem 0.5rem 0.5rem 6rem;
}
.pictureElementLeft {
float: left;
padding: 1rem;
}
.pictureElementRight {
float: right;
padding: 1rem;
}
.downPicture   {
padding-top:  4%;
	
}