style.css

body {
    background-color: #2b2b2b;
    color: aliceblue;
}

h1 {
    color: cornflowerblue;
    text-align: center;
    font-family: 'Impact', "Droid Serif", cursive, serif;
}

.heading2-modifier {
    color: #00ffbb;
}

#page-title {
    text-shadow: 0 4px #4d4d55;
}
/* used what you taught and https://www.w3docs.com/snippets/css/how-to-change-link-colors-in-html.html to do this */
a:link {
    color: chartreuse;}

a:visited {
    color: green;
}

.fav-music-names {
    text-shadow: 0 3px #000000;
}

li {
    list-style-type: square;
    padding: 3px;
}


#most-fav {
    font-weight: bold; color: limegreen; text-decoration: underline;
}

.second-fav {
    font-style: italic; color: darkviolet;
}

.fav-sections {
    border: 6px #4d8d8d ridge;
    margin: 10px;
    padding: 15px;
}

.image-container {
    child-align: middle;
}

/* I found out how to center an image here */
/* https://www.w3schools.com/howto/howto_css_image_center.asp */
/* then I looked up the display property and read about it here */
/* https://www.w3schools.com/CSSref/pr_class_display.asp */

.favorite-image {
    border: 10px #4d8d8d inset;
    display: block;
    /* I let webstorm convert what i had to margin shorthand then read up on it here*/
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties */
    margin: 2% auto;
    width: 80%;
    border-radius: 20px;
}

table {
    border: 6px #4d8d8d ridge;
    border-collapse: collapse;
    width: 100%;



}
th,tr,td {
    border: 2px #4d8d8d inset;
    text-align: center;
}
th {
    background-color: black;
}
tr:nth-child(even) {
    background-color: #3d3d3d;
}

tr:nth-child(odd) {
    background-color: #3d203d;
}