body {
  background-color: #f4f4f4;
  //background-image: linear-gradient(to bottom, #a7a7a7 0%, #e4e4e4 51%);
  font-family: "Helvetica", system-ui, -apple-system, -apple-system-font,
    "Segoe UI", "Roboto", sans-serif;
  font-size: 12px;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  /* Padding to avoid the "unsafe" areas behind notches in the screen */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  //text-transform:uppercase;
  width: 100%;

  text-align: center;
  vertical-align: middle;
}

.clickable {
  cursor: pointer;
}

.InstructionsArea {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  font-size: 16px;
}

#PlayArea {
  display: none;
}

.Complete {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  font-size: 16px;
  display: none;
}

table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 10px;
  border-collapse: separate;
}

td {
  width: 50px;
  height: 50px;
  border: 1px grey solid;
  font-weight: bold;
  -webkit-user-select: none;
  user-select: none;
}

.aKey {
  color: white;
  background-color: rgb(100, 106, 170);
}

.Wrong {
  animation-duration: 1s;
  animation-name: Wrong;
  color: white;
  background-color: rgb(120, 124, 126);
}

@keyframes Wrong {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(120, 124, 126);
  }
}

.WrongDone {
  color: white;
  background-color: rgb(120, 124, 126);
}

.Right {
  animation-duration: 1s;
  animation-name: Right;
  color: white;
  background-color: rgb(106, 170, 100);
}

@keyframes Right {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(106, 170, 100);
  }
}

.RightDone {
  animation-name: Right;
  color: white;
  background-color: rgb(106, 170, 100);
}

.Near {
  animation-duration: 1s;
  animation-name: Near;
  color: white;
  background-color: rgb(201, 180, 88);
}

@keyframes Near {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(201, 180, 88);
  }
}

.Near {
  animation-duration: 1s;
  animation-name: Near;
  color: white;
  background-color: rgb(201, 180, 88);
}
@import ("styles.css");

.Error {
  color: white;
  background-color: red;
}

.Selected {
  border: 1px red solid;
}

#ShareText {
  display: none;
}

#MastCog {
  font-size: 24pt;
}

.SettingsArea {
  display: none;
}

.SettingText {
  width: 240px;
}

.EnterCell {
  width: 305px;
  color: white;
  background-color: rgb(100, 106, 170);
}

.aCell {
  font-size: 24pt;
}

#MainEnter {
  display: none;
}