:root {
    --primary-color:#544009;
    --secondary-color:#96746b;
    --light-color: #e0e0da;
    --display-font: Germania One;
    --body-font: "Blinker", sans-serif;
}

h3[id] {
  scroll-margin-top: 100px; /* Space above target when scrolling */
}

* { box-sizing: border-box; }
body{font-family: var(--body-font);}

#loader {  
    position: fixed; /* Fix the loader to the viewport */  
    top: 0;  
    left: 0;  
    width: 100vw; /* Full viewport width */  
    height: 100vh; /* Full viewport height */  
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */  
    display: flex; /* Use flexbox to center the GIF */  
    justify-content: center; /* Horizontally center */  
    align-items: center; /* Vertically center */  
    z-index: 9999; /* Ensure loader is above all other content */  
    transition: opacity 0.5s ease; /* Smooth fade-out effect */  
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat repeating-linear-gradient(90deg,#000 0 20%,#0000 0 40%);
  background: var(--c),var(--c),var(--c),var(--c);
  background-size: 100% 26%;
  animation: l22 1.5s infinite;
}

@keyframes l22 {
 0%    {background-position:0 -20px        ,0 -20px         ,0 -20px         ,0 -20px}
 12.5% {background-position:0 -20px        ,0 -20px         ,0 -20px         ,0 calc(3*100%/3)}
 25%   {background-position:0 -20px        ,0 -20px         ,0 calc(2*100%/3),0 calc(3*100%/3)}
 37.5% {background-position:0 -20px        ,0 calc(1*100%/3),0 calc(2*100%/3),0 calc(3*100%/3)}
 45%,
 50%   {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(3*100%/3)}
 62.5% {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 50px}
 75%   {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 50px          ,0 50px}
 87.5% {background-position:0 calc(0*100%/3),0 50px          ,0 50px          ,0 50px}
 100%  {background-position:0 50px          ,0 50px          ,0 50px          ,0 50px}
}

/* #netherlands, #belgium, #luxembourg, #germany, #amsterdam, #keukenhof, #liberation, #brussels, #flanders { scroll-margin-top: 100px; } */
h1,h2 {
    font-family: var(--display-font);
    color:var(--primary-color);
}
h2 { font-weight: 500; }
h3 { font-size: 1.5rem; }
header {
    background-color: var(--secondary-color);
    padding: 1rem;
}
.context{
    padding: 0.5rem 1rem;
    font-weight: 500;
}
.nav {
    font-family: var--(body-font);
}
.section-container {
    padding: 0;
}
.album {
    padding: 1rem 2rem;
    /* border-bottom: solid 3px black; */
}
.aside {
    border-right: 1px solid var(--primary-color);
    background-color: var(--light-color);
    padding: 1rem;
}
.regions {
    position: sticky;
    top: 100px;
}
.regions h2 {

}
.regions h3 {
    font-size: 1rem;
    padding: 8px 16px;
}
.regions h3 a{
    text-decoration: none;
    color: var(--secondary-color);
}
.regions h3 a:hover{
    text-decoration: underline;
}
.nav-link{
    font-weight: 700;
    color: white;
    margin: 0 20px;
    border-radius: 10px;
}
.card{
    overflow: hidden;
}
.card img{
    max-width:100%;
}