* {
   font-family: Arial, Helvetica, sans-serif;
   padding: 0px;
   margin: 0px;
}

html {
   height: 100%;
}

body {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-content: center;
   align-items: center;
   height: 100%;
}

.confetti{
   display: block;
   margin: 0 auto;
   user-select: none;
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -1;
}

div#timeDisplay {
   font-size: 1.5em;
   z-index: 1;
   cursor: pointer;
}

/* --------------------------- Table Crossword puzzle --------------------------- */

table#crossword {
   border-collapse: collapse;
   text-anchor: middle;
   font-family: arial,sans-serif;
   display: initial;
}

th, td {
   text-align: center;
   vertical-align:bottom;
   position: relative;

   /* needed for background color to not overwrite borders*/
   background-clip: padding-box;

   /* make curser look like you can click on it */
   cursor: pointer;

}

/* Prevent selecting a letter when double clicking */
td > span {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

td > span:first-child {
   left: 5%;
   top: 0px;
   font-size: 0.4em;
   position: absolute;
   display: table;
}


/* --------------------------- Overlay --------------------------- */
div#overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.7);
   display: flex;
   justify-content: center;
   align-items: center;
}

div#overlayMessage {
   border-radius: 10px;
   border: 2px solid black;
   background-color: white;

   display: flex;
   flex-direction: column;
   align-items: center;

   padding: 7px 15px;
}

div#overlayExit {
   text-align: right;
   font-size: 30px;
   width: fit-content;
   align-self: flex-end;
   cursor: pointer;
}


/* --------------------------- Keyboard (only visible on mobile) --------------------------- */
.keyboard {
   width: 100%;
}

.keyboardRow {
   text-align:center;
   display: flex;
   justify-content: center;
}

.key {
   background-color: lightgrey;
   cursor: pointer;
   border-radius: 20%;
   /* Make size adaptive */
   width: 9%;
   aspect-ratio: 1;
   margin: 0.4%;
   font-size: 1.5em;
   /* Center letters */
   display: flex;
   align-items: center;
   justify-content: center;
   /* Disable selecting text */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}


/* --------------------------- Clue display --------------------------- */

div#clue {
   width: 80%;
   text-align: center;
   font-size: 1.2em;
}

.clueController {
   width: 100%;
   background-color: #a7d8ff;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

#leftClue, #rightClue {
   font-size: 3em;
   cursor: pointer;
   /* Disable selecting text */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}



/* Put responsive last to overwrite previously defined properties if any */

/* Mobile */
@media (max-width: 500px) {
   th, td {
      height: 1.5em;
      width: 1.5em;
      border: 3px solid grey;
      font-size: 1.5em;
   }

}

/* PC */
@media (min-width: 500px) {
   .key {
      display: none;
   }

   #leftClue, #rightClue {
      display: none;
   }

   .clueController {
      font-size: 2em;
   }

   th, td {
      height: 50px;
      width: 50px;
      border: 3px solid grey;
      font-size: 2.5em;
   }

}