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

html {
   width: 100%;
   height: 100%;
   position: fixed;
}

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

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
}

body {
   position: fixed;
   width: 100%;
   height: 100%;
   overflow: hidden;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   scroll-behavior: unset;
   background-color: #ffcab7;
}

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

.blur {
   filter: blur(3px);
}
.shielder {
   width: 100vw;
   height: 100vh;
   background-color: rgba(25, 25, 25, 0.1);
   position: absolute;
   top: 0px;
   left: 0px;
   overflow: hidden;
   text-align: center;
   align-content: center;
   visibility: hidden;
   z-index: 100;
}

.dialogBox {
   position: absolute;
   background-color: rgb(252, 247, 247, 0.8);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   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);
}

#dialogBox1,
#dialogBox2 {
   visibility: hidden;
}

.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); */
   filter: var(--button-select);
}

#playerName,
#madeItMsg {
   visibility: hidden;
}

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

#buttons {
   background-color: rgba(0, 0, 0, 1);
   padding: 0.2rem;
   position: absolute;
   top: 0;
   left: 0;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}
.buttons {
   border-radius: 4px;
   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;
}

@media (max-width: 370px) {
   #buttons {
      background-color: rgba(0, 0, 0, 0.3);
   }
}