WEB124-repo/Javascript2/asset/main.css

/*
Nicola Clark
06APR25

Adapted from https://javascript30.com - Sorting band names without articles
*/

* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  background-color: seagreen;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

#bands {
  list-style: inside square;
  background: white;
  /* 80px is 20px on each side of body bg color + 20px each side for shadow */
  width: calc(100% - 80px);
  margin: auto;
  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}

#bands li {
  border-bottom: 1px solid #efefef;
  padding: 20px;
}

#bands li::marker {
  /*
   * wanted the list marker to match the border color
   * MDN to the rescue: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
   * voila:
   */

  color: color-mix(in srgb, black 5%, seagreen);
}

#bands li:last-child {
  border-bottom: 0;
}