/* Follow me for more pens like this! */

/* Tweak to change the look and feel */
:root {
    --button-color: white;
    
    --dropdown-highlight: #5f5f6b;
    --dropdown-width: 160px;
    --dropdown-background: white;
    --dropdown-color: #5f5f6b;
  }
  
   
  /* Dropdown styles */
  .dropdown {
    position: relative;
    padding: 0;
    margin-right: 1em;
    
    border: none;
  }
  
  .dropdown summary {
    list-style: none;
    list-style-type: none;
  }
  
  .dropdown > summary::-webkit-details-marker {
    display: none;
  }
  
  .dropdown summary:focus {
    outline: none;
  }
  
  .dropdown summary:focus a.button {
    background-color: white;
    box-shadow: 0 5px 20px -10px rgba(1, 1, 25, .5);
    
}
  
  .dropdown summary:focus {
    outline: none;
  }
  
  .dropdown ul {
    position: absolute;
    margin: 20px 0 0 0;
    padding: 10px 0;
    width: var(--dropdown-width);
    right: 10%;
    margin-left: calc((var(--dropdown-width) / 2)  * -1);
    box-sizing: border-box;
    z-index: 2;
    
    background: var(--dropdown-background);
    border-radius: 6px;
    list-style: none;
  }
  
  .dropdown ul li {
    padding: 0;
    margin: 0;
  }
  
  .dropdown ul li a:link, .dropdown ul li a:visited {
    display: inline-block;
    padding: 10px 0.8rem;
    width: 100%;
    box-sizing: border-box;
    
    color: var(--dropdown-color);
    text-decoration: none;
  }
  
  .dropdown ul li a:hover {
    background-color: var(--dropdown-highlight);
    color: var(--dropdown-background);
  }
  
 
  
  /* Close the dropdown with outside clicks */
  .dropdown > summary::before {
    display: none;
  }
  
  .dropdown[open] > summary::before {
      content: ' ';
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 1;
  }

  .offer-link {
    color: #080826;
    text-decoration: underline;
    font-style:italic;
  }

  .w-dyn-items {
    cursor: pointer;
  }