* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
  background-color: rgb(223, 241, 168);
}
.move-img {
  /* display: inline-block; */
  width: 100%;
  height: 80%;
}
.algorithm-container {
  display: flex;
  border: 2px solid red;
  padding: 8px;
  margin-bottom: 4px;
}
.move-container {
  width: 5.55%;
  text-align: center;
  /* margin: 4px; */
}
.main-container {
  border: 2px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 420px;
}
.stats-container {
  width: 50%;
  height: 100%;
  border: 2px solid red;
  text-align: center;
}
.stats-headings {
  display: flex;
}
.statistics {
  border: 2px solid red;
  height: 300px;
  overflow: auto;
}
.stats-heading {
  width: 25%;
}
.solve-details {
  display: flex;
}
.solve {
  width: 25%;
  font-size: 1.2rem;
}
.btn {
  margin-top: 10px;
}
.reset-btn {
  font-size: 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  background-color: black;
  color: white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 2px;
}
.reset-btn:hover {
  background-color: rgb(243, 27, 27);
  border: 2px solid red;
}
.timing-container {
  display: flex;
  width: 50%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.time {
  border: 2px solid red;
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
}
.average-container {
  display: flex;
  height: 40%;
  width: 100%;
  border: 2px solid red;
}
.avg {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 2px solid red;
  width: 25%;
  height: 100%;
}
.avg-num {
  font-size: 2rem;
}