body {
  width: 100vw;
  min-width: 1000px;
  height: 100vh;
  min-height: 800px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

* {
  font-family: monospace;
}

.menu {
  height: 5%;
  width: 100%;
  background-color: rgb(129, 163, 190);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.247);
  z-index: 500;
}
.algo {
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.array {
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
button,
select {
  height: 80%;
}

select {
  height: 60%;
}

select {
  margin-right: 10px !important;
  padding: 0 40px 0 5px !important;
  width: auto !important;
}

.screen {
  background-color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.arrayContainer {
  background-color: rgb(62, 86, 114);

  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: 1%;
  align-items: flex-end;
  overflow: hidden;
}

.bar {
  /* border-top-left-radius: 10px; */
  /* background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  ); */
  /* border-top-right-radius: 10px; */
  /* width: 2%; */
  min-height: 2%;
}

.vgrd {
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.24);
  width: 100%;
  height: 100%;
}

.grd {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  width: 100%;
  height: 100%;
}
label {
  margin-right: 5px;
}

.bb {
  border: solid 1px black;
}
.normal {
  background-color: rgb(110, 110, 110);
  transition: 0.5s;
  border: none;
}

.different {
  background-color: rgb(82, 175, 73);
  box-shadow: 0px 0px 50px rgba(82, 175, 73, 0.1);
}

.select {
  background-color: rgb(199, 199, 199);
  /* border-right: solid 1px rgba(255, 255, 255, 0.301);
  border-top: solid 1px rgba(255, 255, 255, 0.301);
  border-left: solid 1px rgba(255, 255, 255, 0.301); */
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.1);
}

.sorted {
  background-color: rgb(15, 209, 193);
  border: none;
}

.num {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.616);
  width: 100%;
  height: auto;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.footer {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 251, 0);
  width: 100%;
  text-align: center;
  font-weight: 800;
}