/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  opacity: 0;         /* Initially invisible */
  visibility: hidden; /* Ensures it doesn't take up space */
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  top: 100%; /* Ensures dropdown appears below the navbar */
  left: inherit;
  width: inherit; /* Spans the width of the navbar */
}

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

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  animation: showDropdown 0s 0.75s forwards; /* 3s delay */
}

#myNavbar a {
  text-decoration: none;
}

@keyframes showDropdown {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
}