@charset "UTF-8";
@media all
{
  /* * { margin:0; padding: 0; } */

  option { padding-left: 0.4em; }

  select { padding: 1px; }

  /* inconsolata-regular - latin */
  @font-face {
      font-family: 'Inconsolata';
      font-style: normal;
      font-weight: 400;
      src:
          url('../fonts/inconsolata-v31-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('../fonts/inconsolata-v31-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  html {
      height: 100%;
      width: 100%;
      margin-bottom: 1px;
  }

  body {
    margin-top: 3%;
    margin-bottom: 7%;
    margin-left: 5%;
    margin-right: 10%;
    color: black;
    background-color: #cccccc;
    background: -prefix-linear-gradient(bottom, #cccccc, white); 
    background: linear-gradient(to top, #cccccc, white);
    text-align: left;
    font-size: 1em;
  }

  main {
      max-width: 780px;
  }

  img { border: 0 solid; }

  a#brand {
      color: darkgreen;
      font-family: Inconsolata, monospace;
      font-size: 3em;
      font-weight: bold;
      text-decoration: none;
  }

  #header {
  }
  
#header, #main, #footer { clear:both; }

footer {
    /* background-color: grey; */
    position: relative;
    padding-top: 5%;
    margin-top: 5%;
}

footer hr {
    border: 0;
    height: 1px;
    width: 77%;
    background: black;
}

footer p {
    margin: 0pt;
}

}                               /* media all */

@media screen and (min-width: 481px) {

 #headerimg {
     /* background-color: green; */
     background-image: url("../img/sheep.jpg");
     width: 800px;
     height: 200px;
     background-repeat: no-repeat;
     padding: 1%;
     margin: 1%;
     text-align: center;
 }


}                               /* screen > 480 px */

@media screen and (max-width: 480px) {

 #headerimg {
     background-color: green;
     padding: 1%;
     margin: 1%;
     text-align: center;
 }


}                               /* screen <= 480 px */