body,
html {
    height: 100%
}

/* particle.js */
#main {
  overflow: hidden;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0.48;
}
/* particle.js  end*/
.dropbtn {
       background-color:rgb(174, 174, 236);
       color: rgb(12, 10, 10);
       padding: 10px;
       font-size: 16px;
       border: none;
       border-radius:10px;
       margin-top: 15px;
        
     }
     
     /* The container <div> - needed to position the dropdown content */
     .dropdown {
       position: relative;
       display: inline-block;
     }
     
     /* Dropdown Content (Hidden by Default) */
     .dropdown-content {
       display: none;
       position: absolute;
       background-color: #f1f1f1;
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       z-index: 1;
     }
     
     /* Links inside the dropdown */
     .dropdown-content a {
       color: black;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
       
     }
     
     /* 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;}