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, 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);
}