body, html {
  background-color: #ddd;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  height: 100%;
}

main {
  display: grid;
  flex-direction: row;
  grid-template-columns: 25vw auto 20vw;
  grid-template-rows:  30px auto auto;
  grid-template-areas: 
    "controls progress inspector"
    "controls canvas inspector"
    "stats canvas inspector";
  gap: 30px;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
}

input,
select {
  accent-color: #aa0000;
}

main > div {
  background-color: #ccc;
  box-sizing: border-box;
  padding: 10px;
}

.controls {
  grid-area: controls;
}
.stats {
  grid-area: stats;
}
.progress {
  grid-area: progress;
}
.canvas {
  grid-area: canvas;
  padding: 0px;
}
.inspector {
  grid-area: inspector;
  font-family: monospace;
}

.controls, .stats, .inspector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.row {
    display: flex;
    gap: 0.5rem;
}

.row > button {
    display: block;
    width: 0;
    flex-grow: 1;
}

h1, h2 {
    margin: 0;
}

progress {
  /* 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;
}

/*
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::-webkit-progress-bar {
  background-color: var(--background);
}

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

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

canvas {
  position: absolute;
}

table, tr, td, td {
  border: 1px solid #aaa;
  border-collapse: collapse;
}

th {
  text-align: left;
}

td, th {
  padding: 2px;
}

tr:nth-child(odd) {
  background-color: #c0c0c0;
}

tr.active {
  background-color: #ffa;
}

td.relocated {
  background-color: #aaf;
}