body {

  background-color: #CCCCFF;
  display: flex;
  flex-direction: column;
  font-family: 'courier new';
}

h1 {
  align-self: center;
  color: #191970;
  letter-spacing: 3px;
}

.foot {
  position: relative;
}

.foot-list {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
}
.foot-list h4 {
  margin: 0;
  color: #191970;
  padding-top: 5px;
}

[class*="fa-"] {
  font-size: 24px;
  color: #191970;
}

.foot-list li {
  padding-right: 30px;
}

.shuffle-button {
  position: absolute;
  left: 390px;
  bottom: 50px;

}

.everything {
  position: absolute;
  left: 400px;
  bottom: 50px;
}

/* .merge-buttons, .selection-buttons, .bubble-buttons, .insertion-buttons, .merge-buttons, .quick-button {
  display: flex;
  width: 87%;
  justify-content: space-between;
  z-index: 5;
} */



#merge, #shuffle, #selection, #bubble,
#quick, #start-all, #insert, #slow-bubble,
#slow-insert, #slow-select, #fast-merge {
  font-family: 'courier new';
  font-weight: bold;
  color: #191970;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;

  /* padding-right: 5px; */
  border-radius: 5px;
}

#merge:hover, #shuffle:hover, #selection:hover, #bubble:hover, #quick:hover, #start-all:hover, #insert:hover {
  background-color: #191970;
  color: #CCCCFF;
}

#merge:focus, #shuffle:focus, #selection:focus, #bubble:focus, #quick:focus, #start-all:focus, #insert:focus {
  outline: none;
}

.canvas-div {
  position: relative;
  height: 600px;
  width: 600px;
  align-self: center;
}

#window-canvas {
  position: absolute;
  top: 25px;
  left: 40px;
  z-index: 3;

}

.quick-button {
  position: absolute;
  top: 0px;
  left: 40px;

}

#merge-canvas {
  position: absolute;
  top: 130px;
  left: 40px;
  z-index: 3;
}

.merge-buttons {
  position: absolute;
  top: 105px;
  left: 100px;
}

#selection-canvas {
  position: absolute;
  top: 235px;
  left: 40px;
  z-index: 3;
}

.selection-buttons {
  position: absolute;
  top: 210px;
  left: 160px;
}

#bubble-canvas {
  position: absolute;
  top: 340px;
  left: 40px;
  z-index: 3;
}

.bubble-buttons {
  position: absolute;
  top: 315px;
  left: 240px;
}

#insertion-canvas {
  position: absolute;
  top: 445px;
  left: 40px;
  z-index: 3;
}

.insertion-buttons {
  position: absolute;
  top: 420px;
  left: 300px;
}

#background-canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;

}