*,
*:before,
*:after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

*:focus {
   outline: none;
   filter: var(--button-select);
}

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
   --button-select2: drop-shadow(0px 0px 0.2em white) brightness(80%);
   /* --button-select3: drop-shadow(0px 0px 3em hsl(0 50% 25%)) brightness(80%); */
   --button-select3: drop-shadow(0px 0px 0.8em hsl(0, 79%, 35%)) brightness(80%);
}

html {
   width: 100%;
   height: 100%;
   position: fixed;
   scroll-behavior: unset;
   overflow: hidden;
}

body {
   font-size: 24px;
   font-family: "Times New Roman", Times, serif;
   /* background-color: cadetblue; */
   /* background-color: hsl(182, 25%, 50%); */
   /* background-color: #5f9ea0; */

   /* background-color: #354345; */
   background-color: hsl(188, 10%, 28%);
   color: black;
   height: 100%;
   width: 100%;
   /* user-select: none; */
   position: fixed;
   overflow: hidden;
   scroll-behavior: unset;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   scroll-behavior: unset;
}
#game-container {
   width: 100%;
   /* height: 90vh; */
}
#icons-container {
   position: fixed;
   top: 0;
   left: min(0.4rem, 2vw);
}

.icon-image {
   display: block;
   width: min(40px, 5vw);
   height: min(40px, 5vw);
   /* width: 20px;
   height: 20px; */
   margin: 0.6rem 0;
}
.icon-image:hover {
   filter: invert();
}

#instructions {
   width: min(85vw, 500px);
}

#letters-grid {
   font-size: min(2.5rem, 7vh);
   font-weight: 900;
   width: min(80vw, 500px);
   background-color: black;
   height: 70%; /*70vh;*/
   margin: auto;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(6, 1fr);
   text-align: center;
}

.letter {
   display: grid;
   align-items: center;
   border: solid 2px gray;
   margin: 3px;
   color: #aaa;
   transition: transform 250ms linear;
}

.letter-inPlay {
   background-color: hsl(0, 0%, 13%);
}

#keyboard-grid {
   width: 95vw;
   background-color: black;
   height: 30%; /*vh;*/
   margin: auto;
   display: grid;
   grid-template-rows: auto;
   text-align: center;
}

.keys-row {
   background-color: black;
   display: flex;
   justify-content: center;
}

.key {
   background-color: rgb(33, 28, 28);
   color: #aaa;
   display: grid;
   align-items: center;
   border-radius: 9999px; /*20%;*/
   margin: 1px;
   /* padding: 7px; */
   width: calc(100vw / 17);
}
.key:hover {
   /* background-color: #222;
   color: white; */
   filter: var(--button-select2);
   /* transform: scale(0.9);
   border: solid 2px white; */
}

#Back,
#Enter,
#Del {
   width: calc(100vw / 5);
}

/*---------------------------------------------------------
the order of the next three classes properties is important 
so as keep the precedence order where green take priority 
over yellow and yellow over grey
-----------------------------------------------------------*/
.wrongLetter {
   background-color: rgb(103, 102, 102);
   color: black;
}
.correctLetter-WrongPosition {
   background-color: hsl(60, 40%, 50%);
   color: black;
}
.correctLetter-CorrectPosition {
   background-color: hsl(120, 50%, 25%);
   color: black;
}
/*the above must be in the above order */
/*-------------------------------------*/

.shake {
   animation: shake 250ms ease-in-out;
}

.dance {
   animation: dance 500ms ease-in-out;
}

.flip {
   transform: rotateX(90deg);
}

@keyframes shake {
   10% {
      transform: translateX(-5%);
   }

   30% {
      transform: translateX(5%);
   }

   50% {
      transform: translateX(-7.5%);
   }

   70% {
      transform: translateX(7.5%);
   }

   90% {
      transform: translateX(-5%);
   }

   100% {
      transform: translateX(0);
   }
}

@keyframes dance {
   20% {
      transform: translateY(-50%);
   }

   40% {
      transform: translateY(5%);
   }

   60% {
      transform: translateY(-25%);
   }

   80% {
      transform: translateY(2.5%);
   }

   90% {
      transform: translateY(-5%);
   }

   100% {
      transform: translateY(0);
   }
}

/* ------------------------------------------ */
.unselectable {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: default;
}

.blur {
   filter: blur(2px);
}
.shielder {
   width: 100%;
   height: 100%;
   background-color: rgba(25, 25, 25, 0.1);
   position: fixed;
   top: 0px;
   left: 0px;
   /* overflow: hidden; */
   text-align: center;
   align-content: center;
   visibility: hidden;
   z-index: 100;
   scroll-behavior: unset;
}

.dialogBox {
   position: absolute;
   background-color: rgb(252, 247, 247, 0.8);
   top: 5%;
   left: 50%;
   transform: translate(-50%, 0);
   border: solid 2px rgba(0, 0, 0, 0.5);
   border-radius: 50px;
   padding: 1rem;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

#dialogBox,
#dialogBox1,
#dialogBox2 {
   visibility: hidden;
   min-width: clamp(250px, 350px, 90%);
}

.hidden {
   display: none;
}

.dialogBoxButton {
   display: inline-block;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 1rem auto auto auto;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: 15px;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.dialogBoxButton:hover {
   /* transform: scale(0.9); */
   /* box-shadow: 0 0 0 10% #00000066; */
   filter: var(--button-select);
}

#playerName,
#madeItMsg,
.hidden {
   visibility: hidden;
}

#skipIt {
   display: none;
}
/*-----------------------*/

#buttons {
   background-color: rgba(0, 0, 0, 0);
   padding: 0.2rem;
   position: absolute;
   top: 0;
   left: 0;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}
