style.css

body {
  font-family: "Open Sans", sans-serif;
  background-size: 100%;
  height: 100%;
  background-position: relative;
  background-image: url(https://res.cloudinary.com/gregdusek/image/upload/v1605670764/Hopper%20Fly%20Fishing/FlyFishing_wallpaper_dirvd6.png);
}

.stats-container {
color: white;
float: right;
font-size: 18px;
line-height: 25px;
border: 3px solid black;
border-radius: 5px;
box-shadow: 4px 4px 15px 1px #000000;
background-image: url(https://images-na.ssl-images-amazon.com/images/I/71Jky0tmueL._AC_SL1000_.jpg);
height: 240px;
width: 180px;
text-align: center;
padding: 5px;
}

h1 {
  color: dimgray;
  position: relative;
  text-align: center;
  padding: 0;
  font-family: Copperplate, "Copperplate Gothic Light", fantasy; 
  font-size: 68px; 
  -webkit-text-stroke: 2px white;
  text-shadow: 2px 2px white;
  font-style: bold; 
  font-variant: bold; 
}

h2 {
  color: bisque}
.general-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
#modal-game-rules {
  background-color: steelblue;
  padding: 30px;
  width: 50vw;
  max-width: 500px;
  text-align: center;
  font-family: Copperplate, "Copperplate Gothic Light", fantasy; 
  border-radius: 10px;
  position: fixed;
  top: 45%; 
  transform: translateY(-45%);
  left:0; 
  right:0;
  margin: auto;
  display: none;
}

#modal-game-rules.open {
  display: block;
}

.carousel {
  background-color: steelblue;
  padding: 30px;
  width: 50vw;
  max-width: 500px;
  text-align: center;
  font-family: Copperplate, "Copperplate Gothic Light", fantasy; 
  border-radius: 10px;
  position: fixed;
  top: 45%; 
  transform: translateY(-45%);
  left:0; 
  right:0;
  margin: auto;
  display: none;
}

.carousel.open {
  display: block;
}

.carousel img {
  max-width: 450px;
  max-height: 280px;
}

#modal-play-game {
  background-color: steelblue;
  padding: 30px;
  width: 50vw;
  max-width: 500px;
  text-align: center;
  font-family: Copperplate, "Copperplate Gothic Light", fantasy; 
  border-radius: 10px;
  position: fixed;
  top: 45%; 
  transform: translateY(-45%);
  left:0; 
  right:0;
  margin: auto;
  display: none;
}

#modal-play-game.open {
  display: block;
}

#modal-game-board {
  background-color: steelblue;
  padding: 30px;
  width: 50vw;
  max-width: 500px;
  text-align: center;
  font-family: Copperplate, "Copperplate Gothic Light", fantasy; 
  border-radius: 10px;
  position: fixed;
  top: 45%; 
  transform: translateY(-45%);
  left:0; 
  right:0;
  margin: auto;
  display: none;
}

#modal-game-board.open {
  display: block;
}

/* .bottom-panel {
margin: auto;
display: inline-block;
position: absolute;
bottom: 0px;
left: 0px;
background-color: gray;
width: 100%;
height: 100px;
border: 7px solid black;
border-right: 10px;
border-right-style: solid black;
border-radius: 10px;
} */