/* ☀️ ZOMER THEMA */
:root{
  --z-blue:#009adf;
  --z-yellow:#ffe86a;
  --z-orange:#ffb039;
  --z-white:#fffbe3;
}

body{
  background: var(--z-blue) url('/assets/img/zomer-background.jpg') center/cover no-repeat fixed;
  color:var(--z-white);
}

.site-header{
  background:#007bb4;
  border-bottom:3px solid var(--z-yellow);
}
nav a{ color:var(--z-yellow); font-weight:600; }
nav a:hover{ text-shadow: 0 0 10px var(--z-yellow); }

.hero{
  background:radial-gradient(circle, #00b7ff, #009adf);
  text-shadow:0 0 12px rgba(255,232,106,0.7);
}

.btn-listen{
  background: var(--z-yellow);
  color:#007bb4;
  font-weight:700;
  box-shadow:0 0 15px rgba(255,232,106,.8);
}
.btn-listen:hover{
  box-shadow:0 0 30px rgba(255,232,106,1);
}

.section{ background:rgba(0,122,180,0.75); }
.section.alt{ background:rgba(0,100,150,0.75); }

.site-footer{
  background:#004f6d;
  color: var(--z-yellow);
}

/* Zonneglitters */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 0, transparent 50%);
  background-size: 200px 200px;
  animation:glitter 5s linear infinite;
  opacity:0.18;
}
@keyframes glitter{
  from{ background-position:0 0; }
  to{ background-position:200px 200px; }
}