body {
					background-color: #adcce0;
					color: #000000;
					font-family: Georgia, serif;
				}
				a {
					color: #800080;
					text-decoration: none;
				}
				a:active {
					text-decoration: underline;
					color: #800080;
				}
				a:visited {
					color: #505050;
				}

				* {
					margin: 0;
					padding: 0;
					box-sizing: border-box;
				}

				html, body {
					height: 100%;
				}
				
				.splashscreen {
					position: relative;
					width: 100%;
					height: 100%;
					background-image: url('/gfx/splish.png');
					background-size: cover;
					background-position: right center;
					background-repeat: no-repeat;
					background-attachment: fixed;
				}
				
				.undlogo {
				position: fixed;     /* fixiert oben */
				top: 0;
				left: 0;
				width: 100%;         /* volle Breite */
				z-index: 1000;
				width: 60%;
				}
				
				.undlogo img {
					width: 100%;
					height: auto;
					float:left
				}

				.keinlogo {
				opacity: 0;
				width: 60%;
				}

				.keinlogo img {
					width: 100%;
					height: auto;
				}
				
				.container {
					width: 80%;
					margin: 0 auto;
				}
				
				.context {
					display: block;
					padding: 5px 8px;
					margin: 20px auto;
					font-size: 16pt;
					color: #330033;
					font-family: Georgia, serif;
					text-decoration: none;
					line-height: 1.4;
					background: linear-gradient(135deg, #6ea04b, #adcce0);
					border-radius: 10px;
					opacity: 0.8;
					transition: opacity 0.3s ease, background 0.3s ease;
				}
				
				.picture {
					opacity: 1;
					padding: 0;
					pointer-events: none;
				}
				
				.picture img {
					border-radius: 10px;
				}
				
				.context p {
					margin: 10px auto;
				}
				
				.t-center {
					text-align:center;
				}
				
			.menu {
			display: flex;
			justify-content: center;
			}
				
            .menu a {
                display: inline-block; 
                padding: 5px 8px;
                margin: 0 20px;
                font-size: 16pt;
				font-weight:bold;
                color: #000000;
                text-decoration: none;

            }

			.menubar {
			z-index: 1001;
			position: fixed;
			top:2%;
			right:5%;
			display: flex;
			justify-content: center;
			text-align:center;
			}
				
            .menubar a {
				display: flex;
				align-items:center;
				justify-content: center;
                padding: 2px 4px;
                margin: 20px 10px;
                font-size: 14pt;
				font-weight:bold;
                color: #000000;


            }
			
            .menubar a:hover {
                background: linear-gradient(135deg, #6ea04b, #c3b52e);
                opacity: 1;
            }

            .menubar a:active {
                transform: translateY(2px);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            .menu a:hover {
                background: linear-gradient(135deg, #6ea04b, #c3b52e);
                opacity: 1;
            }

            .menu a:active {
                transform: translateY(2px);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

				.japan {
                background: linear-gradient(135deg, red, darkred);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;
				}
				
				.srilanka {
                background: linear-gradient(135deg, yellow, lightyellow);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;
				}
				
				.germany {
				background: linear-gradient(135deg, green, lightgreen);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;
				}
				
				.social {
				background: linear-gradient(135deg, orange, brown);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;
				}
				
				.music {
				background: linear-gradient(135deg, #0078d7, #0078d7);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;			
				}
				
				.mail {
				background: linear-gradient(135deg, #0078d7, #0078d7);
                border-radius: 10px;
                opacity: 0.8;
                transition: opacity 0.3s ease, background 0.3s ease;
				}
								
				.youron {
				text-decoration: underline;
				text-decoration-thickness: 2px;
				}
				
				.video-wrapper {
				  position: relative;
				  width: 100%;
				  margin: 0 auto;
				  padding-top: 56.25%;
				  overflow: hidden;
				}

				.video-wrapper iframe {
				  position: absolute;
				  top: 0;
				  left: 0;
				  width: 100%;
				  height: 100%;
				  border: 0;
				  border-radius: 10px;
				}

				.impressum {
				font-size: xx-small;
				}

			@media (max-width: 1020px) and (orientation: portrait) {

				.undlogo {
				margin-top:100px;
				width: 100%;
				}
				
				.keinlogo {
				margin-top:100px;
				opacity: 0;
				width: 100%;
				}
				
				.index {
				margin-top:0px;
				}
				
				.menubar {
				z-index: 1001;
				position: fixed;
				top:0;
				left: 50%;
				transform: translateX(-50%);
				width:100%;
				height:100px;
				display: flex;
				justify-content: center;
				}
				
				.menubar a {				
				width: 16%;
				height:75%;
                padding: 2px 2px;
                margin: 5px 5px;					
				}
				
				.menu {
				display: block;
				justify-content: center;
				}

				.menu a {
					display: flex;
					align-items:center;
					justify-content: center;
					float:none;
					height:120px;
					padding: 5px 8px;
					margin: 20px 20px;
					font-size: 38pt;
					font-weight:bold;
					color: #000000;
					text-decoration: none;
					border-radius: 10px;
					opacity: 0.8;
					transition: opacity 0.3s ease, background 0.3s ease;
					text-align:center;
				}

				.container {
					width: 100%;
					
				}
				
				.context {
				display: block;
				padding: 5px 8px;
				margin: 10 20px;
				font-size: 22pt;
				color: #330033;
				font-family: Georgia, serif;
				text-decoration: none;
				line-height: 1.4;
				background: linear-gradient(135deg, #6ea04b, #adcce0);
				border-radius: 10px;
				opacity: 0.8;
				transition: opacity 0.3s ease, background 0.3s ease;
			}
				.picture {
					opacity: 1;
					padding: 0;
				}
				
				.picture img {
					border-radius: 10px;
				}
			}