*:before,
*:after,
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   /* user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: default; */
}

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

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

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

#message1 {
   position: absolute;
   bottom: 0;
   left: 0px;
   text-align: center;
   background-color: rgba(0, 0, 0, 1);
   color: white;
   font-size: 1.5rem;
}

body {
   position: fixed;
   width: 100%;
   height: 100%;
   overflow: hidden;
   scroll-behavior: unset;
   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: 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: 10%;
   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);
}

#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); */
   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;
}