.menu-button {
   position: fixed;
   top: 0;
   left: 0;
   height: 40px;
   width: 40px;
   margin: 10px;
   border-radius: 5px;
   background-color: #D8D3AD;
   z-index: 3;

   border: 0;
   border-radius: 10px;

   transition: background-color 300ms;
}

.menu-button:hover {
   background-color: #5A594E;
}

.menu-container {
   z-index: 2;

   position: fixed;
   top: 0;
   left: -200px;
   width: 200px;
   height: 100vh;
   background-color: #EFEFE6;

   transition: transform 500ms ease-in-out
}

.menu-show {
   transform: translate(200px, 0);
}

a {
   text-decoration: none;
   color: inherit;
}

.menu-option {

   text-align: left;
   padding: 10px;
   padding-left: 10px;
   background-color: #EFEFE6;
   width: 100%;
   height: fit-content;
   transition: background-color 300ms;

   font: inherit;
   border-radius: 0;
   margin: 0;
   border: 0;
}

.menu-option.unclickable:hover {
   background-color: #EFEFE6;
   cursor: default;
}

.menu-option:hover {
   background-color: #D8D3AD;
   cursor: pointer;
}

.menu-option>p {
   font-weight: inherit;
}

.menu-options>p {
   padding-left: 10px;

   /* border-top: solid 5px #D8D3AD; */
}

.menu-options {
   font-weight: 600;
   padding-top: 60px;


}

#game-menu{
   max-height: 60vh;
   overflow-y: scroll;
   overflow-x:hidden
}

#game-menu>.menu-option {
   padding-left: 30px;
}

hr {
   display: block;
   background-color: #D8D3AD;
   width: 90%;
   height: 3px;
   border: none;
   border-radius: 4px;
}