@import url('https://fonts.googleapis.com/css2?family=Text+Me+One&display=swap');

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

* {
/*  border: solid black 1px;*/

  box-sizing: border-box;
  font-family: 'Text Me One', sans-serif;
}

body {
  display: grid;
  grid-gap: 10px;
  align-self: center;
  margin: auto;
  max-width: 960px;
  grid-template-areas:
    'header'
    'instructions'
    'settings'
    'canvas';
  grid-template-columns: max-content;
  grid-template-rows: max-content max-content max-content;
  height: max-content;
  width: max-content;
  background-color: #141414;
  color: #e88a1a;
}

header {
  grid-area: header;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

#open::after{
    content: "\a \a";
    white-space: pre;
}

.modal-body{
  background-color: #fcfcfc;
  color: #5c3505;
  padding: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.modal-title{
  background-color: #fcfcfc;
  color: #5c3505;
  font-size: 2em;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

canvas {
  grid-area: canvas;
}

label {
  display: inline-block;
  width: 75px;
}

.cols {
  grid-area: cols;
}

.rows {
  grid-area: rows;
}

.generate {
  grid-area: generate;
}

footer {
  grid-area: footer;
  text-align: center;
}

footer > a:hover {
  background-color: lightgrey;
}

@media (max-width: 700px) {
  :root{
    font-size: 82%;
  }
  body {
    grid-template-areas:
      'header'
      'instructions'
      'settings'
      'canvas'
      'footer';
    grid-template-columns: max-content;
    grid-template-rows: max-content max-content max-content max-content;
  }
  canvas {
    width: 90vw;
    align-self: center;
  }
  *{
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

.wm-table-center {
  display: inline-block;
  /*min-width: 320px;*/
  text-align: center;
}

.wm-round-box {
  width: 50px;
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
}

.wm-round-box-text {
  padding: 2px;
  font-weight: bold;
  color: teal;
}

.wm-settings {
  text-align: center;
}