.dropbtn {   
    background-color: rgb(86, 86, 169); 
    color: white; 
    font-size: 16px; 
    border-radius: 8px; 
    cursor: pointer; 
    margin-left: 12px;
    text-decoration: none;
      }  

.dropdown { 
  position: relative;   
  display: inline-block; 
    }  

.dropdown-content { 
  display: none;   
  position: absolute;   
  background-color: black; 
  opacity: 0.8;  
  -webkit-text-fill-color: whitesmoke;
  border-radius: 8px;
  min-width: 230px;   
  overflow: auto;   
  border: 0cap solid whitesmoke;   
  z-index: 1; 
  
    }     
  .dropbtn:hover, 
  .dropbtn:focus {   
    background-color: rgb(99, 169, 209); 
      }  

      /* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

  #myInput {   
    box-sizing: border-box; 
    background-image: url('searchicon.png'); 
    background-position: 14px 12px;   
    background-repeat: no-repeat;   
    font-size: 16px;   
    padding: 14px 20px 12px 45px;   
    border: none;   
    border-bottom: 1px solid #ddd; 
      }  
  #myInput:focus {
    outline: 3px solid #ddd;
      }  
    
  .dropdown-content a {
    color: whitesmoke;   
    padding: 12px 16px;   
    text-decoration: none;   
    display: block; 
    text-align: left ;
      }  
  .dropdown a:hover {
    background-color: darkslategray;
      }  
  .show {
    display: block;
      }
  .shadow-button:hover{
    box-shadow: 10px 10px 3px rgb(192, 188, 188);
      }  
  .button{
    background-color: rgb(244, 186, 40);
    font-size: large;
    border-radius: 4px;
      }