*{
  margin:0;
  padding:0;
}

.wrapper{
    margin:auto;
    border: 2px solid white;
    border-left-color: black;
    border-right-color: black;
    border-top: black;


    border-width: 100%;
    padding-bottom: 10px;

}

header{
  background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url("images/7.jpg");
  height:305vh;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  position: relative;

}
.nav-area{
  float: right;
  list-style: none;
  margin-top: 30px;

}

.nav-area li {
    display: inline-block;


}

.nav-area li a {
   

    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    font-size:16px;


}

.nav-area li a:hover{
  background: red;
  color: #fff;

}
.logo img{
  width: 40px;
  height: 40px;
  float: left;
  padding: 20px 10px 30px 10px;
}

.logo h1{
  color: #fff;
}





#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}