/* css reset - makes the layout looking good in all browsers */
:root{
	--weite: min(1080px,100vw);
	--hoehe: 100dvh;

}

* {
  box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	/*vertical-align: baseline; */}

}
html {
	width: var(--weite);
	height: var(--hoehe);
	margin: 0 auto;
	padding: 0;

}
body {
	
	font:12px/20px Arial;
	background:#e0f3ff url(bg.png) repeat scroll 0 0;
	height: var(--hoehe);
	margin: 0 auto;
	padding: 0;
	
	width: var(--weite);
	height: var(--hoehe);
	}

ol, ul {
	list-style: none; }

/* Main Styles */	
	


#wrapper{   	
    width: var(--weite);
    margin-left:auto;
    margin-right:auto;
	margin-top:30px;  
	/*background-color: #dddddd;*/
	display: flex;
    justify-content: center;
    align-items: center;
	
}

#Ueberschrift{  
     width:var(--weite);
    margin-left:auto;
    margin-right:auto;
	margin-top:10px;
	
	position: relative;
	/* width:972px;	*/
	height: 80px;
	/*margin-top:0px; */
    
}
#Gleichung {
	letter-spacing:5px;
	font-size:18pt;
    position:absolute;
    /*float: left;*/
	margin-top:20px;
    margin-left:15px;
    color:#0000ff;
	/*background-color:red;*/
}
#Wort {
    letter-spacing:calc(0.12*var(--weite));
    font-size:60pt;
   	margin-left:auto;
    margin-right:auto;
	/*background-color:yellow;*/
	/*clear:both;*/
    text-align:center;
	
	
	padding-top: 60px;
}
#Pythago {
    width: 120px;
	height:auto;
    /*float: right;*/
	position:absolute;
	right:15px;
	/*background-color:green;*/
   
}

#nav {
	display: block;
	position:relative;
	width:var(--weite);
	margin-left:auto;
	margin-right:auto;
    /*background-color:white;*/
	padding-top: 10px;
	
}

ul#navigation {
	margin: 0 auto;
	position:relative;
	/*float:left;*/
	border-left:1px solid #c4dbe7;
	border-right:1px solid #c4dbe7;
	
	display: flex;
            justify-content: center;
            align-items: center;
}

ul#navigation li {
	display:inline;
	font-size:12px;

	margin:0;
	padding:0;
	float:left;
	position:relative;
	border-top:1px solid #c4dbe7;
	border-bottom:2px solid #c4dbe7;
	border-left:1px solid #c4dbe7;
	border-right:1px solid #c4dbe7;
}

ul#navigation li a {
	
	padding-top:10px;
	padding-bottom:10px;
	width:182px;
	text-align:center;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border-right:1px solid #fff;
	border-left:1px solid #C2C2C2;
	border-top:1px solid #fff;
	background: #f5f5f5;
	font-weight:700;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover {
	background:#f8f8f8;
	color:#282828;
}

ul#navigation li:hover > a {
	background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
	visibility:visible;
	opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
	visibility:hidden;
    position: absolute;
    z-index: 99999;
	width:182px;

	background:#f8f8f8;
	box-shadow:1px 1px 3px #ccc;
	opacity:0;
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 43px;
    
}

ul#navigation ul li ul {
    top: 0;
    left: 183px;
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:182px;
	
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}

#frame1 {
	
 
	width: var(--weite); 
	margin-left: auto;
	margin-right: auto; 
	
	height: calc(var(--hoehe) - 200px);

	text-align: center; 
}

iframe {
	
	width: 100%;
	height:100%;
}	
@media only screen and (max-width: 768px) {
	#Gleichung, #Pythago,#Wort,#Ueberschrift { display:none;}
	ul#navigation li a {width:92px;}
	ul#navigation ul, ul#navigation ul li ul {width:92px;}
	ul#navigation ul li ul {left: 93px;}
	ul#navigation ul li a {width:92px;}
	ul#navigation li {font-size:10px;}
	ul#navigation {justify-content: left;}
	#frame1 {height: calc(var(--hoehe) - 140px);}
}