/*testing*/

.audioInfo {
    position: fixed;
    height: 250px;
    width: 250px;
    bottom: 0;
    right: 0;
    text-align: center;
    background-color: #04AA6D;
    background-image: url(../music/albumicons/mindwave.jpg);
    background-color: rgb(132, 0, 255);
    background-blend-mode:darken;
    background-size: cover;
    border-top-left-radius: 15px;
    box-shadow: 0 0 5px 5px rgb(132, 0, 255),
              0 0 10px 7px #96839e,
              0 0 15px 20px #440b7978;
    z-index: 5;
}

.musicPlayerMask {
    position: fixed;
    height: 250px;
    width: 250px;
    bottom: 0;
    right: 0;
    animation: slide-in-animation 2s ease-in-out;
}

@keyframes slide-in-animation {
    0% {
        transform: translateX(260px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 100%;
    }
}

.audioplayer {
    position: absolute;
    bottom:0;
    display: grid;
    place-items: center;
    background-color: rgba(49, 49, 49, 0.7);
    transform: translateY(110px);
    width: 100%;
    height: 110px;
    accent-color: rgb(190, 110, 255);
    z-index: 5;
}

@keyframes playerSlide {
    0% {
        transform: 0;
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes playerSlideBack {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: 0;
    }
}

@keyframes mediaExpand {
    0% {
        transform: translateY(205px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes mediaCollapse {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(205px);
    }
}

#audioButton {
    background-color: rgba(150, 150, 150, 0.4);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-size: 32px;
    cursor: pointer;
}

#audioButton > img {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    top: 5px;
    opacity: 75%;
}

#audioButton:hover {
    background-color: rgba(150, 150, 150, 0.6);
}

#volumemuteButton {
    width: 25px;
    height: 25px;
    text-decoration: none;
    border: none;
    color: black;
    background-color: rgba(128, 128, 128, 0);
    font-size: 24px;
    padding-right: 25px;
    cursor: pointer;
}

#volumemuteButton > img {
    position: relative;
    width: 22px;
    height: 22px;
    top: 2px;
    opacity: 50%;
}

#volumemuteButton > img:hover {
    opacity: 75%;
}

.progressbar {
    border-radius: 15px;
    background-color: rgba(150, 150, 150, 0.4);
    width: 85%;
    padding-right: 5px;
    padding-left: 5px;
}

.progressbar > progress {
    width: 65%;
    color: rgb(190, 110, 255);
    accent-color: rgb(190, 110, 255);
}

.volumeControls {
    background-color: rgba(150, 150, 150, 0.4);
    border-radius: 15px;
    padding-right: 10px;
    margin-bottom: 5px;
}

progress {
    background-color: rgba(162, 162, 162, 0.5);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    --color: rgb(190, 110, 255);
    accent-color: rgb(190, 110, 255);
    border-radius: 10em;
}

progress::-webkit-progress-bar {
  border-radius: 10em;
}
progress::-webkit-progress-value {
  border-radius: 10em;
  background-color: var(--color);
}
progress::-moz-progress-bar {
  border-radius: 10em;
  background-color: var(--color);
}

.audioInfo span {
    color:white;
    mix-blend-mode: difference;
}

#mediaCloser {
    animation: button-down 0.2s ease-in;
    position: fixed;
    display: inline;
    z-index: 1;
    bottom: 235px;
    width: 125px;
    cursor: pointer;
    height: 40px;
    right: 62.5px;
    border-style: none;
    background-color: #000000;
    border-radius: 15px;
    box-shadow: 0 0 5px 5px rgba(62, 0, 119, 0.651),
              0 0 10px 7px #96839e6d,
              0 0 15px 20px #440b7949;
}

#mediaCloser:hover {
    animation: button-up 0.2s ease-in;
    transform: translateY(-10px);
    box-shadow: 0 0 5px 5px rgba(234, 0, 255, 0.404),
              0 0 10px 7px #96839e6d,
              0 0 15px 20px #440b7949;
}

@keyframes button-up {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-10px);
    }
}

@keyframes button-down {
    0% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}