@charset "UTF-8" ;

html {
    background-color: rgb(164, 104, 198);
}

body {
    font-family: Verdana, Geneva, sans-serif;
    color: rgb(91, 91, 91);
    background-color: ivory;
    margin: 25px;
}

header {
    text-align: center;
    padding: 20px;
}

h2 {
    font-size: 1.3em;
}

nav {
    background-color: rgb(70, 100, 130);
    padding: 15px;
    text-align: center;
}

nav a {
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: white;
}

nav a:hover {
    text-decoration: underline;
    color: rgb(255, 220, 120);
}

main {
    padding-left: 20px;
    padding-right: 20px;
}

img {
    width: 25%;
    padding: 25px;
}

body > footer {
    background-color: rgb(70, 100, 130);
    color: rgba(255, 255, 255, 0.6);
    font-weight: bold;
    font-size: 0.9em;
    line-height: 3em;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
}
/*i could not get the bullet image to be small so i used AI to write the code to size it down. just using the list-style-image: url('bullet.png'); caused it to be the size of one screen an all the way to the left. can you go over this in class if you haven't already? if so, please point me to the lecture video/slides the content is located in.*/
ol {
    list-style: none;
    padding-left: 30px;
}

ol li {
    position: relative;
}

ol li::before {
    content: "";
    background-image: url("photo.jpg");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    left: -25px;
    top: 3px;
}