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;
}

.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;
}

.SmallKey {
  width: 175px;
}

.BigKey {
  width: 360px;
}

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

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

.aRed {
  background-color: rgb(200, 53, 50);
}

#MainEnter {
  display: none;
}

.confetti {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
  z-index: 1000;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 30px;
  background: #ffd300;
  top: 0;
  opacity: 0;
}
.confetti-piece:nth-child(1) {
  left: 7%;
  -webkit-transform: rotate(-40deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 182ms;
  -webkit-animation-duration: 1116ms;
}
.confetti-piece:nth-child(2) {
  left: 14%;
  -webkit-transform: rotate(4deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 161ms;
  -webkit-animation-duration: 1076ms;
}
.confetti-piece:nth-child(3) {
  left: 21%;
  -webkit-transform: rotate(-51deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 481ms;
  -webkit-animation-duration: 1103ms;
}
.confetti-piece:nth-child(4) {
  left: 28%;
  -webkit-transform: rotate(61deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 334ms;
  -webkit-animation-duration: 708ms;
}
.confetti-piece:nth-child(5) {
  left: 35%;
  -webkit-transform: rotate(-52deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 302ms;
  -webkit-animation-duration: 776ms;
}
.confetti-piece:nth-child(6) {
  left: 42%;
  -webkit-transform: rotate(38deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 180ms;
  -webkit-animation-duration: 1168ms;
}
.confetti-piece:nth-child(7) {
  left: 49%;
  -webkit-transform: rotate(11deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 395ms;
  -webkit-animation-duration: 1200ms;
}
.confetti-piece:nth-child(8) {
  left: 56%;
  -webkit-transform: rotate(49deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 14ms;
  -webkit-animation-duration: 887ms;
}
.confetti-piece:nth-child(9) {
  left: 63%;
  -webkit-transform: rotate(-72deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 149ms;
  -webkit-animation-duration: 805ms;
}
.confetti-piece:nth-child(10) {
  left: 70%;
  -webkit-transform: rotate(10deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 351ms;
  -webkit-animation-duration: 1059ms;
}
.confetti-piece:nth-child(11) {
  left: 77%;
  -webkit-transform: rotate(4deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 307ms;
  -webkit-animation-duration: 1132ms;
}
.confetti-piece:nth-child(12) {
  left: 84%;
  -webkit-transform: rotate(42deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 464ms;
  -webkit-animation-duration: 776ms;
}
.confetti-piece:nth-child(13) {
  left: 91%;
  -webkit-transform: rotate(-72deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 429ms;
  -webkit-animation-duration: 818ms;
}
.confetti-piece:nth-child(odd) {
  background: #7431e8;
}
.confetti-piece:nth-child(even) {
  z-index: 1;
}
.confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  -webkit-animation-duration: 2000ms;
}
.confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  -webkit-animation-duration: 2500ms;
  -webkit-animation-delay: 1000ms;
}
.confetti-piece:nth-child(4n-7) {
  background: red;
}
@-webkit-keyframes makeItRain {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(350px);
  }
}