/* this is the css for the responsive web design lab on week 6 */

#menu a {
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}

#menu li {
    display: inline;
    padding: 5px 20px 5px 20px;

}

/*this is how to make it so the image is never more than 100% of the page width, and is centered*/

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*this is where the main div settings are for when the screen is larger than 600px*/

#main {
    width: 75%;
    padding: 10px;
    border-style: solid;
    border-color: #8D1919;
    margin:auto;
}

#text {
    padding: 40px;
}

#footer {
    margin: auto;
    text-align: center;
    font-size: small;
}

/*under this @media line are the effects for what happens to the menu when the screen is smaller than 600px*/

@media (max-width: 600px) {
    #menu {
        text-align:left;
    }

    #menu li {
        padding: 2px;
        display:list-item;
    }

/*this is where the main div settings are for when the screen is smaller than 600px. change the width to 100% and change the border style to "none"*/

    #main {
        width: 75%;
        border-style: none;
        font-family: sans-serif;
    }

    /*this is where to add new css for the h1 to be centered when the page is less than *600px*/

    h1 {
      text-align: center;
    }

}
/*this is where to add new css for the img to disappear when the page is less than the width of the image. in this case it's set to 582px because that's the width of my image file */

@media (max-width: 582px) {
  img {
    display: none;
  }
}