.container{
  display: flex;
  font: 38px KarolingischeMinuskel, sans-serif;

}
 
img {
      max-width:100%;
      height: auto;
}

.button {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

a:visited {
  background-color: green;
  color: blue;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

html {
	position: relative;
	min-height: 100%;
        background-image: url("gras.png");
}
body {
	min-height: 100%;
	margin: 0 0 80px;
	background: #00FF64;
background: green linear-gradient(60deg, green, #64FF00,  #00FF64);	
        //background-image: url("gras.png");
}

@media screen and (min-width: 540px)  {
  body {
    background-color: green;
        //background-image: url("gras.png");
  }
}
@media screen and (min-width: 740px)  {
  body {
    background-color: green;
        //background-image: url("gras.png");
  }
}

@font-face{
  font-family:'KarolingischeMinuskel';
  src: url('0864_folchart.otf'); 
}

h1.dreiD
{
        font-size: 3em;
        font-weight: bold;
        font: 38px KarolingischeMinuskel, sans-serif;
        text-align: center;
        margin: 1em 0;
        color: green;
        text-shadow:
                -1px 1px 0 #ddd,
                -2px 2px 0 #c8c8c8,
                -3px 3px 0 #ccc,
                -4px 4px 0 #b8b8b8,
                -4px 4px 0 #bbb,
                0px 1px 1px rgba(0,0,0,.4),
                0px 2px 2px rgba(0,0,0,.3),
                -1px 3px 3px rgba(0,0,0,.2),
                -1px 5px 5px rgba(0,0,0,.1),
                -2px 8px 8px rgba(0,0,0,.1),
                -2px 13px 13px rgba(0,0,0,.1)
                ;
}



.navigation {
	text-transform: uppercase;
	padding: 10px;
	background: green;
        background-image: url("gras.png");
        background-repeat: repeat;
	display: flex;
}

/***********************************************
	WRAPPERS
***********************************************/
/* SITE */
#wrapper {
	max-width: 1500px;
	min-height: 600px;
	margin: 0 auto;
	margin-top: 40px;
	overflow: hidden;
}
/* articles | sidebar */
#wrapper .articles,
#wrapper .sidebar {
	float: left;
}
#wrapper .articles {
	max-width: calc(100% - 1500px);
	width: 100%;
}
#wrapper .full {
	float: none;
	max-width: 1800px;
	margin: 0 auto;
}
#wrapper .sidebar {
	width: 400px;
}
.article,
.articles .page,
.content-wrapper {
	background: palegreen;
	margin-bottom: 18px;
	box-shadow: 21px 21px 35px rgba(39,45,49,.08),2px 5px 22px rgba(39,45,49,.06);
}
.content-wrapper {
	padding: 65px 65px 25px 65px;
}

.home-wrapper {
	padding: 19px 45px 19px 45px;
}

/***********************************************
	HEADER
***********************************************/


.site-header {
	background: #00FF64;
background: green linear-gradient(80deg, green, #64FF00,  #64FF00);	
}
/* NAVIGATIONBAR */
.thebar {
	max-width: 2500px;
	margin: 0 auto;
	padding: 29px;
}
.thebar .logo {
	float: left;
	width: 50%;
}
.thebar:after {
	content: '';
	clear: both;
	display: table;
}

/***********************************************
	CONTENT
***********************************************/
/* TITLE -> articles */
.articles .title {
	font-size: 24px;
	color: red;
	font-weight: 700;
	margin-bottom: 25px;
	word-wrap: break-word;
}
.articles .title a {
	color: red;
	text-decoration: none;
}
.articles .title a:hover {
	color: red;
}
.articles .content h1 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 30px;
}
.nocop {
        webkit-user-select: none;
        moz-user-select: none;
        ms-user-select: none;
        user-select: none;
}

/****************************************************
	FOOTER
****************************************************/
.site-footer {
	background: red;
}
.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 120px;
	width: 100%;
        background-image: url("gras.png");
	font-size: 14px;
	text-align: left;
	color: blue;
	padding: 25px;
	box-sizing: border-box;
        background-repeat: repeat;
}

.conjugationresult {
        font-size:30pt;
        background-color: palegreen;
        text-align: left;
}

#tr-1 {
        background-color:#64FF64;
}

#tr-2 {
        background-color:#00FF64;
}

.buttonarea-tempi {
        font-size:12pt;
        background-color: palegreen;
        text-align: left;
}
.buttonarea-types {
        font-size:12pt;
        background-color: #64FF64;
        text-align: left;
}

/****************************************************
        MENU
****************************************************/


nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}


nav ul {
	background: green; 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background: red;
	                border-radius: 80px;  
		}
			nav ul li:hover a {
				color: black;
			}
		
		nav ul li a {
			display: block; padding: 25px 40px;
			background: #64FF00;
	                border-radius: 80px;  
			color: blue; text-decoration: none;
                        padding: 4px 12px 4px 12px;
                        border-top: 4px solid #00FF64;
                        border-right: 4px solid palegreen;
                        border-bottom: 4px solid palegreen;
                        border-left: 4px solid #00FF64;
                        //background-image: url("papier.png");
		}
			
		
	nav ul ul {
		background: yellow; border-radius: 1px; 
                background-image: url("gras.png");
		position: absolute; top: 100%;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727f;
			border-bottom: 1px solid #575f6f; position: relative;
		}
			nav ul ul li a {
				padding: 15px 40px;
				color: #fff;
			}	
				nav ul ul li a:hover {
					background: red;
				}
		
	nav ul ul ul {
		position: absolute; left: 100%; top:0;
	}