body{
  background-color: black;
  max-width: 100%;
  max-height: 100%;
  justify-content: center;
  align-items: center;
  color: white;
}


.bullet {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: red;
  left: 0;
  top: 0;
}
h2 {
  height: auto;
  margin: 0vh 0vw 0vh 0vw;
  font-family: cursive;
  font-size: 3vw;
  color: white;
}
.btn{
  text-align: center;
  color: #f8e76e;
  font-weight: bold;
  background: none;
  border-radius: 1px;
  padding: 3px 15px;
  letter-spacing: 0.2em;
  transition: background-color 0.8s, box-shadow 0.2s, color 0.8s;
  font-style: revert;
  font-family: cursive;
  height: 5vh;
  width: 15vw;
  font-size: 1.4vw;
  letter-spacing: 2px
}
.btn:hover{
  display: inline-block;
  transform: scale(1.3);
}


#Menu-container{
  /*margin: 0px;*/
  /*background-color: white;*/
  background-color: black;
  height: 5vh;
  padding-top: 0px;
  justify-content: space-between;
  /*display: block;*/
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  color: whitesmoke;
  font-style: italic;
}

#Menu-container > #menu{
  /* margin: 0vw 20vw 0vw 20vw; */
  /*padding-top: 10px;*/
  /*background-color: white;*/
  background-color: black;
  padding-top: 0px;
  height: 0px;
  display: block;
  /*line-height: 60px;*/
  /*font-size: 10em;*/
  /*font-weight: 700;*/
  text-align: center;
}

#Menu-container > #menu > li{
  height: 0px;
  display: inline-block;
  /* display: inline-block; */
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding-top: 0px;
  margin: 0 1vw 0 1vw;
}

.close{
  color: white;
  float: right;
  font-size: 3vw;
  font-weight: bold;
  padding-right: 2vw;
}

.close:hover, .close:focus{
  cursor: pointer;
  transform: scale(1.3);
}

.inputRequest{
  font-size: 1.2vw;
  display: block;
  border:none;
  border-bottom: 2px solid rgb(255, 255, 255);
  background-color: inherit;
  outline: none;
  color: white;
  font-family: 'Dancing Script', cursive;
  height: 5vh;
  width: 25vw;
  padding-top: 4vh;
}

.inputRequest::placeholder{
  color:antiquewhite;
}


.modal{
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  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 {
  background-color: black;
  margin: auto;
  padding: 20px;
  border: 1px solid white;
  width: 70%;
}

#about > .modal-content > #about-header > h1{
  height: auto;
  margin: 0vh 0vw 0vh 0vw;
  font-family: 'Dancing Script', cursive;
  font-size: 3vw;
  padding-top: 1vh;
  padding-left: 2vw;
  padding-bottom: 1vh;
  color: #f8e76e;
  font-style: italic;
}

#about > .modal-content > div > h2{
  padding-left: 2vw;
  font-size: 2vw;
}

#about > .modal-content > div > ul > li > h2{
  padding-left: 2vw;
  font-size: 2vw;
}

#about > .modal-content > div > h3{
  height: auto;
  margin: 0vh 0vw 0vh 0vw;
  font-family: 'Dancing Script', cursive;
  font-size: 1.5vw;
  padding-top: 2vh;
  padding-left: 2vw;
  color: white;
}

#about > .modal-content > div > ul > li > h3{
  height: auto;
  margin: 0vh 0vw 0vh 0vw;
  font-family: 'Dancing Script', cursive;
  font-size: 1.5vw;
  padding-top: 1vh;
  padding-left: 2vw;
  color: white;
}

#about > .modal-content > div > ol > li > p{
  height: auto;
  margin: 0vh 0vw 0vh 0vw;
  font-family: cursive;
  font-size: 1.2vw;
  padding-left: 1vw;
  color: white;
}

#about > .modal-content > div > ol{
  margin: 0;
  padding-top: 1vh;
}

#about > .modal-content > div > ol > li{
  font-family: 'Dancing Script', cursive;
  font-size: 1.2vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-between;
  justify-content: flex-start;
  align-items: baseline;
}


#player-history-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}
#player-history-section > #player-name{
  margin-top: 50px;
}
#player-history-section > #myTable {
  text-align: center;
  width: 30%;
  height: 50px;
  margin-top: 30px;
  table-layout: fixed;
}
/*history table size */
.header-row {
  height: 50px; 
}

#play-section{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: cursive ;
}
#play-section> #game-canvas {
  background-image:url(/media/canvas_backround.png);
  background-color: black;
  width: 800px;
  height: 600px;
  border: 1px solid black;
  margin-top: 50px;
}

.wrapper {
  min-height: 100%;
  padding-bottom: 10vw;
  box-sizing: border-box;
} 

footer {
  height: 6vw; 
  position: relative;
  /* set the footer to the bottom of the page */
  bottom: 100;
  width: 100%;
}