#container {
    width: 97vh;
}

.modal-content {
   background-image: url("modalBackground.png");
   /* background-size: cover; */
   background-repeat: repeat;
}

.modal-header {
    border-bottom: 0 none;
}



body {
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

p {
  color: white;
}


.canvas {
  display: inline;
  margin: 0;
  top:0;
  left:0;
  padding: 0;
  position:absolute;
}

.maze {
  text-align:center;
  display:none;
  justify-content:space-around
}

.buttonDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button {
  font-size: 40px;
  background-color: Transparent;
  background-repeat:no-repeat;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  width: 500;
  height: 70;
  border-color: green;
  border-radius: 25px;
  /* align-self: center; */
  /* margin: 30; */
}

@-webkit-keyframes rotate {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  25% { transform: rotate(3deg) translate3d(0, 0, 0);}
  50% {transform: rotate(-3deg) translate3d(0, 0, 0);}
  75% {transform: rotate(1deg) translate3d(0, 0, 0);}
  100% { transform: rotate(0deg) translate3d(0, 0, 0);}
}
.button:hover {
  /* background-color: black; */
  /* border-color: gray; */
  cursor: pointer;
  /* color: gray; */
  -webkit-animation: rotate 0.7s ease-in-out both;
  -webkit-animation-delay: 0.06s;
}


.button:focus {
  outline: none;
}