/*
div {
    outline: 1px dashed red;  
    background-color: rgba(255,0,0,0.05); 
}
*/

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

body {
	background-color: #1a1a1a;
    font-family: "myFont", Arial, Helvetica, sans-serif;
	color: #AAA;
	
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
}
body a {
	color:#FF39DD;
}
body a:hover {
	color:#FF39DD;
}
p {
	font-weight: 300;
    font-size: 16px;
	margin-bottom: 1em;
}
h1 {
	font-weight: 300;
    font-size: 10px;
	text-align: center;
	color: #888;
}
.logo-desktop{
	width: 220px;
	margin: 20px;
}
.logo-mobile{
	display: none;
}
.video-desktop{
	display: flex;
	justify-content: center;
	width: 100vw;
	background-color: #000;
}
.video-desktop video {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
    object-fit: contain;    /* hele video altijd zichtbaar */
}
.video-mobile{
	display: none;
}
.text{
	max-width: 650px;
	margin: 50px 50px 100px 50px ;
}
.copyright{
	margin-top: auto;
	padding: 16px;
}
.background{
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	bottom: 0;
	z-index: 0;
	min-width: 0;
	height: auto; /* zorgt dat de div naar beneden gaat */
}

/* Mobiel */
@media (max-width: 640px) and (orientation: portrait) {
	.logo-desktop{
		display: none;
	}
	.logo-mobile {
		position: absolute;
		width: 220px;
		margin: 20px;
		display: block;
		z-index: 10;
	}
	.video-desktop{
		display: none;
	}
	.video-mobile{
		width: 100%;
		height: 100%;
		display: block;
		justify-content: center;
	}
	.video-mobile video {
		width: 100%;
		max-width: 1280px;
		height: auto;
		aspect-ratio: 9 / 16;
		object-fit: contain;    /* hele video altijd zichtbaar */
		display: block;
	}
}