*,
*:before,
*:after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   scroll-behavior: unset;
   touch-action: manipulation;
   scroll-behavior: unset;
}

body {
   font-size: 24px;
   font-family: "Times New Roman", Times, serif;
   background-color: cadetblue;
   color: black;
   height: 100vh;
   width: 100vw;
   /* color:darkgoldenrod; */
}

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

#canvas1,
#canvas2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 98%;
   max-height: 98%;
   /* background-color: bisque; */
   touch-action: manipulation;
   background-color: bisque;
}
#canvas2 {
   background-color: bisque;
   z-index: -1;
}

.instructions-dialog::backdrop,
#color-chooser::backdrop {
   backdrop-filter: blur(3px);
}

.instructions-dialog {
   flex-direction: column;
   position: relative;
   margin: auto;
   overflow: hidden;
}

#color-chooser {
   margin: auto;
   overflow: hidden;
}
#color-value {
   width: 10vw;
   height: 10vh;
   display: block;
   margin: auto;
}

.instructions-closer-container {
   text-align: right;
   padding: 0.1rem 0.3rem 0.4rem 0;
   margin: 0;
}

.instructions-closer {
   display: block;
   margin: 0 0 0 auto;
   border-radius: 50%;
   width: 35px;
   height: 35px;
   background-color: cadetblue;
   color: white;
   font-size: 25px;
   font-weight: 900;
   box-shadow: 1px 1px 13px rgba(0, 0, 0, 1);
   line-height: 34%;
   text-align: center;
   /* justify-content: center; */
   overflow: hidden;
}

.instructions-content {
   margin: 0;
   padding: 2rem 1rem;
   max-height: 85vh;
   overflow-y: scroll;
}

p {
   margin: auto;
   padding-top: 0.2rem;
}

ul {
   margin: auto;
   padding-left: 3rem;
}

.instructions-dialog h1 {
   text-align: center;
   color: rgb(84, 25, 25);
   padding-bottom: 0.5rem;
   text-shadow: 2px 2px 5px black;
}

.inline-button {
   display: inline-block;
   border: solid 2px black;
   box-shadow: 1p 1p 4px rgba(0, 0, 0, 0.5);
   border-radius: 9999px;
   background-color: blanchedalmond;
   color: black;
   padding: 0.1rem 0.2rem;
   font-size: 70%;
   font-weight: 900;
}

/* #tweety-rate {
   display: block;
   width: 50%;
   margin: auto;
   margin-top: 150px;
} */

#controls-container {
   position: absolute;
   top: 10vh;
   left: 0;
   width: 100vw;
   text-align: center;
   z-index: 10;
}

.hidden {
   display: none;
}