body,
html {
  overflow-y: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%; 
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

:root { /* this keeps user from zooming */ 
  --primary-color: #414447;
  --bg-color-primary:  white;  
  --stroke: #eee; /* Stroke color for dark mode */ 

  touch-action: pan-x pan-y;
  -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

body{
  background-color: var(--bg-color-primary); 
}

[data-theme="dark"] {
  --primary-color: #8899A6;
  --bg-color-primary: #1a2835;
  visibility: visible;
}

.wrapper {
  display: grid;
  position: relative;
  grid-template-rows: 6vh 37vh 2.85vh 7vh 3vh 7.0vh 22vh; /* Top, Board, Next Game Time, Guess, Message, Keyboard, Skin */ 
  grid-template-columns: 100%; 
  text-align: center;
  align-items: center;
  justify-content: center;
  color: inherit;
  background-color: inherit;

}

@media (min-width: 640px) {
  .wrapper {
    width: 98%;
    margin: 0 auto;
  }
}

@media (min-width: 810px) {
  .wrapper {
    width: 75%;
    margin: 0 auto;
  }
}

@media (min-width: 1040px) {
  .wrapper {
    width: 55%;
    margin: 0 auto;
  }
}

@media (min-width: 1200px) {
  .wrapper {
    width: 45%;
    margin: 0 auto;
  }
}

.no-flash {
  visibility: hidden;
}

[data-theme="dark"] .no-flash {
  visibility: visible;
}

.share-button {
  display: flex;
  align-items: center;
}

.arrow-up,
.box {
  width: 30px;
  height: 30px;
  margin-right: 10px; 
}

.top-container {
  display:flex;
  justify-content: space-between;
  align-items:center; 
  color: inherit;
  background-color: inherit;
  height: 95%;
}

.menu-cont {
  display: block;
  cursor: pointer;
  padding-left: 0;
  padding-right: 1vw;
  margin-left: 0;
  margin-right: 0;
}

.menu-cont-invisible {
  visibility: hidden;
  display: block;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  
}

h1 {
  text-align: center;
  color: inherit;
 }
 
 .name-cont{
   color: inherit;
   background-color: inherit;
 }
 
 #ButtonSpace {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  color: inherit;
  justify-content: center;
  background-color: inherit;
  vertical-align: middle;
}

#hints-board-container {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr; 
  grid-template-rows: auto; 
  align-items: center;
  justify-content: center;
  height: 100%;
}

.show-hints #left-hints, .show-hints #right-hints {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.show-hints, .green-button, #next-game-time {
  font-size: large;
}

@media (orientation: landscape) and (max-height: 475px) {
  .show-hints, .green-button, #next-game-time {
    font-size: 7pt;
  }
}

@media (orientation: landscape) and (min-height: 474px) and (max-height: 850px) {
  .show-hints, .green-button, #next-game-time {
    font-size: 10pt;
  }
}

.show-keys #left-hints, .show-keys #right-hints {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hint-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center; 
  height: 100%;
}

.hint {
  font-weight: bold;
  padding: 2px;
  margin: 2px;
  text-align: center;
  display: none; 
}

.green-button {
  color: forestgreen;
  border: 2px solid forestgreen;
}

.gray-button {
  border: 2px solid gray;
  color: gray;
}

#BoardSpace {
  position: relative;
  display:flex;
  height: 37vh;
  max-height: 37vh;
  width: 100%;
  color: inherit;
  background-color: inherit;
  justify-content: center;
}

#skin-space {
  position: relative;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%;
  width: 100%;
  color: inherit;
  text-align: center;
  background-color: inherit;
}

#PlayBoard { 
  height: 100%;
  width: 100%; 
  color: inherit;
  background-color: inherit;
}

#guesses-title{
  display: flex;
  text-align: center;
  color: inherit;
}

#step-counter {
  align-items: center;
  text-align: center;

  position: relative;
  display:flex;
  height: 100%;
  width: 100%;
}
#center{
  height: 100% !important;
  width: 100%; 
  color: inherit;
  background-color: inherit;
  font-size: 3.0vh;
  justify-content: center;
}

#key{
  height: 90%;
  width: 12.5%;
  padding: 2%;
  border-radius: 5px; 
  background-color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

#key .dark-mode {
  color: inherit;
  background-color: inherit;
  border: 2px solid lightgray;
}

#guess-hint {
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly !important;
  z-index: 10;
  position: relative; 
}


#hint{
  height: 90%;
  width: 12.5%;
  padding: 2%;
  border-radius: 5px; 
  background-color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hint .dark-mode {
  color: inherit;
  background-color: inherit;
  border: 2px solid lightgray;
}

