@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
.police {font-family: 'Anton', sans-serif;}

body{
    background-color: black;
}

h3.police{
    color: white;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
.navbar-toggler-icon {
    color: white!important;
    background-color: black!important;
}
.navbar-dark .navbar-nav .nav-link {
    font-size: 1.8rem;
    font-family: 'Anton', sans-serif;
    color: white;
}
@media screen and (max-width: 768px) {
    .navbar-dark .navbar-nav .nav-link {
        border-bottom: solid 1px white;
    }
}
.navbar-dark .nav-link {
    margin-right: 2rem;
    padding-left: 0 !important;
}
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover  {
    color: #17569b!important;
    transition: color 0.3s;
}
.bg-dark {
    background-color: black !important;
}

.navbar-toggler-icon{
    color: white!important;
    background-color: grey;
}

p, .primary-color{
    color: rgb(128,128,128);
}
.secondary-color{
    color: rgb(160,54,16);
}
.color-title{
    color: white;
    margin-left: 0.5em;
}
.bg-title{
    padding: 0.3rem 0 ;
    background-color: rgb(128,128,128);
}
.bg-title h2{padding-bottom: 0; margin-bottom: 0; }
.hr-actu{
    color: #17569b;
    padding: 0.1em;
}
.hr-footer{
    padding: 0.2em;
    color: darkgrey;
}

.aboutimg{
    max-width: 60%;
}
.cw{color: white}

/* ---------------------------------------------------------------- MP3 ----------------------------------------- */

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }
*::before, *::after{ padding: 0; margin: 0; }

:root{--pink: #89f7fe; --violet: #17569b; --darkblack: #515C6F; --white: #ffffff; --darkwhite: #cecaca; --pinkshadow: #89f7fe; --darkbshadow: rgba(0,0,0,0.15); }

body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.wrapper{ width: 100%; padding: 25px 30px; overflow: hidden; position: relative; box-shadow: 0 6px 15px var(--darkbshadow); }
.wrapper i{ cursor: pointer; }

.top-bar, .progress-area .song-timer,
.controls, .music-list .header, .music-list ul li{ display: flex; align-items: center; justify-content: space-between; }

.top-bar i{ font-size: 30px; color: var(--darkblack); }
.top-bar i:first-child{ margin-left: -7px; }
.top-bar span{ font-size: 18px; margin-left: -3px; color: var(--darkblack); }

.img-area{ width: 100%; height: 256px; overflow: hidden; margin-top: 25px; box-shadow: 0px 6px 12px var(--darkbshadow); }
.img-area img{ width: 100%; height: 100%; object-fit: cover; }

.song-details{ text-align: center; margin: 30px 0; }
.song-details p{ color: var(--darkblack); }
.song-details .name{ font-size: 21px; }
.song-details .artist{ font-size: 18px; opacity: 0.9; line-height: 35px; }

.progress-area{ height: 6px; width: 100%; border-radius: 50px; background: #f0f0f0; cursor: pointer; }
.progress-area .progress-bar{ height: inherit; width: 0%; position: relative; border-radius: inherit; background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%); }
.progress-bar::before{ content: ""; position: absolute; height: 12px; width: 12px; border-radius: 50%; top: 50%; right: -5px; z-index: 2; opacity: 0; pointer-events: none; transform: translateY(-50%); background: inherit; transition: opacity 0.2s ease; }
.progress-area:hover .progress-bar::before{ opacity: 1; pointer-events: auto; }
.progress-area .song-timer{ margin-top: 2px; }

.song-timer span{ font-size: 13px; color: var(--darkblack); }

.controls{ margin: 40px 0 5px 0; }
.controls i{ font-size: 28px; user-select: none; background: linear-gradient(var(--pink) 0%, var(--violet) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.controls i:nth-child(2), .controls i:nth-child(4){ font-size: 43px; }
.controls #prev{ margin-right: -13px; }
.controls #next{ margin-left: -13px; }
.controls .play-pause{ height: 54px; width: 54px; display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%); box-shadow: 0px 0px 5px var(--pink); }

.play-pause::before{ position: absolute; content: ""; height: 43px; width: 43px; border-radius: inherit; background: linear-gradient(var(--pink) 0%, var(--violet) 100%); }
.play-pause i{ height: 43px; width: 43px; line-height: 43px; text-align: center; background: inherit; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; }

.music-list{ position: absolute; background: var(--white); width: 100%; left: 0; bottom: -55%; opacity: 0; pointer-events: none; z-index: 5; padding: 15px 30px; border-radius: 15px; box-shadow: 0px -5px 10px rgba(0,0,0,0.1); transition: all 0.15s ease-out; }
.music-list.show{ bottom: 0; opacity: 1; pointer-events: auto; }

.header .row{ display: flex; align-items: center; font-size: 19px; color: var(--darkblack); }
.header .row i{ cursor: default;  }
.header .row span{ margin-left: 5px; }
.header #close{ font-size: 22px; color: var(--darkblack); }

.music-list ul{ margin: 10px 0; max-height: 260px; overflow: auto; }
.music-list ul::-webkit-scrollbar{ width: 0; }
.music-list ul li{ list-style: none; display: flex; cursor: pointer; padding-bottom: 10px; margin-bottom: 5px; color: var(--darkblack); border-bottom: 1px solid #E5E5E5; }
.music-list ul li:last-child{ border-bottom: 0; }
.music-list ul li .row span{ font-size: 17px; }
.music-list ul li .row p{ opacity: 0.9; }

ul li .audio-duration{ font-size: 16px; }

ul li.playing{ pointer-events: none; color: var(--violet); }

/* ---------------------------------------------------------------- fin MP3 ----------------------------------------- */