*,
*:before,
*:after {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   /* font-size: clamp(16px, min(4vw, 4vh), 32px); */
   font-size: clamp(16px, 4vmin, 64px);
   font-weight: 700;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   scroll-behavior: unset;
}

html {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   height: 100%;
   width: 100%;
   /* position: fixed; */
   /* scroll-behavior: unset; */
   overflow: hidden;
}

body {
   background-color: #333;
   height: 100%;
   /* color: #333; #0123d3; */
}

#container {
   display: grid;
   justify-content: center;
   align-content: center;
   height: 100%;
   overflow: hidden;
   color: #0123d3;
}

@media (orientation: landscape) {
   #container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: calc(100% - 3ex) 3ex;
   }
   #hints-area {
      grid-column: span 2;
   }
}

@media (orientation: portrait) {
   #container {
      grid-template-columns: 1fr;
      grid-template-rows: calc(50% - 2ex) calc(50% - 1ex) 3ex;
   }
   #hints-area {
      grid-column: span 1;
   }
}
/**********************************************/
/**********************************************/

#letters-area {
   grid-column: span 1;
   grid-row: span 1;
   text-align: center;
   overflow: hidden;
   display: grid;
   grid-template-columns: 2fr 20fr;
   grid-template-rows: 2fr 23fr;
   background-color: #a7e0e2;
   padding: 0 0.1rem 0.1rem 0;
}

#tools {
   grid-column: 1 / span 1;
}

#letters-top {
   grid-column: 2 / span 1;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: 1fr;
}

#letters-left {
   grid-column: span 1;
   grid-row: 2 / span 1;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
}
#letters {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);
   /* font-size: clamp(min(3vh, 3vw), min(5vh, 5vw), 64px); */
   font-size: 3ex;
}
/**********************************************/
/**********************************************/

#words-area {
   grid-column: span 1;
   grid-row: span 1;
   text-align: center;
   overflow: hidden;
   display: grid;
   grid-template-columns: 2fr 25fr 2fr;
   background-color: #5f9ea0;
   padding: 0.1rem 0 0.1rem 0;
}

#words-left {
   grid-column: 1 / span 1;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
}

#words-right {
   grid-column: -1 / -2;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
}

#words {
   grid-column: 2 / 3;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);
   /* background-color: #ffffd3; */
}

/**********************************************/
/**********************************************/

#hints-area {
   background-color: #eee7de;
   color: black;
   text-align: center;
   max-width: 100%;
   overflow: hidden;
}

#hints-button {
   width: 100;
   height: 100;
   font-size: 2ex;
   font-weight: 600;
   text-shadow: none;
   overflow: hidden;
}

/**********************************************/
/**********************************************/

.letter-divs {
   padding: 0 0.04rem 0.04rem 0;
}

.word-letter-divs {
   padding: 0.05rem 0 0 0.03rem;
}

button {
   width: 100%;
   height: 100%;
   border: none;
   background-color: rgba(0, 0, 0, 0);
   color: inherit;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

#tools-letter {
   font-size: min(5vw, 5vh);
   color: black;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.letters-letter {
   border: solid 1px #3f547c;
   background-color: #0077d3;
   color: white;
   border-radius: 25%;
}
/**************************************/

.word-letter-divs {
   border-top: solid 2px #94043d;
   border-bottom: solid 2px #94043d;
   border-left: solid 1px #94043d;
   border-right: solid 1px #94043d;
   border-radius: 10%;
   background-color: #ffffd3;
   position: relative;
   overflow: hidden;
}

.word-letter,
.word-letter-hint {
   display: block;
   position: absolute;
   width: 100%;
   left: 0;
}

.word-letter-hint {
   top: 0;
   height: 2ex;
   font-size: 70%;
   font-weight: 700;
   color: #94043d;
   z-index: 10;
}

.word-letter {
   top: 1ex;
   height: calc(100% - 1ex);
   background-color: #00000000;
   font-size: 90%;
   font-weight: 700;
   color: inherit;
}