#guess {
  height: 100% !important;
  display: flex;
  width: 65% !important; 
  max-width: 65% !important;
  color: inherit;
  background-color: inherit;
  justify-items: center;
  flex-shrink: 1;
}

#guess .dark-mode{
  color: inherit;
  background-color: inherit;
}
#guess .wordError {
  color: inherit;
  background-color: crimson;
  padding: 0%;
}

.shake_button {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.hopButton {
  animation: hop 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes hop {
  10%,
  90% {
    transform: translate3d(0, -.75vh, 0);
  }
  20%,
  80% {
    transform: translate3d(0, 1vh, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(0, -2vh, 0);
  }
  40%,
  60% {
    transform: translate3d(0, 2vh, 0);
  }
}

#msg-center{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size:2.0vh;
  font-weight: inherit;
  width: 70%;
  height: 100%;
}

#KeyboardSpace {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: inherit;
  background-color: inherit;
}

#kb-center {
  align-content: center;
  height: 100%;
  width: 100%; 
  color: inherit;
  background-color: inherit;
}

#NextGameTime {
  display:flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
  background-color: inherit;

}

#next-game-time{
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: inherit;
  width: 100%;
  height: 100%;
}

#MsgSpace {
  display:flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
  background-color: inherit;

}

#Daily,
#Unlimited {
  background-color: inherit;
  font-weight: bold;
}

.Pressed {
  color: forestgreen;
  border-color: forestgreen !important;
}
.NotPressed {
  color: inherit;
  border-color: inherit !important;
}
.Pressed .dark-mode{
  color: forestgreen !important;
  border-color: forestgreen;
}
.NotPressed .dark-mode{
  color: white !important;
  border-color: inherit;
}
#stats_view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px solid gray;
  border-radius: 3px;
  margin: 20px;
  font-size: 3vmin; 
  font-weight: inherit; 
  text-align: center;
  width: 3rem; 
  height: 3rem; 
  position: absolute;
  top: 20%;
  left: 50%;
  padding-bottom: 20%;
  z-index: 10;
  visibility: hidden;
  color: inherit;
  background-color: inherit;

}

.guess-box {
  box-sizing: border-box;
  border: 3px solid gray;
  border-radius: 7px;
  margin: 1.5px;
  font-weight: inherit; 
  font-size: 3.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: inherit;
  background-color: inherit;
padding: 0 !important;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 7px;
  margin: 3px;
  font-size: xx-large;
  font-weight: inherit; 
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: inherit;
  background-color: inherit;
  width: 100%;
padding: 0 !important;
}

.larger-font {
  font-size: xxx-large !important;
}

@media (orientation: landscape) and (min-height: 300px) and (max-height: 579px) {
  .letter-box {
    font-size: medium;
  }

  .larger-font {
    font-size: large !important;
  }
}

@media (orientation: landscape) and (min-height: 580px) and (max-height: 800px) {
  .letter-box {
    font-size: large;
  }

  .larger-font {
    font-size: x-large !important;
  }
}

.filled-box {
  border: 4px solid gray;
  max-width: 19%;
}

.letter-row {
  display: flex;
  height: 16.6% !important;
  width: 100%;
  color: inherit;
  background-color: inherit;

}

.guess-row {
  display: flex;
  height: 100% !important;
  width: 100%;
  color: inherit;
  background-color: inherit;

}

.kb-box {
  box-sizing: border-box;
  display: flex;
  border: 2px solid gray;
  border-radius: 7px; 
  font-weight: inherit; 
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  color: inherit;
  padding: 0px;
  background-color: inherit;
  height: 90%;
  width: 92%  !important;
  font-size: 3.2vh;
  align-items: center;
  box-shadow: none !important;
}

.kb-box-del, .kb-box-enter {
  box-sizing: border-box;
  display:flex;
  border: 2px solid gray;
  border-radius: 7px;
  margin: 3px;
  font-weight: inherit; 
  text-align: center;
  color: inherit;
  background-color: inherit;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 90%;
}
.kb-box-del:active{
  direction: rtl;
}

.kb-box-enter:active{
  direction: rtl;
}

.kb-row1 {
  display: grid;
  place-items:  center;
  grid-template-columns: 0% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 0%;
  height: 30%; 
  color: inherit;
  background-color: inherit;
  justify-content: center;
}
.kb-row2 {
  display: grid;
  place-items:  center;
  grid-template-columns: 5.9% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 5.9%;
  height: 30%;
  color: inherit;
  background-color: inherit;
  justify-content: center;
}
.kb-row3 {
  display: grid;
  place-items:  center;
  grid-template-columns: 14.7% 1% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 9.8% 1% 14.7%;
  height: 30%; 
  color: inherit;
  background-color: inherit;
  justify-content: center;
}

