body {
  display: flex;
  height: 100vh; /* Full viewport height */
  flex-direction: column; /* Stack the children vertically */
  margin: 0;
  font-family: Arial, sans-serif;

  box-sizing: border-box;
/*  border: 4px solid lime;*/
}

header {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
  z-index: 100;
}

h3 {
  margin: 7px 0px 0px 0px;
}


#app-holder {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */

  box-sizing: border-box;
/*  border: 4px solid blue;*/

}

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  box-sizing: border-box;
/*  border: 4px solid magenta;*/

  z-index: 50;

/*  flex: 1; /* To allow the container to grow and consume the available space */*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#score {
  position: fixed;
  bottom: 50px;
  left: 50px;
  background-color: rgba(190, 221, 237, 0.7); /* 70% transparency */
  border: 6px solid #6CB9D6;
  border-radius: 10px; /* Rounded edges */
  font-family: 'Bangers', cursive;
  text-align: center;
  padding: 10px;
  color: black; /* Adjust text color as needed */
  font-size: 24px; /* Adjust font size as needed */
}

main {
  flex: 1; /* To allow main to grow and consume the available space */

}

#main-drawing {
  width: 100%;
  height: 100%;
}

.canvas-holder {
  position: relative;
  background-color: grey;
}


button {
  font-size: 16px;
  margin: 2px;
}

button.active {
  background-color: hsl(100, 100%, 50%);
}


canvas {
  position: relative;

}

.tools {
  max-width: 300px;

  box-shadow: 0px 2px 8px rgba(0, 0, 0, .5);
}

.controls {
  background-color: hsla(100, 100%, 100%, .9);
  border: 2px solid magenta;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, .5);
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  flex-direction: row;
}


.controls-section {
  margin: 10px;
  padding: 6px;

  box-shadow: 0px 2px 1px rgba(0, 0, 0, .5);
}

.columns {
   overflow: hidden;
  flex: 1;s
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;

}

.slider-label {
  font-size: 80%;
  font-style: italic;
}
.panel {
  flex: 1
}

.problem {
  color: hsla(0, 100%,40%, 1);
}


.active {
  background-color: hsla(180, 100%, 80%, 1);
}

.widget {
  position: relative;
  margin: 10px;
}