body, html, .page {
    min-height: 100vh;
    margin: 0;
    background-color: aliceblue;
}

.page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
}

.buttons button {
  margin: 1px;
  cursor: pointer;
  border-radius: 0px;
  border: 1px solid aliceblue;
  background-color: #6495ED;
}

.buttons button:hover {
  border: 1px solid black;
  cursor: pointer;
  background-color: #74A5FD;
}

#body-content {
  position: fixed;
  top: 100px;
  left:0;
  right:0;
  height:100%;
  width:100%;
}



.steps {
  margin: 2px;
}

#code {
  height: 100%; 
  grid-row: 1/5;
  background-color: beige;
  width: 100%;
}

#registers {
  background: lightgreen; 
  margin: 2px; 
  padding: 2px; 
  height: 100%; 
}

#canvas {
  margin:auto; 
  width:400px; 
  height:400px; 
  border:1px solid; 
  image-rendering: pixelated; 
  background-color: white;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: black;
  font-size: 30px;
  text-decoration: none;
}

#max-steps {
  width:auto;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(240, 248, 255, .7);
  display: none;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
  background: white;
  padding: 1em 2em;
  border-radius: 4px;
  min-width: 400px;
  width: 50%;
  max-height: 90%;
  
  overflow-y: scroll;
}

.modal:target {
  display: flex;
}

.row {
  width: 100%;
}