@font-face {
  font-family: 'JW CAPS SANS';
  src: url('../fonts/JWCAPSSANS-Medium.eot');
  src: url('../fonts/JWCAPSSANS-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/JWCAPSSANS-Medium.woff2') format('woff2'),
      url('../fonts/JWCAPSSANS-Medium.woff') format('woff'),
      url('../fonts/JWCAPSSANS-Medium.ttf') format('truetype'),
      url('../fonts/JWCAPSSANS-Medium.svg#JWCAPSSANS-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


html, body {
  background: #1ebdbe;
  font-family: 'JW CAPS SANS';
  font-size: 1.2rem;
}

p { color:#FFFFFF; font-size: 30px; font-family: Arial Black; margin-bottom: 0; }
.container { max-width: 810px; }
.splash { min-height: 100vh; }

.splash #logo { width: 100%; max-width: 350px; }
.splash span#enter { font-weight: bold; border-radius: 30px; border: 3px solid #FFFFFF; padding: 8px 35px; color: #ffffff; font-family: Arial Black; display: inline-block; margin: 100px auto 0; cursor: pointer; font-size: 20px; transition: 0.4s ease; }
.splash span#enter:hover { background: #FFFFFF; color: #000000; }
.splash span#enter:active { background: gray; border-color: gray; transform: scale(0.9); }
.splash select { padding: 8px 35px; margin: 30px 0 0; text-align: center; }
.splash select option { padding: 0; text-align: center; }
.splash h2 { color: #FFFFFF; font-size: 150px; font-family: Arial Black; }

.img-width { width: auto; max-width: 100%; }

.wrapper { background: url('../img/bg.jpg') no-repeat; background-size: contain; margin: 0 auto; display: block; background-position-x: center; }

#keypad-holder { padding: 0 100px; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap }
#keypad-holder div { max-width: 480px; }
#keypad-holder .logo { width: 100%; max-width: 200px; margin: 0 auto; }


.header .prompt {
  font-size: 30px;
  margin: 30px 0;
  text-transform: uppercase;
  color: #000000;
  font-family: 'JW CAPS SANS';
}

#input-field {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  font-size: 40px;
  text-align: center;
  border-radius: 5px;
  outline: none;
  border: 0;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.key {
  font-family: 'JW CAPS SANS';
  background-color: #F7EFFF;
  border: none;
  border-radius: 5px;
  font-size: 40px;
  font-weight: bold;
  padding: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
  min-height: 100px;
  color: #b5d884;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.3));
  -moz-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.3));
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.3));
  opacity: 1;
  transition: 0.6s ease-in-out;
}

.key:active {
  opacity: 0.5;
}
/*.key:hover {
  opacity: 0.5;
}*/

.delete {
  color: #b5d884;
}

.play-button {
  margin-top: 70px;
}

.play-button img {
  width: auto;
  max-width: 130px;
}


#digit-screen { display: flex; align-items: center; min-height: 100vh; text-align: center; }
#digit-screen * { color: #000; }
#digit-screen p { font-size: 30px; line-height: 1.35; font-family: 'JW CAPS SANS';}
#digit-screen h2 { font-weight: bold; font-size: 170px; font-family: 'Arial Black', sans-serif; }


#again { font-size: 50px; color: #8aab5b; margin-top: 60px; position: absolute; left: 0; right: 0; display: none; }