body {
        background-color:#f4f7c5;
        margin: 0;
    }
    hr {
      border-color: #fbd687;
border-style: solid;
background-color: #2f615b;
    height: 30px;
    border-width: 99%;
    }
    .topone
    {
      Background-color:  #aacbde;
      font-family: TimesRoman;
      font-size: 48px;
      font-weight: bold;
      text-align:center;
    }

    .main {
      Background-color:  #cccbda;
      font-family: TimesRoman;
      font-size: 12px;
      text-align:left;
    }

    h1 {
      color: #ea907a;
      font-family: TimesRoman, Arial;
      font-size:48px;
      font-weight: bold;
      margin-top: 0px;
      margin-bottom: 1px:

    }
    img:hover {
      border-radius: 50%;

    }

/* this is for a comment and the follwoing is to set style for a class, here, bacon.
<img class="bacon"
an item can have more than one class applicable to it
or, <h1> id="heading"
*/
.bacon {
background-color: blue;
}
#heading {
  background-color: yellow;
}