/*This is to customize the header portion of my webpage to make it look more organized*/
header {
    color: whitesmoke;
    background-color: black;
    font-family: serif;
    margin-top: 0px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-shadow: 0px 0px 12px #000;
    font-size: large;
    text-align: center;
}

/*This is to change the appearance of the division line between the sections. */ 
hr {
   width: 50%;
   color: black;
   size: 5%;
}

/*This is to edit all images included in the html file*/
img {
    height: 450px;
    width: 350px;
}
header h2 {
    color: whitesmoke;
    font-family: serif;
    font-size: large;
}
/*This was to allign the numbers as well as bullets in both the ul and ol located in the html */
ul {
    text-align: center;
    list-style-position: inside;
}

ol {
    text-align: left;
    list-style-position: inside;
}

main {
    color: black;
    font-family: sans-serif;
    font-size: medium;
    background-color: beige;
    text-align: center;
}

footer div nav p {
    font-family: serif;
    text-align: center;
    background-color: black;
    color: whitesmoke;
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 10px;
}

a:link {color: rgba(165, 42, 42, 0.29)} 
a:visited {color: brown}
a:hover {color: green}
a:active {color: pink}