style.css

h1 {
    text-align: center;
}

/* 2 margin values sets "margin-top" and "margin-bottom" to the first value and "margin-right" and left to the second value*/
.marker {
    height: 25px;
    width: 200px;
    margin: 10px auto;

}

/* must use "background" not "background-color" for gradient"
"deg" at beginning of"linear-gradient" determines direction of color gradient defaults to 180deg
"%" symbol after color in "linear-gradient"" function determines percentage occupied by that color (color-stops)*/
.red {
    background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0px 0px 20px 0px rgba(83, 14, 14, 0.8);
}

/* creating a shadow "box-shadow: xoffset yoffset blurRadius spreadRadius color; */
.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0px 0px 20px 0px #3B7E20CC;
}

/*hsl "hue, saturation, lightness"*/
.blue {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0px 0px 20px 0px hsla(223, 59%, 31%, 0.8);
}

/* 2 padding values sets "padding-top" and "padding-bottom" to the first value and "padding-right" and left to the second value*/
.container {
    background-color: rgb(255, 255, 255);
    padding: 10px 0;
}

/* ".sleeve" goes over color markers
"rgba" function works the same as rgb but uses "alpha" channel as opacity */
.sleeve {
    width: 110px;
    height: 25px;
    background-color: rgba(255, 255, 255, 50%);
    border-left: 10px double rgba(0, 0, 0, 75%);
}

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

/* now ".cap" and ".sleeve" appear ontop of one another instead of on a new line (block) or next to one another (inline)*/
.cap, .sleeve {
    display: inline-block;
}