.overlay {
  height: 200vh;
  width: 100vw;
  display:flex;
  position: absolute; 
  z-index: 10; 
  top: 0%;
  justify-content: center;
  background-color: inherit; 
  color: inherit;
  overflow-y: auto; 
  overflow-x: hidden;  
  padding: 3vmin;

} 

.show {
  display: block;
}

.dark-mode {
  background-color: #152028;
  color: #d5cfc1;
  border-color: lightgray;
  box-shadow: 10px 1px 5px black;
  opacity: 1;
  font-weight: 400;
}

.light-mode {
  background-color: white;
  color: #152028;
  border-color: darkgray;
  box-shadow: 10px 1px 5px gray;
  opacity: 1;
  font-weight: 500;
}

.hidden {
  display: none;
}

header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.targets {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 20px;
}

.close-button, .close-speed-button {
  background-color: transparent;
  border: none;
  padding: 0;
  position: relative; 
  color: inherit;
  top:3px;
  right:3px  
}

.svg-text {
  width: 20px;
  height: 20px;
  }

@media (max-width: 600px) {
  .svg-text {
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .svg-text {
  width: 40px;
  height: 40px;
  }
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .narrow-text {
    max-width: 50%;
    margin: 0 auto;
  }
}

.shareButton {
  background-color: transparent; 
  border: none; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  padding: 0; 
  cursor: pointer; 
  height: 100%;
  width: 100%;
  transition: background-color 0.3s; 
}

.shareButton:hover {
  background-color: #aaa;
}

.shareButton svg {
  stroke: #1a2835;
  fill: #1a2835;
  width: 80%;
  height: 80%;
}

.dark-mode .shareButton svg {
  stroke: #ccc;
  fill: white;
}

.shareButton:disabled {
  opacity: 0.5; 
  cursor: not-allowed; 
  pointer-events: none; 
}

.howToPlayButton {
  background-color: transparent; 
  border: none; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  padding: 0; 
  cursor: pointer; 
  height: 100%;
  width: 100%;
}

.howToPlayButton:hover {
  background-color: #aaa;
}

.howToPlayButton svg {
  fill: black;
  width: 70%;
  height: 70%;
}

.dark-mode .howToPlayButton svg {
  fill: #ccc;
}

.howToPlayButton:disabled {
  opacity: 0.5; 
  cursor: not-allowed; 
  pointer-events: none; 
}

.settingsButton {
  background-color: transparent; 
  border: none; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  padding: 0; 
  cursor: pointer; 
}

.settingsButton:hover {
  background-color: #aaa;
}

.settingsButton svg {
  fill: #1a2835;
  width: 70%;
  height: 70%;
}

.dark-mode .settingsButton svg {
  
  fill: #ccc;
}

.switch {
  position: relative;
  display: flex;
  width: 60px;
  height: 34px;
  margin-bottom: 0px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 34px;
  background-color: forestgreen;
  border-radius: 20px;
  -webkit-transition: .4s;
  transition: .4s;
  display: flex;
  align-items: center; 
}

.slider:before {
  content: "";
  position: absolute;
  left: 4px;
  height: 26px;
  width: 26px;
  background-color: #1a2835;
  border-radius: 50%; /* Make it a circle */
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle-container {
  height: 40px; 
}

input:checked + .slider {
  background-color: forestgreen;
}

input:focus + .slider {
  box-shadow: 0 0 1px forestgreen;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.name-cont {
  display: inline-flex; 
  color: inherit;
  border: none;
  cursor: pointer;
  font-size: x-large;
  justify-content: center;
  align-items: center;
  vertical-align: middle; 
  height: 100%;
  width: 100%;
}

.arrow {
  margin-left: 5px; 
}

.dropdown {
  position: relative;
  display: inline-block;
  justify-content: center;
  background-color: forestgreen;
  color: inherit;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: forestgreen;
  color: inherit;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 11;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: inherit;
}

.dropdown-content a:hover {
  background-color: #ccc;
}

.show-dropdown {
  display: block;
}

.custom-radio {
  display: none; 
}

.custom-radio-span {
  position: relative;
  padding-left: 25px; 
  cursor: pointer;
}

.custom-radio-span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px; 
  height: 16px; 
  border: 2px solid forestgreen; 
  background-color: white; 
  border-radius: 50%;
}

.custom-radio:checked + .custom-radio-span::before {
  background-color: forestgreen; 
  border-color: forestgreen; 
}

.custom-radio:checked + .custom-radio-span {
  font-weight: bold; 
  color: forestgreen; 
}