html, body {
  min-height: 100%;
  margin: 0;
}

#page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Veranderd: vult het scherm, maar kan meegroeien */
}

header, footer {
  flex-shrink: 0; /* Zorgt ervoor dat header en footer niet krimpen */
}

#cjsnowhtml5, ::backdrop {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  position: relative;
  flex: 1; /* Zorgt ervoor dat dit element alle beschikbare ruimte inneemt */
}
#wrapper {
  /* Visuele stijlen */
  border: 4px solid #086ca5;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  background-color: #086ca5;
  overflow: hidden; /* Zorgt dat de canvas netjes binnen de randen blijft */

  /* Definitieve regels voor afmeting op basis van hoogte */
  height: 96vh;
  max-width: 1600px;
  aspect-ratio: 4 / 3;
  margin: 10px auto; /* Aangepast voor 10px marge boven/onder */
}

.no-cursor #wrapper {
  cursor: none;
}
.loading #wrapper {
  visibility: hidden;
}
.stretch-stage #wrapper {
  width: 100vw;
  height: 100vh;
}
#monitors {
  position: absolute;
  top: 0;
  left: 0;
}
#stage {
  width: 100%;
  height: 100%;
}
#loading-progress {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 50%; /* Zet het startpunt op 50% van de breedte */
  transform: translateX(-50%); /* Verplaats het element 50% van zijn EIGEN breedte terug */
  width: 80%;
  border-radius: 20px;
  --progress: 0%;
  z-index: 100;
  border: 1px solid black;
}
.show-loading-progress #loading-progress {
  display: block;
}
#loading-progress::before {
  content: attr(data-progress);
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: black;
}
#loading-progress::after {
  content: '';
  display: block;
  height: 16px;
  border-radius: 20px;
  width: var(--progress);
  background-color: black;
}
#loading-image {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.stretch-loading-image #loading-image {
  width: 100%;
  height: 100%;
}
.buttons {
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 12px;
}
.buttons .button,
.buttons button {
  display: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.buttons button:disabled,
#add-sprite-file:disabled + #add-sprite-btn {
  cursor: auto;
  opacity: 0.5;
}
#start-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M8 5v14l11-7z" fill="%23fff"/%3E%3C/svg%3E%0A');
}
.running #start-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" fill="%23fff"/%3E%3C/svg%3E');
}
#stop-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"%3E%3Cpath d="M6 6h12v12H6z" fill="%23fff"/%3E%3C/svg%3E%0A');
}
#fullscreen-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath d="M14 28h-4v10h10v-4h-6v-6zm-4-8h4v-6h6v-4H10v10zm24 14h-6v4h10V28h-4v6zm-6-24v4h6v6h4V10H28z" fill="%23fff"/%3E%3C/svg%3E');
}
.fullscreen #fullscreen-btn {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath d="M10 32h6v6h4V28H10v4zm6-16h-6v4h10V10h-4v6zm12 22h4v-6h6v-4H28v10zm4-22v-6h-4v10h10v-4h-6z" fill="%23fff"/%3E%3C/svg%3E');
}
#download-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5,20h14v-2H5V20z M19,9h-4V3H9v6H5l7,7L19,9z'/%3E%3C/svg%3E");
}
#add-sprite-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'/%3E%3C/svg%3E");
}
#add-sprite-file {
  display: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.show-start-stop-btns #start-btn,
.show-start-stop-btns #stop-btn,
.show-fullscreen-btn #fullscreen-btn,
.show-download-btn #download-btn,
.show-add-sprite-btn #add-sprite-btn,
.show-add-sprite-btn #add-sprite-file {
  display: inline-block;
}
.monitor {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  overflow: hidden;
  padding: 3px;
  white-space: pre;
  color: #ffffff;
}
.show-monitor-box .monitor {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.3);
}
.monitor-label {
  margin: 0 5px;
  font-weight: bold;
}
.monitor-value {
  display: inline-block;
  vertical-align: top;
  min-width: 34px;
  text-align: center;
  border-radius: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  transform: translateZ(0);
}
.default .monitor-value,
.slider .monitor-value {
  margin: 0 5px;
  padding: 1px 3px;
}
.show-monitor-box .default .monitor-value,
.show-monitor-box .slider .monitor-value {
  background-color: rgba(0, 0, 0, 0.5);
}
.large {
  padding: 0.1rem 0.25rem;
  min-width: 3rem;
}
.show-monitor-box .large {
  background-color: rgba(0, 0, 0, 0.6);
}
.large .monitor-label {
  display: none;
}
.large .monitor-value {
  font-size: 1rem;
  width: 100%;
}
.list {
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
}
.list .monitor-label {
  text-align: center;
  padding: 3px;
  width: 100%;
  display: block;
  margin: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
}
.list .monitor-value {
  display: block;
}
.row {
  display: flex;
  align-items: center;
  padding: 2px;
  height: 24px;
  box-sizing: border-box;
  transform: translateZ(0);
}
.index {
  font-weight: bold;
  margin: 0 3px;
  flex: none;
}
.row-value {
  flex: auto;
  margin: 0 3px;
  text-align: left;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  height: 22px;
  padding: 3px 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.show-monitor-box .row-value {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
}
.slider input {
  display: block;
  width: 100%;
  transform: translateZ(0);
}
#asking-box {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(33, 33, 33, 0.7);
}
.asking #asking-box {
  display: block;
}
#question {
  display: block;
  margin: 0 10px;
  margin-top: 10px;
  font-size: 12px;
  color: white;
}
#answer {
  border: none;
  background: none;
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}
#answer:focus {
  outline: none;
}
#errors {
  -webkit-appearance: none;
  border: none;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

#loading-logo,
#loading-gif {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  pointer-events: none;
}

.loading #loading-gif {
    top: auto;
    bottom: 85px;
    transform: translateX(-50%);
    max-height: 300px;
}

.loading #loading-logo,
.loading #loading-gif {
  display: block;
}

#loading-logo {
  top: 40px;
  max-height: 200px;
}

#loading-gif {
  top: 50%;
  transform: translate(-50%, -50%); 
  max-height: 300px;
}