html {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #ffffff;
}

/*
* {
    outline: 1px dotted red;
}
*/

.center {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
}

.centerFlex {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
}

/* .button {
      border: none;
      padding: 15px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
      background: #dddddd;
      border-radius: 10px;
}

.button:hover {
      background: #a3a3a3;
} */

.button {
      font-size: 18px;
      letter-spacing: 2px;
      background-color: #dddddd;
      text-decoration: none;
      color: #000;
      cursor: pointer;
      border: 2px solid;
      padding: 0.5em 0.75em;
      box-shadow: 0px 0px 0px 0px, 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
}

.button:active {
      box-shadow: 0px 0px 0px 0px;
      top: 5px;
      left: 5px;
}

.inputID {
      cursor: text;
      width: 40px;
      height: 40px;
      padding: 0;
}

.inputBox {
      margin: 10px;
      font-size: 18px;
      letter-spacing: 2px;
      background-color: #ffffff;
      text-decoration: none;
      text-align: center;
      color: #000;
      border: 2px solid;
      box-shadow: 0px 0px 0px 0px, 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
}

#matchAmount {
      margin-top: 0px;
}

.inputHolder {
      margin: 10px;
}

.matchText {
      font-size: 16px;
      letter-spacing: 1px;
      margin: 0px;
}

table {
      border-collapse: separate;
      border-spacing: 15px 10px;
      border: 1px solid #a3a3a3;
      border-radius: 10px;
      margin-bottom: 10px;
}

.gridResult {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
}

.buttonDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
}

.edit,
.delete {
      margin: 10px;
      box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 1px 1px 0px 0px, 2px 2px 0px 0px;
      padding: 0.25em 0.5em;
      font-size: 16px;
}

.tableLabel {
      font-weight: bold;
}

.allGrids {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
}

.clickable {
      cursor: pointer;
}

.title {
      margin-top: 40px;
      font-size: 50px;
}

.userGrid {
      margin-top: 20px;
      margin-bottom: 20px;
}

.warningText {
      height: 20px;
      font-size: 16px;
      color: rgb(175, 0, 0);
      margin-bottom: 20px;
}

.gridSubmit {
      margin-top: 20px;
      margin-bottom: 20px;
}

.addGrid {
      margin-bottom: 20px;
}

.imgcontainer {
      filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
      z-index: 3;
}

.imgcontainer img {
      height: 100%;
      width: 100%;
}

.svgGrid .cellBack {
      position: relative;
      z-index: 1;
      fill: #444;
}

.svgGrid .cellFill {
      position: relative;
      z-index: 2;
}

.svgGrid .gridLine {
      stroke: #444;
      stroke-width: 1;
      shape-rendering: crispedges;
}

.svgGrid rect.none {
      fill: #888888;
}

.svgGrid rect.default {
      fill: #fff;
}

.svgGrid rect.highlight {
      fill: #58a6c5;
}

.svgGrid rect.block {
      fill: #000;
}

.svgGrid .gridBorder {
      fill: none;
      stroke: #000;
      stroke-width: 2;
}

* {
      box-sizing: border-box;
      margin: 0;
}