* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all 0.45s linear;
}

header,
footer {
   position: relative;
   background-color: #1f1f1f;
   padding: 15px;
}


h1,
h2 {
   font-family: 'Open Sans';
   font-weight: 300;
   color: #fff;
}

h4 {
   font-family: 'Open Sans';
   font-weight: 300;
   color: #fff000;

}

h3 {
   font-size: 1.5em;
   font-family: 'Open Sans';
   font-weight: 300;
   color: magenta;
}

p {
   color: #fff;
   font-family: 'oswald';
   color: #10bbff;
}

@media screen and (max-width:1023px) {

   header,
   footer {
      text-align: center;
   }

   .audiocontainer {
      flex-basis: 95%;

   }

}

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


   .audiocontainer {
      min-width: 650px;
      flex-basis: 60%;

   }

}

.players {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 40px;

}

.audiocontainer {
   position: relative;
   margin-top: 40px;
   background-color: #1f1f1f;
   padding: 20px;
   z-index: 0;

}

.container {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   margin-top: 40px;
   gap: 10px;
   z-index: 101;

}

.tracce {
   height: 200px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
   overflow-y: scroll;
   align-content: flex-start;
   margin-bottom: 15px;


   padding: 10px;

}

.tracce::-webkit-scrollbar {
   width: 10px;


}

.tracce ::-webkit-scrollbar-track {
   /* box-shadow: inset 0 0 5px grey;  */
   border-radius: 5px;
}

.tracce::-webkit-scrollbar-thumb {
   background: #ffee00;
   border-radius: 5px;

}

/* .tracce::-webkit-scrollbar-thumb:hover {
   background: #fff000;
} */

.tracce button {
   position: relative;
   flex-basis: 100%;
   font-family: 'Open Sans';
   font-weight: 400;
   color: #fff;
   background-color: transparent;
   padding: 5px;
   margin: 3px;
   cursor: pointer;
   border: 1px solid white;
   z-index: 100;
}

.tracce button:hover {
   background-color: rgba(255, 255, 255, 0.2);
   color: #fff000;

}

@media screen and (max-width:1023px) {
   div.tracce {
      flex-basis: 100%;
   }

   .lettore-audio,
   .lettore-video {
      flex-basis: 100%;
      margin-block: 10px;
   }

}

@media screen and (min-width:1024px) {
   div.tracce {
      flex-basis: 30%;
   }

   .lettore-audio,
   .lettore-video {
      flex-basis: 65%;
   }

}

audio,
video {
   width: 100%;
   border-radius: 20px;
}


.myplayer {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   background-color: transparent;
}

.player {
   position: relative;
   width: 95%;
   /*min-width: 300px;*/
   background-color: #1f1f1f;
   display: grid;
   grid-template-columns: 48px 1fr 48px;
   grid-gap: 16px;
   padding: 8px 24px;
   border-radius: 64px;
}

#tempo,
.control {

   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-block: 16px;
}

#playbtn {
   font-size: 24px;
   color: #1f1f1f;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #fff;
   cursor: pointer;
}

#playbtn:hover {
   color: #fff;
}

.info {

   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-family: 'Open Sans';
   font-weight: 300;
}

#musicTitle {

   flex-basis: 95%;
   text-align: center;
   font-size: 0.9rem;

}

#tempo {
   text-align: right;
   font-family: 'Open Sans';
}

.bar {
   position: absolute;
   overflow: hidden;
   background-color: #353535;
   top: -4px;
   bottom: -4px;
   left: -4px;
   right: -4px;
   z-index: -1;
   border-radius: 64px;
}

#progress {
   display: block;
   width: 0%;
   height: 100%;
   background: linear-gradient(#fff000, #10bbff);
   transition: width 1s linear;
}

.volumebar {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   flex-basis: 80%;
}

.volume {
   -webkit-appearance: none;
   height: 8px;
   border-radius: 5px;
   background: #353535;
   outline: none;
   opacity: 0.7;
}

.volume::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #fff000;
   cursor: pointer;
}

.volume::-moz-range-thumb {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #fff000;
   cursor: pointer;
}

.volume:hover {
   opacity: 1;
}

input[type="range"] {
   margin-inline: 15px;

}

#refresh {
   position: absolute;
   color: magenta;
   top: 20px;
   right: 20px;
}

#refresh:hover {
   transform: scale(1.1);
}

#next,
#previous {
   margin-inline: 7px;
   cursor: pointer;
}

.form {
   display: flex;
   justify-content: center;
}

#upload {
   flex-basis: 30%;
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   color: #fff;
}

#upload input[type=submit] {
   flex-basis: 100%;
   border: 1px solid #fff;
   text-align: center;
   background-color: unset;
   color: #fff;
   line-height: 1.5rem;
   margin-block: 7px;

}

#upload input[type=submit]:hover,
input[type=file]::file-selector-button:hover {
   transform: scale(1.1);
   color: #10bbff;
   border: 1px solid #10bbff;
   transition: .4s;
}

input[type=file] {
   flex-basis: 100%;
}

input[type=file]::file-selector-button {
   border: 1px solid #fff;
   background-color: unset;
   color: #fff;
   line-height: 1.5rem;
}