:root {
  --primary-bg: #eceff1;
  --accent-bg: #263238;
  --accent-bg-light: #37474f;
  --primary-fg: #222;
  --secondary-fg: #fff;
  --highlight: #546e7a;
  --highlight-light: #7e9bae;
  --border-radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --link: #114277;
  --link-hover: #0d2f56;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: system-ui, Arial, sans-serif;
  background: var(--primary-bg);
  color: var(--primary-fg);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header styles */
header {
  background: var(--accent-bg);
  color: var(--secondary-fg);
  padding: 2rem 1rem 1.2rem 1rem;
  text-align: center;
}
.banner {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 0.2em;
}
nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
  flex-wrap: wrap;
}

.language-toggle, .nav-link {
  display: inline-block;
  margin: 0.25rem 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  background: var(--highlight);
  color: var(--secondary-fg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.2s, box-shadow 0.2s;
}
.language-toggle[aria-current="page"], .nav-link.active {
  background: var(--accent-bg-light);
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(86,110,122,0.08);
}
.language-toggle:hover, .nav-link:hover {
  background: var(--highlight-light);
  color: var(--secondary-fg);
}

main {
  max-width: 700px;
  width: 95%;
  margin: 2rem auto 1rem;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  flex: 1;
  text-align: center;            /* <--- Text center for main content */
}

/* But keep lists left aligned for readability */
main ul, main ol {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.logo-container {
  text-align: center;
  margin: 2em 0 1.5em 0;
}
.logo-img {
    max-width: 220px;
    width: 70%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    display: inline-block;
}
@media (max-width: 340px) {
    .logo-img {
        max-width: 95vw;
    }
}

h1, h2, h3 {
  color: var(--accent-bg);
}

ul {
  margin: 1em auto;
  padding-left: 2em;
  max-width: 480px;
}
li {
  margin-bottom: 0.7em;
  line-height: 1.5;
}

/* Sections for language switching */
.content { display: none; }
.content.active { display: block; }

/* Footer */
footer {
  background: var(--accent-bg-light);
  color: var(--secondary-fg);
  padding: 1.1em 0 0.5em;
  text-align: center; /* Center ALL footer text and icons */
  font-size: 0.97em;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer img {
  vertical-align: middle;
  margin-right: 0.3em;
  height: 1.5em;
}
/* Bluesky icon + text in a grouped row */
footer span, footer a {
  display: inline-block;
  margin: 0.3em 0;
}
/* Positie en animatieklasse */
#bee {
  position: fixed;
  top: 10%;
  left: -100px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  pointer-events: none;
}

.fly {
  animation: flyLoop 12s linear infinite;
}

.sleep {
  top: 85%;
  left: 5%;
  transform: rotate(-20deg);
  opacity: 0.5;
}

/* Vleugels flapperen */
.wing {
  transform-origin: center;
  animation: flap 0.3s ease-in-out infinite;
}

@keyframes flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

/* Ogen knipperen */
.eye {
  animation: blink 4s infinite;
  transform-origin: center;
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* Vliegloop */
@keyframes flyLoop {
  0% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(25vw) translateY(-5vh); }
  50% { transform: translateX(50vw) translateY(5vh); }
  75% { transform: translateX(75vw) translateY(-3vh); }
  100% { transform: translateX(100vw) translateY(0); }
}
#hermitcrab {
  position: fixed;
  bottom: 2%;
  left: -100px;
  width: 80px;
  height: 80px;
  z-index: 9998;
  pointer-events: none;
}

/* Wandelt als hive open is */
.crab-walk {
  animation: crabWalk 20s linear infinite;
}

/* Staat stil als hive dicht is */
.crab-hide {
  left: 5%;
  opacity: 0.6;
}

/* Ogen knipperen */
.crab-eye {
  animation: crabBlink 6s infinite;
}

@keyframes crabWalk {
  0% { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}

@keyframes crabBlink {
  0%, 95%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}