h1 {
  text-align: center;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
  color: #333;
}

.container {
  background-color: #fff;
  padding: 20px 0;
  border-radius: 8px;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.marker {
  width: 200px;
  height: 25px;
  margin: 15px auto;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Cap styling */
.cap {
  width: 60px;
  height: 100%;
  border-radius: 12px 0 0 12px;
}

/* Sleeve styling */
.sleeve {
  width: 110px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 10px double rgba(0, 0, 0, 0.7);
  border-radius: 0 12px 12px 0;
}

.red {
  background: linear-gradient(90deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
  box-shadow: 0 0 12px rgba(162, 27, 27, 0.7);
}

.green {
  background: linear-gradient(90deg, #55680D, #71F53E, #116C31);
  box-shadow: 0 0 12px rgba(59, 126, 32, 0.6);
}

.blue {
  background: linear-gradient(90deg, hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
  box-shadow: 0 0 12px rgba(0, 0, 255, 0.6);
}