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

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
   --border-radius: 999px;
   --body-back-color: cadetblue;
   --header-font-zise: max(1.2rem, 5vw);
}

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

/* ***************************************************************************************** */
/* ***************************************************************************************** */
/* ***************************************************************************************** */
.unselectable {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: default;
}
.hidden {
   /* it is important this comes last so as to take precedence over all  */
   display: none !important;
}
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

.blur {
   filter: blur(2px);
}

#main {
   position: fixed;
   top: 0;
   left: 0;
   height: var(--document-height);
   /* height: 100vh; */
   width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 0 0 0;
   overflow: hidden;
   column-gap: 0.2rem;
}

.shielder {
   width: 100%;
   height: 100%;
   background-color: rgba(25, 25, 25, 0.6);
   position: fixed;
   top: 0px;
   left: 0px;
   overflow: hidden;
   text-align: center;
   align-content: center;
   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: 20px;
   /* padding: 1rem; */
   padding: 5px 40px 5px 5px;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

#dialog-close {
   position: absolute;
   top: 4px;
   right: 2px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: none;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   text-shadow: 2px 2px 2px black;
   font-size: 20px;
   padding-top: 3px;
   color: white;
   background-color: rgb(10, 97, 97);
   cursor: pointer;
}

.dialogBox-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
}

#menu-dialogBox {
   min-width: clamp(250px, 350px, 90%);
}

.dialogBoxButton {
   /* flex-basis: fit-content; */
   display: block; /*inline-block;*/
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 0.01rem auto 0.2rem auto;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   font-size: calc(min(100vh, 100vw) / 28);
   /* flex-grow: 1;
   flex-shrink: 1;
   flex-basis: content; */
   flex: 1/1 / max-content;
}

.dialogBoxButton:hover,
#downloading:hover,
#load-game-file-label:hover {
   filter: var(--button-select);
}

.instructions,
.instructions2,
.instructions3 {
   font-size: max(3vw, 16px);
   font-weight: 800;
   text-align: center;
   margin: auto;
   /* width: calc(100% - 60px); */
   /* width: 85%; */
}

.instructions2 {
   font-size: max(2vw, 16px);
}
.instructions3 {
   font-size: max(4vw, 16px);
}
/* ======================================================================================================================================= */
/* ======================================================================================================================================= */
/* ======================================================================================================================================= */
#setup-button {
   position: absolute;
   top: 4px;
   left: 2px;
   width: max(32px, 4vw);
   height: max(32px, 4vw);
   overflow: hidden;
   background-image: url("../images/ToolsIcon.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   cursor: pointer;
}
/* ======================================================================================================================================= */
/* ======================================================================================================================================= */
.animation-menu {
   position: absolute;
   display: flex;
   flex-flow: column;
   top: 4px;
   right: 2px;
   /* cursor: pointer; */
}
.animation-menu-button {
   padding: 0.2rem 1rem;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   font-size: calc(min(100vh, 100vw) / 28);
   cursor: pointer;
}

.animation-menu-button:hover {
   filter: var(--button-select);
}