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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
 position: absolute;
 /* background-color: blueviolet; */
 padding-top: 25vh;
 margin-top:-20vh; 
 margin-left: -4vw;
 
 /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
 z-index: 1;
 font-size: 10px;

top: 20vh;
}
#myDropdownA {
    left: -5vw;
    padding-right: 6vw;
    z-index: 1;
}
#myDropdownB {
    left: 2vw;
    
    
    z-index: 0;
   
}

#myDropdownC {
    left: 3vw;
    padding-right: 2vw;
   
    
}

/* Links inside the dropdown */
.dropdown-content a {
 color: rgb(42, 47, 15);
 padding: 12px 16px;
 margin: 2vh;
 text-decoration: none;
 display: block;
 background-color: rgba(103, 214, 75, .6);
}
.dropdown-content a:link {background-color: rgba(176, 201, 15, 0.6);

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(97, 72, 243, 0.462);
    
}

.dropdown-content a:focus {background-color: rgba(45, 20, 182, 0.996);
    
}


/* Change color of dropdown links on hover */
.dropdown-content a:active {background-color: rgba(237, 249, 100, 0.8);
    opacity: .5;
}

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

/* Change the background color of the dropdown button when the dropdown content is shown */



/* how to 
https://www.w3schools.com/howto/howto_css_dropdown.asp */



/* Dropdown Button */

.dropbtn {
    background-color: #04AA6D;
    color: white;
      padding: 16px;
    font-size: 8px;
    border: none;
   }



.dropbtn2 {
   /* background-color: rgba(47, 13, 130, 0.2); */
   color: rgb(144, 241, 103);
   padding: 6px;
   font-size: 16px;
   border: dotted;
   border-radius: 20px;
   font-family: fantasy;
   width: 19vw;
  
 }
 
 #wet, #wet1, #wet2, #d, #d1, #d2, #d3, #d4{
   color: rgb(235, 243, 225);
 }
  #h, #h2, #h3 {
   color: rgb(161, 216, 94);
 }/*
 #d {
   color: rgb(136, 188, 72);
 }*/
 #oh, #oh2, #oh3 {
   color: rgb(161, 216, 94);
 }
 /* The container <div> - needed to position the dropdown content */

 
 

.txt {
  padding: 10%
}






/* Dropdown Button */
.dropbtn3 {
 /* background-color: rgba(47, 13, 130, 0.2); */
 color: rgb(144, 241, 103);
 padding: 6px;
 font-size: 12px;
 border: dotted;
 border-radius: 20px;
 font-family: fantasy;
 margin-left: 70%;}
 




 @media screen and (min-width: 490px) {

    
  




.dropbtn {
    background-color: #04AA6D;
    color: white;
      padding: 16px;
    font-size: 8px;
    border: none;
   }
   
   /* 
   .dropdown {
    position: relative;
    display: inline-block;
   } */
   
   /* Dropdown Content (Hidden by Default) */
   .dropdown-content {
    display: none;
    position: absolute;
    /* background-color: blueviolet; */
    padding-top: 25vh;
   
   
    
    margin-top:-20vh; 
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
    font-size: 10px;
    left: -2vw;
    top: 20vh;
   }
   #myDropdownA {
       left: -15vw;
    
       padding-right: 10vw;
      
   
   
   }
   #myDropdownC {
      
       padding-left: 10vw;
      
     
      
       
   }
   
   /* Links inside the dropdown */
   .dropdown-content a {
    color: rgb(42, 47, 15);
    padding: 12px 16px;
    margin: 2vh;
    text-decoration: none;
    display: block;
    background-color: rgba(103, 214, 75, .6);
   }
   
   /* Change color of dropdown links on hover */
   .dropdown-content a:hover {background-color: rgba(213, 234, 236, 0.6);}
   
   /* Show the dropdown menu on hover */
   .dropdown:hover .dropdown-content {display: inline;;}
   
   /* Change the background color of the dropdown button when the dropdown content is shown */
   .dropdown:hover .dropbtn {background-color:rgb(166, 88, 239, .4);}
   
   /* how to 
   https://www.w3schools.com/howto/howto_css_dropdown.asp */
   
   
   
   /* Dropdown Button */
   .dropbtn2 {
      /* background-color: rgba(47, 13, 130, 0.2); */
      color: rgb(144, 241, 103);
      padding: 16px;
      font-size: 16px;
      border: dotted;
      border-radius: 20px;
      font-family: fantasy;
      width: 12vw;
     
    }
    
    #wet,  #d {
      color: rgb(235, 243, 225);
    }
     #h {
      color: rgb(161, 216, 94);
    }/*
    #d {
      color: rgb(136, 188, 72);
    }*/
    #oh {
      color: rgb(72, 51, 175);
    }
    /* The container <div> - needed to position the dropdown content */
   
    
    
   
   .txt {
     padding: 10%
   }
   
   
   
   
   
   
   /* Dropdown Button */
   .dropbtn3 {
    /* background-color: rgba(47, 13, 130, 0.2); */
    color: rgb(144, 241, 103);
    padding: 6px;
    font-size: 12px;
    border: dotted;
    border-radius: 20px;
    font-family: fantasy;
    margin-left: 70%;}
    
   
   
 }