body, html {
	margin:0;
	padding:0;
	overflow-x: hidden; 
	display: flex;
	justify-content: center;
	font:1em Arial;
	scroll-behavior: smooth;
}

body {
	max-width: 800px;
	background: black;
}

.logo {
	width:80%;
	margin:10%;	
}


.logo.small {
    width: 100%;
    height: 120px;          /* kies wat mooi voelt */
    object-fit: contain;  /* schaalt logo netjes */
    object-position: center;
	margin:0;
}

.logo-small-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
}

/* First logo: its own row */
.logo-small-container img:first-child {
    grid-column: 1 / -1;     /* take full row */
    justify-self: center;    /* center horizontally */
}

.header-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0%;
}

.header-container > img {
	    width: 100%;
    height: 200px;          /* kies wat mooi voelt */
    object-fit: contain;  /* schaalt logo netjes */
    object-position: center;
}

hr {
	margin:0% 4%;
}


p > a {
	color:white;
}

p > a:hover {
	color:#8B3A4D;
}


.bg-image {
	position: fixed;
	top: 0;
	max-width: 800px;
	width: 100%;
	height: 100%;
	object-fit: cover; 
	object-position: top center;
	z-index: -1; 
}

@media (max-width: 768px) {
	#background-container {
		background-attachment: scroll; /* better for mobile */
	}
}


.text-container {
	/*background:rgba(0,0,0,0.1);*/
	color:white;
	font:1.2em Verdana;
	padding: 2rem;
	text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
		1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.text-container > h1, .text-container > h2 {
	text-align:center;
}
.text-container > h1 {
	font-size:80px;
}


.button {
	background:#69cbcc;
	color:white;
	padding:1em 2em;
	border-radius:8px;
	margin:0 auto;
	display:block;
	width:70%;
	text-decoration:none;
	text-align:center;
	box-shadow: 10px 10px 5px black;
}

.button:hover {
	background:#79dbdc;
}

.button:active {
	background:#a9fbfc;
	padding:1.1em 1.9em 0.9em 2.1em;
}



.blck {
	display:block;
	text-align:center;
	font-weight:bold;
	padding:0.1em;
	font-weight: 700;
	color: #ffffff;
}

.blue {
	color:#69cbcc;

}

.header-text {
	text-transform: uppercase;
	letter-spacing: 2px;
}

.xxxl {
	font-size:3em;
}

.xxl {
	font-size:2.5em;
}

.xl {
	font-size:2em;
}

.l {
	font-size:1.5em;
}

.padding-header {
	padding-top:10em;
}

.serif {
	font-family:"Times New Roman";
}

/* Container */
.box {
  position: relative;
}

/* Hamburger button */
.hamburger {
  position: absolute;
  top: 48px;
  left: 48px;
  font-size: 42px;
  cursor: pointer;
  background: black;
  border: none;
  color:white;
  padding:6px 12px;
  width:70px;
  height:70px;
}

.hamburger:hover {
	background-color:#222;
}
.hamburger:active {
	background-color:#444;
}

/* Menu */
.menu {
  position: absolute;
  top: 110px;
  left: 48px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px 0;
  display: none;
  width:400px;
	 max-width:85vw;
	background:black;
	color:white !important;
	z-index:999999;
}

.menu.open {
  display: block;
}

.menu a,.menu strong {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
color:white !important;
}

.menu a:hover {
  background: #555;
}

.poster {
		max-width:720px;
		margin:40px;
}
.poster-container {
		background:#000; 
		padding-top:40px;
		color:white;
}
@media (max-width: 768px) {
  .hamburger {
    position: fixed;
    z-index: 1;
  }

  .menu {
    position: fixed;
    top: 110px;
    right: 16px;
    width: calc(100% - 90px);
    max-width: 300px;
    z-index: 999;
  }

	.poster {
			max-width:100vw;
			margin:0px;
	}

	.poster-container { 
		max-width:100vw;
	}
}


.devlink {
		color:white;
}

.devlink:hover {
	color:#ddd;
}