:root { 
	--mainBackground: #B6B46A;
	--contentBackground: #CAC994;
	--contentTextColor: #FFFFFF;
	--menuButtonBackground: #FFFFFF;
	--menuButtonTextColor: #B6B46A;
	--counterTextColor: #FFFFFF;
	--counterNumberTextColor: #777777;	
	--buttonBackground: #515151; 
	--buttonText: #FFFFFF; 
	--buttonDisabledBackground: #cccccc;
	--buttonDisabledColor: #666666;
	--buttonHoverBackground: orange;
	--buttonHoverColor: #FFFFFF;
	--inputPlaceholderColor: gray;
	
}

*[lang="en"] :not(:lang(en) ), 
*[lang="de"] :not(:lang(de) ), 
*[lang="es"] :not(:lang(es) ) {
	display: none;
}

*[name="mobileAll"], *[name="mobileLandscape"]  {
	display: none;
}

html, body {
/*
	font-family : "helvetica neue, verdana, bradley hand itc, papyrus, arial, sans-serif";
*/
	background-color: var(--mainBackground);
	color: var(--contentBackground);
	overflow: hidden;
	height: 100%;
	width: 100%;
	margin: 0;
}

/*
 *this makes sure that the padding and border are included in the total width and height of all elements
 *
 * em	Relative to the font-size of the element (2em means 2 times the size of the current font)
 *
 * @see https://www.w3schools.com/cssref/css_units.asp
 */
*, *::after, *::before {
    -webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	font-size: 1em;
}

.grid-container {
	display: grid;
	grid-gap: 0px;
	grid-template-rows: 3em 10em 6em 3em 2em 3em 2em 3em 2em 3em 1fr 2em;
	grid-template-columns: 75px 225px 2fr 2em 10em 2em 10em 2em 10em 1fr 1em;
	grid-template-areas: 
		'world 		. 		login	.		home 	.		guestbook 	. 		about 	lang	.'
		'world 		content content content content	content content		content	content content	.'
		'. 			content content content content content	content		content	content content	.'
		'pictures 	content content content content content	content		content	content content	.'
		'. 			content content content content content	content		content	content content	.'
		'videos 	content content content content content	content		content	content content	.'
		'. 			content content content content content	content		content	content content	.'
		'bikes 		content content content content content	content		content	content content	.'
		'. 			content content content content content	content		content	content content	.'
		'dive 		content content content content content	content		content	content content	.'
		'. 			content content content content content	content		content	content content	.'
		'.			counter counter counter counter counter	counter		counter	counter	counter	.';
	align-content: center;
	height: 100%;
	width: 100%;
	justify-content: start;
}
  
@media 
screen and (orientation : portrait) and (min-device-height: 1023px) and (min-device-width: 767px), 
screen and (orientation : landscape) and (min-device-height: 767px) and (min-device-width: 1023px) {
	/* For landscape tablets: */

}

/* 
 * 
screen and (orientation : portrait) and (min-device-height: 927px) and (max-device-height: 1105px), 
 */
@media only screen and (min-device-width: 927px) and (max-device-width: 1105px)
{	
	div#main.grid-container {
		grid-template-rows: 3em 10em 6em 3em 2em 3em 2em 3em 2em 3em 2em 3em 1fr 2em;
		grid-template-columns: 75px 225px 2fr 2em 10em 2em 10em 2em 1fr 1em;
		grid-template-areas: 
		'world 		. 		login	.		home 	.		guestbook 	. 		lang	.'
		'world 		content content content content	content	content 	content	content	.'
		'. 			content content content content content	content		content content .'
		'pictures 	content content content content content	content		content content	.'
		'. 			content content content content content	content		content content	.'
		'videos 	content content content content content	content		content content	.'
		'. 			content content content content content	content		content content	.'
		'bikes 		content content content content content	content		content content	.'
		'. 			content content content content content	content		content content	.'
		'dive 		content content content content content	content		content content	.'
		'. 			content content content content content	content		content content	.'
		'about		content content content content content	content		content content	.'
		'. 			content content content content content	content		content content	.'
		'.			counter counter counter counter counter	counter		counter	counter	.';
	}
	div#home, div#guestbook, div#about, div#pictures, div#videos, div#bikes, div#dive, div#world {
		width: 8em;
	}
	div#about {
		position: relative;
		left: 1.2em;
		top: 0 !important;
	}
}


