#container {
    width: 97vh;
}

body {
  background-image: url("background2.png");
}

p {
  color: white;
}


.canvas {
  text-align: center;
  width: 97vh;
  height: 97vh;
  align-self: center;
  display: inline;
}

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

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

.button {
  border-width: 1;

  border-color: black;
  /* align-items: center; */
  /* justify-content: center; */
  width: 200;
  height: 50;
  background-color: white;
  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: white;
  cursor: pointer;
  color: white;
  -webkit-animation: rotate 0.7s ease-in-out both;
  -webkit-animation-delay: 0.06s;
}


.button:focus {
  outline: none;
}