.menu {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, sans-serif;
}

.menu a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.menu a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.menu a.active {
  background-color: #4CAF50;
  color: white;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.menu a:hover, .dropdown:hover .dropdown-content {
  display: block;
}

.menu .search-container {
  float: right;
}

/* Style the search box inside the navigation bar */
.menu input[type=text] {
  /* float: right; */
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

.menu .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #d2d5d2;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.menu .search-container button:hover {
  background: #626060;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .menu .search-container {
    float: none;
  }
  .menu a, .menu input[type=text], .menu .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .menu input[type=text] {
    border: 1px solid #ccc;  
  }
}
nav {
    background-color: #333;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    display: inline-block;
    margin-right: 20px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 10px;
  }
  
  nav ul li a:hover {
    background-color: #555;
  }
  
  
@font-face{
    font-family: 'Digital-7';
    src:  url('fonts/digital-7.ttf') format('woff2'),   b ,g,mdrx
    url('digital-7.woff') format('woff');
}
.clockdate-wrapper {
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
  
}
#clock{
    font-family: Digital-7, 'sans-serif';
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
#clock span {
    color: rgba(255, 255, 255, 0.8);
    text-shadow:0px 0px 1px #333;
    font-size:50px;
    position:relative;
    top:-5px;
    left:10px;
}
#date {
    letter-spacing:3px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
}