/* 
 * 
screen and (orientation : portrait) and (min-device-height: 819px) and (max-device-height: 926px), 
 */
@media only screen and (min-device-width: 819px) and (max-device-width: 926px)
{	
	div#main.grid-container {
		grid-template-rows: 3em 10em 6em 3em 2em 3em 2em 3em 2em 3em 2em 3em 2em 3em 1fr 2em;
		grid-template-columns: 75px 225px 2fr 2em 10em 2em 1fr 1em;
		grid-template-areas: 
		'world 		. 		login	.		home 	.		lang 	.'
		'world 		content content content	content	content content .'
		'. 			content content content content	content content .'
		'guestbook 	content content content content	content content .'
		'. 			content content content content	content content .'
		'pictures	content content content content	content content .'
		'. 			content content content content	content content .'
		'videos 	content content content content	content content .'
		'. 			content content content content	content content .'
		'bikes 		content content content content	content content .'
		'. 			content content content content	content content .'
		'dive 		content content content content	content content .'
		'. 			content content content content	content content .'
		'about		content content content content	content content .'
		'. 			content content content content	content content .'
		'.			counter counter counter counter	counter	counter .';
	}
	div#home, div#guestbook, div#about, div#pictures, div#videos, div#bikes, div#dive, div#world {
		width: 8em;
	}
    div#about, div#guestbook {
		position: relative;
		left: 1.2em;
		top: 0 !important;
	}
}

/* 
 * 
screen and (orientation : portrait) and (min-device-height: 769px) and (max-device-height: 818px), 
 */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 818px),
{	
	div#main.grid-container {
		grid-template-rows: 2.1em 5em 2.5em 2.5em 1em 2.5em 1em 2.5em 1em 2.5em 1em 2.5em 1em 2.5em 1em 2.5em 1fr 2.1em;
		grid-template-columns: 75px 225px 10em 1fr 1em;
		grid-template-areas: 
		'world 		login	. 		lang	.'
		'world 		content content content .'
		'. 			content content content .'
		'home		content content content .'
		'. 			content content content .'
		'guestbook	content content content .'
		'. 			content content content .'
		'pictures 	content content content .'
		'. 			content content content .'
		'videos 	content content content .'
		'. 			content content content .'
		'bikes 		content content content .'
		'. 			content content content .'
		'dive 		content content content .'
		'. 			content content content .'
		'about		content content content .'
		'. 			content content content .'
		'.			counter counter counter .';
	}
	div#home, div#guestbook, div#about, div#pictures, div#videos, div#bikes, div#dive, div#world {
		position: relative;
		top: 0 !important;
		left: 1.2em;
		width: 8em;
	}
	div#lang.counter {
		padding: 10px;
	}
       
}



/* 
 * 
screen and (orientation : portrait) and (max-device-height: 768px), 
 */
@media only screen and (max-device-width: 767px) {
	/* hide all menu items for bigger screens */
	div#home, div#guestbook, div#about, div#pictures, div#videos, div#bikes, div#dive, div#world {
		display: none;
	}
	/* show the burger menu */
	div#mobileMenu {
		display: inline-block;
	}
	/* remove round corners from content */
	.grid-container>div#content {
		border-radius: 0em;
		padding: 3px;
		margin: 0px;
	}
	/* move lang a bit down into visible area */
	.grid-container>div#lang {
		position: relative;
		top: 1em;
		z-index: 1;
	}
	/* change the grid to fit in small resolution */
	div#main.grid-container {
		grid-template-rows: 0em 3em 1fr 1.5em;
		grid-template-columns: 6em 1fr;
		grid-template-areas: 
			'lang .' 
			'menu menu' 
			'content content'
			'counter counter'
	}
	/* menu guestbook pictures videos bikes ausblenden */
	div#login.login,
	div#mobileMenuItems>div#guestbookMobile.mobileMenuItem,
	div#mobileMenuItems>div#picturesMobile.mobileMenuItem,
	div#mobileMenuItems>div#videosMobile.mobileMenuItem,
	div#mobileMenuItems>div#bikesMobile.mobileMenuItem {
		display: none;
	}
	*[name="mobileAll"], *[name="mobileLandscape"]  {
		display: inline-block;
	}
}

/* in orientation landscape hide all elements what are not to show
 * => all with name="mobileLandscape"
 */
@media 
screen and (orientation : landscape) {
	*[name="mobileLandscape"]  {
		display: none;
	}
}

