/* ❄️ WINTER THEMA */
:root{
  --w-bg: #001c36;
  --w-blue: #64b4ff;
  --w-cyan: #b8ecff;
  --w-white: #eaf8ff;
}

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

.site-header{
  background:#002a4e;
  border-bottom:3px solid var(--w-cyan);
}
nav a{ color:var(--w-cyan); font-weight:600; }
nav a:hover{ text-shadow:0 0 10px var(--w-cyan); }

.hero{
  background: radial-gradient(circle, #003055, #001c36);
  text-shadow:0 0 12px rgba(184,236,255,0.8);
}

.btn-listen{
  background: var(--w-cyan);
  color:#001c36;
  box-shadow:0 0 15px rgba(184,236,255,.9);
}
.btn-listen:hover{
  box-shadow:0 0 30px rgba(184,236,255,1);
}

.section{ background: rgba(0,28,54,0.85); }
.section.alt{ background: rgba(0,40,80,0.85); }

.site-footer{
  background:#00101e;
  color:var(--w-cyan);
}

/* Sneeuw */
body::before,
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-repeat:repeat;
  z-index:9999;
}
body::before{
  opacity:0.25;
  background-image:
    radial-gradient(white 0, white 1px, transparent 2px),
    radial-gradient(white 0, white 1px, transparent 2px);
  background-size:150px 150px, 220px 220px;
  animation:snowSmall 26s linear infinite;
}
@keyframes snowSmall{
  from{ background-position:0 0, 100px -200px; }
  to{ background-position:0 1300px, 100px 1100px; }
}
body::after{
  opacity:0.45;
  background-image:
    radial-gradient(white 0, white 2px, transparent 3px),
    radial-gradient(white 0, white 3px, transparent 4px);
  background-size:200px 200px, 300px 300px;
  animation:snowBig 18s linear infinite;
}
@keyframes snowBig{
  from{ background-position:0 0, -60px -200px; }
  to{ background-position:0 1200px, -60px 1000px; }
}