.solidarity-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.solidarity-banner {
  position: fixed;
  top: 38px; /* hoogte van je page-title-bar */
  left: 0;
  width: 100%;
  background: linear-gradient(to right, #0057b7, #ffd700);
  color: #eee;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); /* ← belangrijk */
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  padding: 6px 12px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

      .page-title-bar {
        width: 100%;
        background: #000;
        color: #fff;
        font-family: 'Atkinson Hyperlegible', sans-serif;
        font-size: 16px;
        font-weight: bold;
        padding: 8px 16px;
        box-shadow: 0 2px 0 #000;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
      }

      .theme-toggle {
        position: fixed;
        top: 0px;
        right: 5px;
        display: flex;
        gap: 8px;
        font-size: 20px;
        border: 2px solid #000;
        padding: 4px 8px;
        border-radius: 8px;
        box-shadow: 2px 2px 0 #000;
        user-select: none;
        z-index: 2000;
      }

      .theme-toggle span {
        cursor: pointer;
        transition: transform 0.2s;
      }

      .theme-toggle span:hover {
        transform: scale(1.3);
      }

      .theme-toggle .active {
        text-decoration: underline;
      }

      :root {
        --mac-bg: linear-gradient(135deg, #efeacc, #d4edf4, #e6f5ec);
      }

      body.light {
        --mac-bg: linear-gradient(135deg, #efeacc, #d4edf4, #e6f5ec);
      }

      body.dark {
        --mac-bg: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
      }

      body.retro {
        --mac-bg: linear-gradient(to bottom, #000000, #001a00);
      }

      body.retro .mac-content {
        color: #00ff00;
        font-family: 'Courier New', monospace;
        text-shadow: 0 0 2px #00ff00, 0 0 5px #00ff00;
      }
      body.retro .mac-window {
        border: 2px solid #00ff00;
        box-shadow: 4px 4px 0 #003300;
      }
      body.retro .mac-title-bar {
        color: #fff;
        font-family: 'Courier New', monospace;
        text-shadow: 0 0 2px #00ff00, 0 0 5px #00ff00;
      }

      .mac-content {
        background: var(--mac-bg);
        font-size: 18px;
        line-height: 1.4;
        padding: 10px;
        color: rgb(76, 77, 76);
        text-align: justify;
      }

      .mac-content a {
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
        word-break: break-word;
      }

      .mac-gif {
        background: var(--mac-bg);
        font-size: 16px;
        line-height: 1.4;
        padding: 0px;
        color: rgb(76, 77, 76);
        text-align: justify;
      }

      .mac-gif img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
      }

      /*
      .mac-content a::after {
        content: '🌐';
        font-size: 0.9em;
        vertical-align: super;
      }
*/
      /* LIGHT THEME */
      body.light .mac-content a {
        color: #007acc;
      }
      body.light .mac-content a:hover {
        text-decoration: underline;
        color: #005fa3;
      }

      /* DARK THEME */
      body.dark .mac-content a {
        color: #80caff;
      }
      body.dark .mac-content a:hover {
        text-decoration: underline;
        color: #ffffff;
      }

      /* RETRO / MATRIX THEME */
      body.retro .mac-content a {
        color: #80caff;
        text-shadow: 0 0 2px #80caff;
      }
      body.retro .mac-content a:hover {
        text-decoration: underline;
        color: #80caff;
      }

      body.dark .mac-content {
        color: #eee;
      }

      body.dark {
        background: var(--mac-bg);
      }

      body.retro {
        background: var(--mac-bg);
      }

      body {
        background: #e0e0e0;
        font-family: 'Atkinson Hyperlegible', sans-serif;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0;
        padding: 20px;
      }

      .mac-window {
        background: #fff;
        border: 2px solid #000;
        max-width: 100%;
        width: 340px;
        box-shadow: 5px 5px 0 #000;
        margin-bottom: 20px;
          border-radius: 16px;
         overflow: hidden;
      }

      .mac-divider {
        background: #fff;
        border: 2px solid #000;
        max-width: 100%;
        width: 340px;
        box-shadow: 5px 5px 0 #000;
        margin-bottom: 20px;
      }

      .mac-title-bar {
        background: #000;
        color: #fff;
        font-size: 20px;
        padding: 6px 8px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: capitalize;
      }

      .mac-buttons {
        display: flex;
        gap: 4px;
      }

      .mac-buttons wired-button {
        width: 18px;
        height: 18px;
        padding: 0;
        --wired-button-bg-color: #fff;
        filter: drop-shadow(0 0 2px #000);
      }

      wired-card {
        --wired-card-padding: 16px;
      }

      p {
        margin: 0 0 10px;
      }

      .content {
        margin-top: 100px; 
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 60px;
      }
      .mac-traffic-lights {
        display: flex;
        gap: 8px;
        padding: 4px;
      }

      .traffic-light {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: grey;
        box-shadow: inset 0 0 0 1px #00000020;
      }

      .traffic-light.red {
        background-color: #ff605c;
      }

      .traffic-light.yellow {
        background-color: #ffbd44;
      }

      .traffic-light.green {
        background-color: #00ca4e;
      }

      .hamburger {
        font-size: 20px;
        cursor: pointer;
        margin-right: 12px;
        user-select: none;
      }

      .menu-panel {
        position: fixed;
        top: 38px; /* onder de titlebar */
        left: 0;
        width: 200px;
        background: #fff;
        border-right: 2px solid #000;
        box-shadow: 2px 2px 0 #000;
        padding: 12px;
        font-family: 'Atkinson Hyperlegible', sans-serif;
        display: none;
        z-index: 1001;
      }

      .menu-panel a {
        display: block;
        margin-bottom: 8px;
        text-decoration: none;
        color: #000;
        font-weight: bold;
      }

      .menu-panel a:hover {
        text-decoration: underline;
      }

      .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--mac-bg);
        z-index: 9999;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        font-family: 'Atkinson Hyperlegible', sans-serif;
      }

      body.light .menu-overlay {
        background: var(--mac-bg);
        color: #000;
      }

      body.dark .menu-overlay {
        background: linear-gradient(135deg, #1a1a1a, #000000);
        color: #eee;
      }

      body.retro .menu-overlay {
        background: linear-gradient(135deg, #000000, #001a00);
        color: #00ff00;
      }
      .menu-header {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        padding-right: 8px; /* pas aan of verwijder */
      }

      body.dark .menu-content a {
        color: #eee;
      }

      body.retro .menu-content a {
        color: #00ff00;
        text-shadow: 0 0 2px #00ff00;
      }

      body.retro .menu-close {
        color: #00ff00;
      }

      body.dark .menu-close {
        color: #eee;
      }

      .menu-close {
        font-size: 24px;
        cursor: pointer;
        user-select: none;
        padding: 4px 8px;
        margin-right: auto; /* <-- zet hem links */
      }

      .menu-content {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center; /* ← dit centreert horizontaal */
        justify-content: center;
        gap: 20px;
        width: 100%;
        text-align: center; /* ← centreert de tekst in de links */
      }

      .menu-content a {
        font-size: 22px;
        color: #000;
        text-decoration: none;
        font-weight: bold;
      }

      .menu-content a:hover {
        text-decoration: underline;
      }


      .mac-content img {
        display: block;
        max-width: calc(100% + 20px);
        height: auto;
        margin-left: -10px;
      }


      #loading {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        display: none;
      }

      .spinner {
        width: 24px;
        height: 24px;
        border: 3px solid #ccc;
        border-top: 3px solid #000;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }