@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
html{
   max-height: 100%;
   width: 100%;
   font-family: "Jersey 10", serif;
   letter-spacing: .2rem;
}

.game{
   height: 100%;
   background-color: #86A59C;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
main{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
#container{
   height: 40vh;
   width: 50vw;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   background-color: #e1e0e0;
   background-image: url("src/bg1.jpg");
   background-position: bottom;
   background-size: 100%;
   border-radius: 2vw;
   position: relative; /* position items relative within the container*/
   padding-bottom: 1vh;
}
h1{
   color: #e1e0e0;
   font-weight: 300;
   text-align: center;
   font-size: 4vw;
}
h2{
   color: #e1e0e0;
   font-weight: 300;
   text-align: center;
   font-size: 3vw;
}
#sound{
   width: 4vw;
   height: 8vh;
   filter: invert(40%) sepia(18%) saturate(1449%) hue-rotate(225deg) brightness(93%) contrast(87%);
}
#capybara{
   position: absolute;
   z-index: 2;
}
.buttons{
   display: flex;
   flex-direction: row;
   padding-top: 0;
}
.button{
   padding: 0 5vw 0 5vw;
}
#bg{
   max-height: 4.5vw;
   margin-top: 0;
   filter: invert(40%) sepia(18%) saturate(1449%) hue-rotate(225deg) brightness(93%) contrast(87%);
}

#myBtn{
   width: 4vw;
   height: 8vh;
   filter: invert(40%) sepia(18%) saturate(1449%) hue-rotate(225deg) brightness(93%) contrast(87%);
}
/* The Modal (background) */
.modal {
   display: none;
   position: fixed;
   z-index: 20;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
}

/* Modal Content/Box */
.modal-content {
   background-color: #e1e0e0;
   margin: 10% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 50%; /* Could be more or less, depending on screen size */
   color: #7D5BA6;
   font-size: 2vw;
   font-weight: 200;
   border-radius: 2vw;
}

/* The Close Button */
.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

.close:hover,
.close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
}

#hats{
   position: absolute;
   display: flex;
   flex-direction: column;
   padding: 0.5vw;
   background-color: tan;
   width: 5%;
   height: 35vh;
   border-radius: 2vw;

}
#hats ul{
   height: 100%;
   list-style: none;
   margin-right: 0;
   padding: 0;
   line-height: 2vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
#hats li{
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 4vh 0;
}
#list2 {
   position: absolute;
   top: 0;
   right: 0;
   margin-left: 4vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.hat{
   padding: 0;
   cursor: pointer;
   position: absolute;
   width: 3vw;
   z-index: 5;
}
#frog, #chef, #lettuce, #top{
   width: 4vw;
}

#wig{
   z-index: 4;
}
#chef{
   z-index: 1;
}

#poo{
   position: relative;
   height:20%;
   width: 100%;
   top:2vw;
   z-index: 1;
}