/* Copyright (c) 2025 Michael Erickson.  All rights reserved. */

body {
  margin: 1vmin;
  touch-action: manipulation;
}

#appgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10vmin);
  grid-auto-rows: 10vmin;
  gap: 1vmin;
  max-width: calc(12 * 10vmin + 11 * 1vmin);
}

h1 {
  position: absolute;
  margin: 0px;
  margin-top: 40vmin;
  font-size: 5vmin;
  padding: 1vmin;
  width: 96vmin;
  text-align: center;
  z-index: 2;
}

section {
  grid-column: span 3;
  grid-row: span 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1vmin;
  justify-content: center;
  align-content: center;
}

#section-big {
  grid-column: span 9;
  grid-row: span 9;
  display: grid;
  /*
  grid-template-columns: repeat(auto-fill, 64px);
  grid-template-rows: repeat(auto-fill, 64px);
 */
  overflow: auto;
  background: lightgray;
}

canvas {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 1;
  image-rendering: pixelated;
}

h2 {
  grid-column: span 4;
  grid-row: span 1;
  margin: 0px;
  overflow: hidden;
  font-size: 5vmin;
  background: gray;
  padding: 1vmin;
}

label {
  grid-column: span 2;
  overflow: auto;
  text-align: right;
  font-size: 3vmin;
  font-family: monospace;
  padding: 1vmin;
}

output {
  grid-column: span 2;
  overflow: auto;
  text-align: right;
  font-size: 3vmin;
  font-family: monospace;
  padding: 1vmin;
  background: black;
  color: white;
}

textarea {
  grid-column: span 4;
  grid-row: span 3;
  resize: none;
  font-size: 2vmin;
  -webkit-appearance: none;
  border-radius: 4px;
  border: 1px solid black;
}

button {
  overflow: hidden;
  font-size: 3vmin;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: black;
  border: 1px solid gray;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

button:hover {
  background-color: #dddddd;
}

button:active {
  background-color: #aaaaaa;
}

button:disabled {
  opacity: 0.5;
}

button span {
  pointer-events: none;
  user-select: none;
}

#speed {
  grid-column: span 4;
  grid-row: span 1;
  display: none;
}

#scale {
  grid-column: span 4;
  grid-row: span 1;
  display: none;
}

article {
  width: 98vmin;
  margin-top: 1vmin;
  font-size: 3vmin;
}

ul {
  list-style-type: none;
}