@import url('https://fonts.googleapis.com/css?family=Righteous|Signika|Karla|Dancing+Script|Acme');



body{
  background:#BEB06F;
  color:#181818;
  margin:0 auto;
}

h1{
  margin:30px 0 3px 50px;
  border:1px solid;
  background:#ccc;
  width:350px;
  color:#6F6146;
  text-align:center;
  font-family:Dancing Script;
   -webkit-border-radius:0px 10px 0px 0px;
-moz-border-radius:0px 10px 0px 0px;
border-radius:0px 10px 0px 0px;
}

h3{
  font-family: Righteous;
}

.articles{
  margin:0 50px 10px 50px;  
  padding:0 15px 10px 15px;
  color:white;
  background:#6F6146;
  -webkit-border-radius:0px 5px 5px 0px;
-moz-border-radius:0px 5px 5px 0px;
border-radius:0px 5px 5px 0px;
}

.articles a{
   color:#fff;
 background:#6F6146;	
  line-height:2.5;
  text-decoration:none;
  border-bottom:1px solid black;
padding:5px 5px 5px 10px;
display:block;
  font-family:Signika;
  font-size:20px;
 
}

.articles a:hover{
  text-decoration:none;
  background:#4f4532;
  border-right:3px solid black;
margin:0 auto;
}



.articles a:visited{
  text-decoration:none;
}

.articles a:active{
  border:3px inset black;
}

.searchForm{
  width:500px;
 margin:20px;
  margin-left:50px;
  margin-top:5px;
  width:350px;
  position:relative;
  background-color:#6F6146;
  padding:20px;
  float:left;
  height:80px;
   -moz-box-shadow:-8px 8px 20px -6px #000;
  -webkit-box-shadow:-8px 8px 20px -6px #000;
  box-shadow:-8px 8px 20px -6px #000;
  -moz-border-radius-bottomleft: 40px;
  -webkit-border-bottom-left-radius: 40px;
  border-bottom-left-radius: 40px;
}



.searchBox{
padding: 5px 10px;
background:#ccc;
color:#444;
border: 0;
width: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
box-shadow: 1px 1px 5px rgba(0,0,0,0.65);
outline: 0;
}


/*.searchBox:focus {
  content:"What are we looking for";
  width: 300px;
  background-color:#fff;
  color: #000;
  opacity:1;
  -webkit-box-shadow:1px 1px 9px rgba(0,0,0,0.85);
  -moz-box-shadow:1px 1px 9px rgba(0,0,0,0.85);
  box-shadow:1px 1px 9px rgba(0,0,0,0.85);
  font-weight:800;
}*/

.submitBtn {
border: 0;
position: absolute;
width: 38px;
cursor: pointer;
margin: 2px -38PX;
border-left: 2px solid skyblue;
height: 26px;
font-weight: 900;
font-size: 12px;
background-color: #f6f5ef;
color:#009F8A;
-webkit-border-radius:0px 5px 5px 0px;
-moz-border-radius:0px 5px 5px 0px;
border-radius:0px 5px 5px 0px;
}

.btn{
  float:right;
  background:#6F6146;
  color:#181818;
  position:relative;
  top:40px;
  margin-right:50px;
  border-right:2px solid #6F6146;
  border-bottom:2px solid #6F6146;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.65);
box-shadow: 1px 1px 5px rgba(0,0,0,0.65);
  font-family:Acme;
  
}

.btn:hover{
  background:#4f4532;
  color:#ccc;
}

@media  (max-width:500px){
  h1{
   margin:30px 0 3px 30px;
   width:200px;
  font-size:30px;
  }
  
  .searchForm{
    width:200px;
    margin-left:30px;
  }
  
  .searchBox{
    width:140px;
  }
  
  .btn{
    position:relative;
    align:center;     
    top:-5px;
    margin-bottom:10px;
  }
  
  articles{
    width:300px;
    margin:0 10px 10px 10px ;
    padding:0 0px 2px 0px;
  }
  
  articles a{
    padding:2px 2px 2px 0;
    line-height:1em;
    font-size:10px;
    text-align:center;
  }
}