canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
  height: 70vh;

 }
 h1{
   text-align: center;
   font-size: 7vh;
   margin-bottom: 0;
   font-family: 'Monoton';
 }
 div {
   vertical-align: top;
 }
 .game-board {
   display: flex;
   justify-content: space-around;
   background-image: url('https://res.cloudinary.com/dgxmjwbrc/image/upload/v1523909589/wood-1043207_1280.jpg');
   background-size: cover;
 }
 .side-section {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .side-section button {
  font-size: 30px;
  margin: 50px 0 50px 0;
  border-radius: 10px;
  padding: 10px;
  min-width: 200px;
 }

 .side-section button:hover {
   color: white;
   background-color: blue;
 }
.active {
  color: white;
  background-color: blue;
}
 .ball {
   height: 5%;
   width: 5%;
   /* border: 1px solid red; */
  background-size: cover;
  background-position: center;
   background-image: url('https://res.cloudinary.com/dgxmjwbrc/image/upload/v1523915701/wood-1043207_1280_copy.jpg');
   display: inline-block;
 }
 .board {
   /* border: 1px solid grey; */
   width: 600px;
   height: 600px;
   position: relative;
 }
 .game {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .hole {
   height: 5%;
   width: 5%;
   background-size: contain;
   background-image: url('https://res.cloudinary.com/dgxmjwbrc/image/upload/v1523914889/Sirex_noctilio_hole_cropped.jpg');
   display: inline-block;
 }
 .path {
   height: 5%;
   width: 5%;
   background-size: cover;
   display: inline-block;
 }
 .wall {
   height: 5%;
   width: 5%;
   background-size: cover;
   background-image: url('https://res.cloudinary.com/dgxmjwbrc/image/upload/v1523909588/download.jpg');
   display: inline-block;
 }
 .goal {
   height: 5%;
   width: 5%;
   background-size: cover;
   background-position: center;
   background-image: url('https://res.cloudinary.com/dgxmjwbrc/image/upload/v1524067906/coin.jpg');
   display: inline-block;
 }
 .modal {
   display: none;
   align-items: center;
   justify-content: center;
   height: 250%;
   width: 100%;
   top: -5px;
   background-color: rgba(0,0,0,0.5);
   order: 10;
   position: relative;
 }
.user-profile i{
  font-size: 50px;
}
.pause-window {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600px;
  order: 9;
}
.rule-window {
  display: none;
  position: absolute;
}
.pause-window h2 {
  padding: 150px;
  font-size: 56px;
  color: white;
  text-align: center;
}