body {
  background-color: #ddd;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

main {
  display: flex;
  flex-direction: row;
  margin: 30px;
}

input,
select {
  accent-color: #aa0000;
  margin-block: 2px;
}

.control-panel {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  gap: 30px;
}

.control-panel div {
  background-color: #ccc;
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.view {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#canvas {
  flex-grow: 1;
}

progress[value] {
  /* Get rid of the default appearance */
  appearance: none;

  /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  border: none;

  /* Add dimensions */
  width: 100%;
  height: 30px;

  /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  background-color: #ccc;

  /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  color: #aa0000;
  accent-color: #aa0000;

  position: relative;
  margin: 0 0 1.5em;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
  background-color: var(--background);
}

progress[value]::-webkit-progress-value {
  background-color: #aa0000;
}

::-moz-progress-bar {
  background-color: #aa0000;
}

canvas {
  position: absolute;
}