body{
  font-family:'Coda', cursive;
  background-color:#111c13;
}


a{
    color:#FF9900;
    text-decoration:none;

}

h2{
    font-size:25px;
}

ul, ol{
    margin:0;
    padding:0;
}

.container{
    margin:0 auto;
    width:80%;
    overflow:hidden;
}

#main-header{
    height:50px;
    background:black;
    overflow:hidden;
    margin-bottom:20px;
}

#branding{
    float:left;
    width:50%;
}


h1{
    text-align:center;
}

#navbar-title{
  margin-left:25px;
}

#branding img{
    position:absolute;
    width:10%;
    height:auto;
    margin-left:
}

#main-nav{
    float:right;
    width:50%;
    padding-top:12px;

}

#main-nav ul{
    float:right;
}

#main-nav li{
    float:left;
    padding:3px 5px 0 5px;
    margin:0 15px 0 15px;
    font-size:15px;
    text-transform:uppercase;
    font-weight:bold;
    list-style:square;
    color:#fff;
}

@media (max-width: 600px){ 

   #main-nav li{
      font-size:10px;
   }
}


#main-nav a{
    color:#fff;
}

body{
  background-image:url("http://rhythmaccomplice.com/wp-content/uploads/2017/02/gabriel-barletta-87533-from-unsplash-2017-05-05.jpg");
  background-repeat:no-repeat;
  background-size: cover;
    max-width: auto;
    height: 100%;
}

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

   body{
      background-image: url("http://rhythmaccomplice.com/wp-content/uploads/2017/06/Compressorhead-from-wikimedia-2017-06-22.jpg");

   }
}

#logo-heading{
  background-color:#FF9900;
  opacity:0.7;
  height:6%;
  width:65%;
  margin: 50px auto auto auto;
  padding:auto;
  border-radius:15%;
}


#logo-heading h1{
  font-size:2.5em;
  display: block;
  vertical-align: middle;

}

#text-area{
  color:white;
  font-size:25px;
  background-color:black;
  opacity:0.7;
  height:auto;
  width:45%;
  margin: auto;
  margin-top:50px;
  margin-bottom:50px;
  border-radius:5%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align:center;
}

@media (max-width: 800px){
  #text-area{
    font-size:15px;
}
  #logo-heading{
    font-size:15px;
    text-align:center;
}
}

@media (max-width: 500px){
  #text-area{
    font-size:14px;
  }
  #logo-heading h1{
    font-size:20px;
    text-align:center;
  }
}

@media (max-width: 250px){
  #text-area{
    font-size:10px;
  }
  #logo-heading h1{
    font-size:12px;
    text-align:center;
  }
}