body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	color: #fff;
	background-color: #242e3d;
}





/* Navigationsleiste */
nav {
    background-color: #ff5e00b4;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.navbar-container {
	max-width: 1200px;
    width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

/* Navigationselemente */
nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav li {
    margin: 0 10px;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 10px 0 10px;
    border: 4px solid transparent;
    transition: all 0.5s ease-in-out;
}

nav a:hover {
    background-color: #ff6701;
    text-decoration: none;
    font-weight: bolder;
    color: #13df00;
    border-color: #ff6701;
    cursor: pointer;
}




/* nav {
	background-color: #1c2331;
	height: 60px;
}

.nav-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.logo {
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.menu li {
	margin-left: 30px;
}

.menu li:hover {
    background-color: #ff9035;
    color: #000000;
}

.menu li:first-child {
	margin-left: 0;
}

.menu a {
	color: #ff9035;
	text-decoration: none;
} */

.search-form {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.search-form input[type="text"] {
	padding: 10px;
	border: none;
	border-radius: 20px;
	background-color: #ff5e00d0;
	color: #fff;
}

.search-form button {
	background-color: transparent;
	border: none;
	margin-left: 10px;
}

.search-form button img {
	width: 20px;
	height: 20px;
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 60px);
}


.viewer-container {
	display: flex;
  	justify-content: center;
  	margin: 20px;
  }
  
  .viewer-container div {
	position: absolute;
	padding-top: 0px;
	
  }
  
  .viewer-container div:nth-child(1) {
	z-index: 1;
	left: calc(50vw - 100px);
  }
  
  .viewer-container div:nth-child(2) {
	z-index: 2;
  }



.loading-logo {
animation: loading 2s ease-in-out 0s 3;
animation: fadeout 4s ease-out 6s 1 forwards;
max-width: 300px;
width: 100%;
height: auto;
}


@keyframes loading {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

.video-container {
animation: fadein 8s ease-in 0s 1 forwards;
max-width: 1200px;
margin: 0 auto;
padding-top: 10px;
opacity: 0;
}

video {
	border: 4px solid transparent;
	border-color: #13df00;
	width: calc(100vw*0.90);
	max-width: calc(100vw*0.94);
	max-height: calc(100vh*0.84);
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
	25% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.50;
	}
	75% {
		opacity: 0.75;
	}
    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }
	25% {
		opacity: 0.75;
	}
	50% {
		opacity: 0.50;
	}
	75% {
		opacity: 0.25;
	}
    100% {
        opacity: 0;
    }
}


@media (min-width: 768px) {
.video-container {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 60px);
}
}