* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

/* Container fylder ca. 1512x982 pixels skærm */
  #container {
    position: relative;
    height: 982px;
    width: 1512px;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto; 
    overflow: hidden;
    user-select: none; 
  }

/* Baggrundsbillede fylder hele containeren */
  #background-image {
    position: absolute; 
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 0; /* Ligger bagerst i stakken */
  }

/* Knap-container i 2x2 grid */  
#buttons {
    position: absolute; 
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: grid; /* Grid layout */
    grid-template-columns: 1fr 1fr; /* To lige brede kolonner */
    grid-template-rows: 1fr 1fr; /* To lige høje rækker */
    gap: 25px; 
    padding: 40px 60px; 
    z-index: 1; 
  }
  /* Små billedknapper uden baggrund */
  .button-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0; 
    box-shadow: none; 
    background-color: transparent; 
    cursor: pointer; 
    transition: transform 0.3s ease; /* Glidende animation ved hover/fokus */
    display: block;
  }

  a {
    outline: none;
    display: block;
  }

  /* Animation keyframes */

/* "Vinkende" hånd-animation (rotation) */
@keyframes waveHand {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(15deg); }
            50% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
}
/* "Slående" hjerte-animation (skalering) */
@keyframes beatHeart {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
}
/* Alternativ håndvinken til hjerne */
@keyframes waveHand2 {
            0%, 100% { transform: rotate(0deg); }
            20% { transform: rotate(20deg); }
            60% { transform: rotate(-15deg); }
            80% { transform: rotate(10deg); }
}
/* "Pulserende" mave-animation (skalering) */
@keyframes pulseScale {
            0%, 100% { transform: scale(1); }
            30% { transform: scale(1.15); }
            70% { transform: scale(0.85); }
}
  #haandimg{
    width: 18rem;
    margin-bottom: 27rem;
    margin-left: 0;
    animation: waveHand 3s ease-in-out infinite; /* Animerer konstant med vink */
  }

  #hjerteimg{
    width: 11rem;
    margin-left: 11rem;
    animation: beatHeart 1.5s ease-in-out infinite; /* Hjerte slår konstant */
  }

  #hjerneimg{
    width: 15rem;
    margin-left: 30rem;
    margin-top: 7rem;
    animation: waveHand2 4s ease-in-out infinite; /* Hjerne "vinker" med anden rytme */
  }

  #mavenimg {
    width: 14rem;
    margin-left: 22rem;
    animation: pulseScale 2.5s ease-in-out infinite; /* Mave pulserer */
  }


  /* Overlay styling */
  #overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255 255 255 / 0.25); /* Halvgennemsigtig hvid overlay */
    backdrop-filter: blur(12px); 
    display: flex;
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    z-index: 2; /* Øverst i stakken */
    user-select: none; 
  }

  #overlay-text {
    font-size: 6rem;
    font-family: "Swanky and Moo Moo";
    text-transform: uppercase; 
    font-weight: 700;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.6); 
    letter-spacing: 0.07em;
    user-select: none;
    white-space: nowrap; 
  }

  .hidden {
    display: none !important;
  }