body {
margin: 0 10%;
font-family: sans-serif;
text-align:left;
background-image: url('images/skypattern.jpg');
}

.box {
  background-color: rgb(255, 255, 255);
  border-radius: 30px;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
  
}

h1 {
color: #f56b26;
text-align:center;
font-family:sans-serif;
text-transform:uppercase;
border-bottom:2px solid #f56b26;
margin-top:20px;
}

h2 {
color: #f56b26;
font-size: 2em;
border-bottom:2px solid #f56b26;
margin-top:20px;
text-align: center;
}
h3 {
  color: #f56b26;
  font-size: 1em;
  }

p {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a{
  color: #f56b26;
  font-size: 1em; 
  font-weight: bold;
}
a:hover {
  color: rgb(59, 19, 189);
}


footer{
  text-transform: italic;
  font-size: smaller;
}

/* navigation bar */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav a:hover {
    background-color: #ddd;
    color: rgba(0, 0, 0, 0.62);
  }
  .topnav a.active {
    background-color:  #f56b26;
    color: white;
  }
  
  nav a:active {
      color: #ffffff;
      background-color: #000000;
  }