@media 
screen and (orientation : landscape) and (max-device-height: 767px) and (max-device-width: 1023px) {
	div#mobileMenuItems>div#bikesMobile.mobileMenuItem {
		display: block;
	}
}

div#home, div#guestbook, div#about {
	position: relative;
	top: 1.2em;
}

div#pictures , div#videos, div#bikes, div#dive {
	position: relative;
	left: 1.2em;
}

q:before { 
	content: open-quote; 
}
q:after { 
	content: close-quote; 
}
:lang(en) q { 
	quotes: '“' '”'; 
}
:lang(es) q { 
	quotes: '«' '»'; 
}
:lang(de) q { 
	quotes: '»' '«'; 
}

div#content {
	border-radius: 2em;
	background: var(--contentBackground);
	padding: 1em;
}

.grid-container>div#content {
	grid-area: content;
}

.grid-container>div#home {
	grid-area: home;
}

.grid-container>div#mobileMenu {
	grid-area: menu;
	z-index: 1;
}

.grid-container>div#guestbook {
	grid-area: guestbook;
}

.grid-container>div#about {
	grid-area: about;
}

.grid-container>div#pictures {
	grid-area: pictures;
}

.grid-container>div#videos {
	grid-area: videos;
}

.grid-container>div#bikes {
	grid-area: bikes;
}

.grid-container>div#dive {
	grid-area: dive;
}

.grid-container>div#world {
	grid-area: world;
}

.grid-container>div#counter {
	grid-area: counter;
}

.grid-container>div#lang {
	grid-area: lang;
}

.grid-container>div#login {
	grid-area: login;
}

.content {
	background-color: var(--contentBackground);
	color: var(--contentTextColor);
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

.align_content, .mobile_portrait_align_content {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 1.2em;
}

.mobile_portrait_align_content {
	flex-direction: column;
	font-size: 0.9em;
	width: 95%;
	
}

.mobileMenuItem, .menu_button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--menuButtonBackground);
	color: var(--menuButtonTextColor);
}

.menu_button {
	border-radius: 10px;
	width: 10em;
}

.mobileMenuItem:hover, .menu_button:hover {
	font-weight: bolder;
	cursor: pointer;
}

.mobileMenu {
	display: none;
	background-color: var(--mainBackground);
	color: var(--menuButtonBackground);
	text-align: right;
	height: 40px;
	line-height: 40px;
	width: 100%;
}

.mobileMenuItems {
	display: none;
	background-color: var(--mainBackground);
	color: var(--menuButtonBackground);
	text-align: center;
	margin: 0 30px 0 0;
}

.mobileMenuItem {
	
}

.mobileMenuItems div {
	display: block;
	border-bottom: 1px solid var(--mainBackground);
	margin: 0;
	clear: right;
}

.mobileMenuLabel {
	display: block;
	cursor: pointer;
	width: 26px;
	float: right;
	font-size: 18px;
}

#toggle {
	display: none;
}

#toggle:checked+.mobileMenuItems {
	display: block;
}

.mobileMenuTitle {
	display: inline-block;
	width: 85%;
}

.counter, .login, .mobileMenuTitle {
	color: var(--counterTextColor);
	padding: 0px;
	text-align: center;
	align-self: center;
	white-space: nowrap;
	font-size: 0.9em;
}

.textus {
	color: var(--counterNumberTextColor);
	font-size: 0.8em;
	font-family: Arial;
}

.world {
	border-style: outset;
	border-width: 0px;
	position: absolute;
	top: 10px; 
	left: 10px;
  	width: 300px;
}

input[type=text], input[type=password], select, textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input::placeholder {
	color: var(--inputPlaceholderColor);
	font-size: 0.8em;
}

button {
	border-radius: 10px;
	background-color: var(--buttonBackground);
	color: var(--buttonText);
	width: 75%;
}

/* Add a disabled effect for buttons */
button:disabled, button[disabled] {
	background-color: var(--buttonDisabledBackground);
	color: var(--buttonDisabledColor);
	pointer-events:none;
	cursor: not-allowed;
}

/* Add a hover effect for buttons */
button:hover:enabled {
	cursor : pointer;
	background-color: var(--buttonHoverBackground);
	color: var(--buttonHoverColor);
	opacity: 0.8;
}

.noScrolling {
	border-style: none;
	width: 100%; /*or any other size*/
	height: 100%; /*or any other size*/
}


a {
	color: inherit;
}

a:hover {
	cursor: pointer;
}