* {
   padding: 0;
   margin: 0;
}
body {
   background-color: black;
   overflow: hidden;
}
#main-bar {
   display: flex;
   justify-content: space-between;
   background-color: black;
   border-radius: 10px;
}

#base-values {
   display: none;
   appearance: none;
   background: white;
   padding: 11px 30px 11px 15px;
   font-weight: 700;
   font-size: 10pt;
   border-radius: 10px;
   margin-right: 0;
   border-color: black;
   border-width: 3px;
   background-image: url(assets/down\ arrow.png);
   background-repeat: no-repeat;
   background-position: 70px center;
   background-size: 20px;
   opacity: 0.7;
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
}

#visualization {
   appearance: none;
   background: white;
   padding: 11px 35px 11px 15px;
   font-weight: 700;
   font-size: 10pt;
   border-radius: 10px;
   border-color: black;
   border-width: 3px;
   background-image: url(assets/down\ arrow.png);
   background-repeat: no-repeat;
   background-position: 155px center;
   background-size: 20px;
   opacity: 0.7;
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
}

#customizables-btn {
   display: none;
   padding: 11px 20px;
   background-color: white;
   border-radius: 10px;
   border-width: 3px;
   font-weight: 700;
   font-size: 10pt;
   opacity: 0.7;
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
}

#base-values:hover,
#visualization:hover,
#customizables-btn:hover {
   opacity: 1;
}

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

.dropdown-content {
   display: none;
   position: absolute;
   width: 83%;
   overflow: auto;
   box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
   background-color: rgb(186, 180, 180);
   border-radius: 10px;
   padding: 10px;
   color: #fff;
}
input {
   width: 95%;
   border-radius: 3px;
}
.dropdown:hover .dropdown-content {
   display: block;
}

.file-input {
   width: 105px;
}

.file-input::-webkit-file-upload-button {
   visibility: hidden;
   display: none;
}
#audio-file::before {
   content: "Audio File";
}
#img-file::before {
   content: "Image File";
}
.file-input::before {
   display: inline-block;
   background: linear-gradient(top, #f9f9f9, #e3e3e3);
   background-color: #999;
   border: 1px solid #999;
   border-radius: 3px;
   padding: 10px 20px;
   outline: none;
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
   text-shadow: 1px 1px #fff;
   font-weight: 700;
   font-size: 10pt;
}
.file-input:hover::before {
   border-color: black;
}
.file-input:active::before {
   background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

input {
   border-radius: 5px;
   border: none;
   padding: 3px 0px 0px 5px;
   margin-top: 5px;
}