style.css

* {
  font-family: 'Lato', sans-serif;
}


body {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  /* background: rgb(230, 230, 230); */
  background: rgb(31, 31, 31);
  /* background:rgb(229, 229, 249) */
}


.sorting-visualizer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color:rgb(169, 168, 168);
  padding: 10px;
   /* background: rgb(58, 61, 87); */
  background-color: #25274d;
  font-weight: 500;
}

.buttons {
  display: flex;
  justify-content: space-evenly;
  /* background-color: rgb(96, 96, 96); */
  /* background-color: lightslategray; */
  padding: 15px;
}

.createColumnsButton,
.quickSortButton,
.selectionSortButton,
.insertionSortButton,
.heapSortButton,
.bubbleSortButton,
.number-of-columns-slider,
.slowButton,
.mediumButton,
.fastButton,
.sortButton {
  cursor: pointer;
  font-size: 20px;
  background:#979797;
  border: 0px;
  border-radius: 5px;
  font-weight: 600;
  color: rgb(21, 21, 21);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.sortButton {
    background: darkgoldenrod;
}

.number-of-columns-slider {
  padding-left: 13px;
  padding-right: 13px;
}

.createColumnsButton {
  background: rgb(109, 102, 147);
}


.createColumnsButton:hover,
.quickSortButton:hover,
.selectionSortButton:hover,
.insertionSortButton:hover,
.heapSortButton:hover,
.bubbleSortButton:hover,
.slowButton:hover,
.mediumButton:hover,
.fastButton:hover,
.sortButton:hover {
  filter: brightness(35%) !important;
  -webkit-transition: all .3s ease;
}

.createColumns {
    display: grid;
    justify-content: center;
    align-items: flex-end;
    margin: auto;
    margin-top: 20px;
    /* repeat(number of columns, the column width we want) */
    /* See: https://css-tricks.com/introduction-fr-css-unit/ */
    /* Also see: https://www.youtube.com/watch?v=N731aTpo8TI&ab_channel=RachelAndrew */
    grid-template-columns: repeat(var(--numCols), 1fr);
    /* repeat(number of rows, the column width we want) */
    /* grid-template-rows: repeat(var(--numRows), 1fr); */
    width: 150vh;
    height: 75vh;
    gap: 3px;
    border-bottom: rgb(53, 53, 53) solid 4px;
  }


/* In the DOM */
  .column {
    display:flex;
    padding: 1px;
    border: 0;
    border-color: white;
    border: 0.01px solid rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
  }

  @keyframes doneSorting {
    50% {
      transform: scale(1.05);
      background-color: #439f76;
    }
  }