styles.css

h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap,
.sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(
    rgb(122, 74, 14),
    rgb(245, 62, 113),
    rgb(162, 27, 27)
  );
  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
  background: linear-gradient(#55680d, #71f53e, #116c31);
  box-shadow: 0 0 20px 0 #3b7e20cc;
}

.blue {
  background: linear-gradient(
    hsl(186, 76%, 16%),
    hsl(223, 90%, 60%),
    hsl(240, 56%, 42%)
  );
  box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}