styles.css
:root{  --bg:#0b0b0b;  --panel:#121212;  --accent:#c81a1a;  --muted:#bdbdbd;  --max-width:1100px;  --gap:1.25rem;  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;  color-scheme: dark;}*{box-sizing:border-box}html,body{height:100%}body{  margin:0;  background:var(--bg);  color:#eee;  -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale;  line-height:1.45;}/* Skip link */.skip-link{  position:absolute;  left:-999px;  top:auto;  width:1px;  height:1px;  overflow:hidden;}.skip-link:focus{  left:1rem;  top:1rem;  width:auto;  height:auto;  padding:.5rem .75rem;  background:#111;  color:#fff;  z-index:1000;  border-radius:4px;}/* Header / nav */.site-header{  position:fixed;  top:0;  left:0;  right:0;  display:flex;  justify-content:flex-end;  padding:0.75rem 1rem;  z-index:60;}.menu-toggle{  background:transparent;  color:#fff;  border:1px solid rgba(255,255,255,.08);  padding:.5rem .75rem;  border-radius:4px;}.site-nav{  display:none;  margin-left:1rem;}.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.75rem}.site-nav a{  color:#ddd;text-decoration:none;padding:.5rem .6rem;border-radius:4px;}.site-nav a:focus, .site-nav a:hover{background:rgba(255,255,255,.04);outline:none;}/* hero with full-cover logo */.hero{  min-height:90vh;  display:flex;  align-items:center;  justify-content:center;  text-align:center;  padding:4rem 1rem;  position:relative;  background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.6));  background-blend-mode:multiply;  background-color:var(--bg);}.hero-logo{  max-width:80%;  height:auto;  display:block;  margin:0 auto 1.25rem;  filter:drop-shadow(0 6px 18px rgba(0,0,0,.8));}.hero h1{  font-size:2.6rem;  margin:.25rem 0 0;  letter-spacing:2px;  color:#fff;  text-transform:uppercase;}.tagline{color:var(--muted);margin:.5rem 0 1rem}.hero-ctas{display:flex;gap:.75rem;justify-content:center}/* buttons */.btn{  display:inline-block;  padding:.6rem .9rem;  border-radius:4px;  background:transparent;  color:#fff;  border:1px solid rgba(255,255,255,.06);  text-decoration:none;}.btn.primary{  background:var(--accent);  border-color:var(--accent);  color:#fff;}.btn:focus{outline:3px solid rgba(200,26,26,.25);}/* Sections */.section{max-width:var(--max-width);margin:2rem auto;padding:1rem}.section h2{font-size:1.4rem;margin:0 0 .5rem;color:#fff}.gallery{display:flex;gap:.75rem;flex-wrap:wrap}.gallery figure{margin:0;background:var(--panel);padding:.5rem;border-radius:6px;width:calc(33% - .5rem)}.gallery img{width:100%;height:auto;display:block;border-radius:4px}.video-list iframe{max-width:100%}/* player */.player{display:flex;flex-direction:column;gap:.5rem;max-width:640px}.player audio{width:100%;background:#000;border-radius:6px}/* form */.form{max-width:640px;display:grid;gap:.5rem}input[type="text"],input[type="email"],textarea{  background:#0f0f0f;border:1px solid rgba(255,255,255,.05);color:#fff;padding:.6rem;border-radius:4px;}input:focus,textarea:focus{outline:3px solid rgba(200,26,26,.18)}/* footer */.site-footer{padding:1rem;text-align:center;background:transparent;color:var(--muted)}/* responsive & nav show for larger screens */@media(min-width:768px){  .site-nav{display:block}  .menu-toggle{display:none}  .gallery figure{width:calc(33% - .5rem)}  .hero-logo{max-width:60%}}@media(max-width:767px){  .gallery figure{width:calc(50% - .5rem)}  .hero h1{font-size:1.6rem}}



.site-bg {
    background-image: url('assets/LIZZAAR logo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 1;
}

body {    
  margin: 0;    
  background: var(--bg);
  color: #eee;   
  -webkit-font-smoothing: antialiased;   
  -moz-osx-font-smoothing: grayscale;    
  line-height: 1.45;
     }

html, body {    
  height: 100%;
}

* {
    box-sizing: border-box;
}
.hero__content {
  margin-top: 250px; /* Experimenteer met dit getal! */
}
.hero__tagline {
  font-size: 24px;
  font-style: italic;
  color: #cccccc;
  text-align: center;
}
@media (max-width: 768px) {
  .bg-layer {
    background-image: url('assets/logo.png');
    background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
     position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: -1;
    opacity: 0.08;
  }
}