/* Make content area fill the entire browser window */
:root {
    color-scheme: light dark;
    --border-color: black;
    --background-color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
    :root {
        --border-color: white;
        --background-color: #212124;
    }
}
html{
  display: flex;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
body {
  margin: auto;
  font-family: sans-serif;
  font-size: 1.45em;
  background-color: var(--background-color);
  text-align: center;
}
table, tr, td, th {
  margin: 0px;
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1.0em;
}
td, th {
  padding: 0px 25px 0px 0px;
  margin: 0px;
  border: none;
  display: table-cell;
  text-align: center;
  min-width: 170px;
}
th {
  padding: 20px 25px 20px 0px;
}
#main {
  margin: 20px;
}
.button{
  font-size: 1.0em;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  border: none;
  /*border: 2px solid white;*/
  min-width: 170px;
}
.locked{
  background-color: red;
}
.unlocked{
  background-color: #04AA6D;
}