.buttons {
   /*font-size: clamp(1rem, 3vw, 2rem);*/
   font-size: 1rem;
   font-weight: 700;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   border-radius: 15px;
   padding: 0.4rem;
   background-color: burlywood;
   color: brown;
   box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8);
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.buttons:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

canvas {
   background-color: rgb(134, 160, 186); /*rgb(184, 210, 236);*/
   border: 1px solid black;
   z-index: 9;
}

#openning,
#starter {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 100;
   padding: 10px 0 300px 0;
   background-color: rgba(125, 125, 125, 0.5);
   display: grid;
   /* place-items:center;
	justify-content:center;
	align-content:center; */
   scroll-behavior: unset;
   overflow: hidden;
}

#openning-content {
   min-width: clamp(250px, 350px, 90%);
   height: 0px;
   width: 0px;
   padding: 1rem;
   margin: 0 auto;
   background-color: rgba(255, 255, 255, 0.7);
   position: relative;
   overflow: hidden;
   opacity: 0;
   animation-name: openning;
   animation-duration: 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

#starter-content {
   padding: 1rem;
   margin: 0 auto;
   background-color: rgba(255, 255, 255, 0.7);
   position: relative;
   overflow: hidden;
   min-width: clamp(250px, 350px, 90%);
   width: clamp(250px, 350px, 90%);
   height: max-content;
}

#splasherButton {
   pointer-events: all;
   display: inline-block;
   color: steelblue;
   background-color: rgb(203, 198, 221);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 0.3rem auto;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: 15px;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#splasherButton:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

@keyframes openning {
   0% {
      width: 0;
      height: 0;
   }
   10% {
      width: 100px;
      height: 100px;
      opacity: 1;
      transform: rotate(90deg);
   }
   25% {
      width: 200px;
      height: 200px;
      opacity: 1;
      transform: rotate(180deg);
   }
   50% {
      width: 100px;
      height: 100px;
      opacity: 1;
      transform: rotate(360deg);
   }
   100% {
      width: clamp(250px, 350px, 90%);
      height: max-content;
      opacity: 1;
      transform: rotate(720deg);
   }
}

.check-Box {
   width: 20px;
   height: 20px;
}

/* ============================================== */
.instructions-container {
   background-color: black;
   color: #ddd;
   width: 95%;
   margin: auto;
   padding: 0 0.2rem;
}
.instructions-h1 {
   text-align: center;
   margin-bottom: 0.1rem;
   font-size: 1.3rem;
}
.instructions-h2 {
   text-align: left;
   margin-bottom: 0;
   margin-top: 0.5rem;
   font-size: 1.1rem;
}
#example-colors {
   margin-bottom: 0;
   display: block;
   width: min(200px, 100%);
}
.instructions-ul {
   margin-top: 0;
   font-size: 0.8rem;
   list-style-type: disc;
   list-style-position: outside;
}
.instructions-li {
   display: list-item;
}

.instructions-p {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 0.8rem;
}
.instructions-dialogBox {
   scroll-behavior: smooth;
   position: absolute;
   background-color: rgb(252, 247, 247, 0.8);
   top: 2%;
   left: 50%;
   transform: translate(-50%, 0);
   border: solid 2px rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   padding: 0.3rem;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
   visibility: hidden;
   text-align: left;
   /*min-width: clamp(250px, 350px, 90%); */
   width: 90%;
   /* height: min(90%, max-content); */
   overflow: auto;
}
/* ================================================================ */
.stats-dialogBox {
   scroll-behavior: smooth;
   position: absolute;
   background-color: rgb(252, 247, 247, 0.8);
   top: 2%;
   left: 50%;
   transform: translate(-50%, 0);
   border: solid 2px rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   padding: 0.3rem;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
   visibility: hidden;
   text-align: left;
   /*min-width: clamp(250px, 350px, 90%); */
   width: 90%;
   /* height: min(90%, max-content); */
   overflow: auto;
}

.graph {
   display: inline-block;
   text-align: right;
   padding: 0.2rem;
   background-color: green;
   color: #ddd;
}
.rank {
   display: inline-block;
   width: 1.5rem;
}
.bar-graph {
   width: 100%;
   margin-bottom: 0.1rem;
}

.stats-data {
   text-align: center;
   font-size: max(0.8rem, 2vw);
   /* white-space: nowrap; */
}
.data-text {
   display: inline-block;
   margin-right: 1.5rem;
   margin-left: 0.5rem;
   color: rgb(176, 176, 240);
   font-size: max(1rem, 3vw);
   /* white-space: nowrap; */
}
.data-together {
   display: inline-block;
}
/* ========================================================================== */

.popup-message {
   visibility: hidden;
   position: absolute;
   /* background-color: rgb(252, 247, 247, 0.8); */
   /* background-color: hsla(0, 45%, 98%, 0.8); */
   background-color: hsla(324, 6%, 84%, 0.8);
   /* background-color: hsla(0, 5%, 70%, 0.8); */
   /* top: 10%; */
   /* left: 50%; */
   /* transform: translate(-50%, 0); */
   /* border: solid 2px rgba(0, 0, 0, 0.5); */
   border-radius: 9999px;
   padding: 0.2rem 0.5rem;
   z-index: 101;
   /* box-shadow: 2px 2px 3px rgb(129, 6, 6); */
   filter: var(--button-select3);
   font-size: 0.5rem;
   text-align: center;
}

.message-shake {
   animation: message-shake 1000ms ease-in-out;
}

@keyframes message-shake {
   10% {
      transform: translateX(-5%);
   }

   30% {
      transform: translateX(5%);
   }

   50% {
      transform: translateX(-7.5%);
   }

   70% {
      transform: translateX(7.5%);
   }

   90% {
      transform: translateX(-5%);
   }

   100% {
      transform: translateX(0);
   }
}