body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #dcfaff;
    padding: 20px;
    cursor: url('vogel.png'), auto;
  }

 #container{
    position: absolute;
    background-image: url(huis3.png);
    margin-left: 100px;
    margin-top: 100px;
    min-width: 927px;
    min-height: 768px;
    max-height: 100%;
    background-repeat: no-repeat;   
}


body.dark-mode {
    background: #2c3e50;
  }

#huis {
  position: fixed;
  top: 160px;
  left: 77px;
}

#deur {
  position: absolute;
  top: 501px;
  left: 114px;
  
}

.toggle-btn {
    cursor: pointer;
    position: absolute;
    top: 215px;
    left: 642px;

  }

  .licht {
    width: 77px;
    height: 436px;
    background: red;
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: mymove 3s infinite;
    position: absolute;
    top: 292px;
    left: 554px;
    transform: rotate(23deg);
    display: none;
  }

  .licht.visible {
    display: block;
  }

@keyframes mymove {
  50% {background-color: blue;}
}

  .licht2 {
    width: 72px;
    height: 420px;
    background: #26ff00;
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: mymove2 3s infinite;
    position: absolute;
    opacity:(66);
    top: 300px;
    left: 750px;
    transform: rotate(-18deg);
    display: none;
  }

  .licht2.visible {
    display: block;
  }

@keyframes mymove2 {
  50% {background-color: #ff009c;}
}

  .licht3 {
    width: 84px;
    height: 419px;
    background: #eaff00;
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: mymove3 3s infinite;
    position: absolute;
    top: 314px;
    left: 657px;
    display: none;
  }

  .licht3.visible {
    display: block;
  }

@keyframes mymove3 {
  50% {background-color: #13ff00;}
  
}

.aapje {
  position: absolute;
  left: 281px;
  top: 99px;
  display: none;
}

  .aapje.visible {
    display: block;
  }

.eekhoorn {
  position: absolute;
  left: 753px;
  top: 248px;
  display: none;
}

  .eekhoorn.visible {
    display: block;
  }

        .musicplayer {
            position: absolute;
            width: 156px;
            max-width: 90vw;
            left: 309px;
            top: 599px;
            display: none;
        }

        .musicplayer.visible {
          display: block; 
        }

        .musicplayerimg {
            width: 100%;
            position: absolute;
            height: auto;
            display: block;
            border-radius: 10px;
        }

        .controls {
            position: absolute;
            bottom: 67px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: -10px;
            background: rgba(250, 238, 245, 0.9);
            padding: -34px 25px;
        }

        button {
            background: none;
            border: none;
            font-size: 12px;
            cursor: pointer;
            padding: 2px 10px;
            transition: transform 0.2s, opacity 0.2s;
            outline: none;
        }