/*style.css*/

/* wesentlich für css-Dropdown*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1; /* Damit kann die aufklappende Menü-Box andere Inhalte überlagern*/
}
.dropdown:hover .dropdown-content {
  display: block;
}

/*zusätzliches Styling des headers*/

/* Variablen setzen*/
:root {
  --main-bg-color: #445566;
}

/*alle Abstände auf Null setzen!*/
*{
 margin: 0px;
 padding: 0px;
}


header{
	background-color:var(--main-bg-color); /*Hintergrundfarbe des headers */
	padding-bottom:0.4em;
}
header h1{
	font-size:135%;
	text-align: center;/* Die Überschrift im Header zentrieren */
	margin-bottom:0.5em; /* Einen Abstand unter der Überschrift einfügen*/ 
	padding-top:0.6em;
	color:#D6DA87; /*Farbe der Überschrift wählen*/
}

/*Farbe es Navis*/
nav
{
	color:#d2ffd2;
	margin-bottom:0.2em;
}

nav >ul{
	display: flex;
  flex-direction: row;
  justify-content: start;
}

/* das Aufklappmenü stylen */
.dropdown
{
	width:6em; /* feste Breite für alle Menüpunkte, nach der sich die Untermenüs ausrichten */ 
	text-align:center; 
}

.dropdown-content
{
	background-color: #776611; /*Hintergrundfarbe der aufgehenden Box*/
	width:auto; /*Breite nach dem Inhalte der Navigationsmenüpunkte */ 
	min-width: 100%; /* mindestens so breit wie Hauptmenüpukt */
	padding:0;
	box-size: border-box; /* Größenangben beziehen sich immer auf die Gesamtgröße ink. Rahmen */
}


.dropdown-content li{
	list-style-type: none; /* Listenzeichen ausblenden*/
	border:2.0px outset black;
	background-color: #D99F55; /*Hintergrundfarbe der aufgehenden Box*/
	margin: 0.4em;
}

/* Listenpunktformatieren beim Überfahren mit der Maus */
li:hover{
	color:#66CC66;
	background-color:Gold;
}

/* Body stylen */
body{
	background-color: #5D708E;
}

section{
	margin-top:2em;
	margin-bottom:2em;
	color:#F1F312;
}

section p{
	font-size:120%;
	margin:0.8em;
}

section pre{
		margin:0.8em;
		padding:0.3em;
		Display: block;
		background-color:Teal;
		color:#0BF850;
		font-style: italic;
	  max-width:900px; 
	  width:auto;
		max-height: 15em;
		overflow: auto;
		tab-size:      1;
		-moz-tab-size: 1;
}

section h2{
	color: #22D317;
	text-align:center;
	margin-bottom:2em;
}


footer {
	line-height: 1.5em;
	width: 100%;
  background-color: var(--main-bg-color);
  color: white;
  text-align: right;
}

footer >p
{
	padding-right:1em;
}



/*
 * Fixieren von Header und Footer nur, wenn genug Platz ist
 */
@media all and (min-height: 20em){
	header{
		width:100%;
		position:fixed;
		top:0;
		left:0;
	}

	section{
		margin-top:8em;
	}
	
	footer{
			position:fixed;
			bottom:0;
	}
}

/*Tool-Tipp*/
a.tooltip{
	position: relative;
	text-decoration: none;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

a.tooltip:after {
	content: attr(data-tooltip);
	position: absolute;
	left: 20%; /*leichter versatz nach rechts*/
	background: #555;
	padding: 0.6em 1em;
	color: #fff;
	border-radius : 0.5em;
	border-color: #555 transparent transparent transparent;
	opacity: 0;
}

/*zeige den Text, beim überfahren mit der Maus*/
a.tooltip:hover:after {
  bottom: 100%;
	opacity: 1;
}