.player {
    width: 320px;
    display: flex ;
    overflow: hidden ;
    font-size: 1.22em ;
    flex-direction: column ;
    height: var(--parent-height) ;
    background-color: white ;
    /*border: solid 5px rebeccapurple;*/
    }
    
    /* --- Small Header --- */
    .music_player_header {
    /*width: 320px;
      height: 568px;*/
    /*gap: 0 .4em ;*/
    width: 100% ;
    display: flex;
    height: 125px ;
    flex-shrink: 0 ;
    position: relative;
    align-items: flex-start ;
    justify-content: flex-end ;
    transition: height var(--cubic-header), box-shadow var(--duration), padding var(--duration) ease-in-out ;
    }
    
    .mp3_control_buttons {
    /*gap: .5em 0 ;*/
    height: 125px;
    display: flex ;
    flex-wrap: wrap ;
    align-items: center ;
    will-change: contents ;
    align-content: center ;
    justify-content: center ;
    transition: transform var(--cubic-header) , width var(--cubic-header) ;
    }
    
    /* --- Label Small Screen --- */
    .slider_context {
      display: block;
    position: relative;
    padding-right: 15px;
    float: right;
    left: 35px;
    height: 25px;
    top: -20px;
    width: 220px ;
    text-transform: capitalize ;
    text-align: right ;
    will-change: contents ;
    transition: width var(--cubic-header) ;
    animation: calc(var(--duration) / 2) var(--cubic-slider-context) ;
    
    }
    
    .duration_progress_bar {
      position: relative;
      top: 37px;
    width: 95% ;
    height: .25em ;
    cursor: pointer ;
    border-radius: 1em ;
    touch-action : none ;
    background-color: #e5e7ea ;
    transition: width var(--cubic-header) ;
    }
    
    /* -------------------------------------------------------------- Everything is BIGGER in Taxes -------------------------------------------------------------- */
    
    /* --- Big Header With Play Buttons NO Song List --- */
    .music_player_header.open-header {
      
    height: 89% ;/* --- Full Screen Size Play Button Area --- 100% */
    padding-left: 0 ;
    padding-right: 0 ;
    box-shadow: unset ;
    
    }
    /* --- Label Big Screen --- */
    .mp3_control_buttons.move .slider_context{
      text-shadow: 2px 2px 4px #000000;
      left: 0px;
    line-height: 25px;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    top: -45px;
    height: 50px;
    color: white;
    display: flex;
    flex-direction: column ;
    justify-content: center ;
    }
    /* --- Label Big Screen Title --- */
    .mp3_control_buttons.move .player__title {
      
      font-size: 15px;
      color: white;
    }
    .mp3_control_buttons.move .player_ALL_buttons {
    
      height: 25px;
      width: 100%;
      top: 0px;
    }
    
    .cover_img_0 {
      background: linear-gradient(to top right, rgba(126, 197, 49, 0.4), rgba(0, 140, 255, 0.6)), url('../../content/images/mp3/images-unsplash.jpg') center center;
    }
    .cover_img_1 {
      background: linear-gradient(to top left, rgba(216, 23, 23, 0.55), rgba(255, 255, 255, 0.7)), url('../../content/images/mp3/warriors.jpg') center center;
    }
    .cover_img_2 {
      background: linear-gradient(to top left, rgba(255, 0, 0, 0.4), rgba(197, 187, 49, 0.6)), url('../../content/images/mp3/autumn.jpg') center center;
      filter: brightness(110%);
    }
    .cover_img_3 {
      background: linear-gradient(to top left, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.3)), url('../../content/images/mp3/storm.jpg') center center;
    }
    .cover_img_4 {
      background: linear-gradient(to top left, rgba(255, 255, 255, 0.6), rgba(0, 22, 86, 0.4)), url('../../content/images/mp3/away.jpg') center center;
    }
    .cover_img_5 {
      background: linear-gradient(to top right, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.4)), url('../../content/images/mp3/tower-cyrodiil-oblivion.jpg') center center;
          filter: brightness(130%);
    }
    .cover_img_6 {
      background: linear-gradient(to top left, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.5)), url('../../content/images/mp3/kendji.jpg') center center;
    }
    .cover_img_7 {
      background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.8)), url('../../content/images/mp3/night.jpg') center center;
    }
    .cover_img_8 {
      background: linear-gradient(to top left, rgba(0, 0, 0, 0.4), rgba(65, 169, 254, 0.6)), url('../../content/images/mp3/calling.jpg') center center;
    }
    .cover_img_9 {
      background: linear-gradient(to top left, rgba(255, 238, 0, 0.3), rgba(0, 0, 0, 0.7)), url('../../content/images/mp3/door.jpg') center center;
    }
    
    .image_settings {
      display: block ;
      background-size: cover;
      object-fit: cover ;
      width: 100% ;
      flex-shrink: 0;
    
    }
    
    /* --- All Images That are round --- */
    .player__img {
    
    width: 40px ;
    height: 40px ;
    border-radius: 50% ;
    }
    /* --- Top First Image --- */
    .player__img--absolute {
    
    height: 50px;
    width: 50px;
    border-radius: 0% ;
    top: 15px ;
    left: 15px ;
    position: absolute ;
    
    }
    /* --- How Image Slides --- */
    .slider {
      
    flex-shrink: 0 ;
    overflow: hidden ;
    transition: width var(--cubic-header), height var(--cubic-header), top var(--cubic-header), left var(--cubic-header);
    
    }
    /* This is Big Image box */
    .slider.open-slider{
      
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 400px;
    /*height: 14.6em ;*/
    
    }
    
    .slider__content {
    
    display: flex ;
    height: 100px ;
    will-change : transform ;
    transition: transform var(--cubic-slider);
    
    }
    .click:hover {
      opacity: 0.5;
      cursor: pointer;
    }
    
    #slider__content100 {
    
    height: 100%;
    width: 100%;
    }
    
    /* --- Name and Title --- */
    .slider__name, 
    .slider__title {
    
      display: flex;
    flex-direction: column ;
    justify-content: center ;
    overflow: hidden ;
    padding-bottom: 5px;
    
    }
    /*-------------------------------------------*/
    .text-wrap {
      
    display: block ;
    white-space: pre ;
    width: fit-content ;
    animation: text-wrap var(--duration-text-wrap) infinite ;
    
    }
    
    @keyframes text-wrap {
      75% {
        transform: translate3d(-51.5%, 0, 0) ;
      }
      100% {
        transform: translate3d(-51.5%, 0, 0) ;
      }
    }
    
    /* --- MP3 Player --- */
    .media_control_button {
      
    all: unset ;
    width: 40px ;
    height: 40px ;
    cursor: pointer ;
    
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    }
    
    .media_control_button:hover {
      opacity: .5;
    }
    
    .hamburger_menu {
      top: 15px ;
      left: 20px ;
      position: absolute ;

      transform: scale(0) ;
      transition: transform calc(var(--duration) / 2) ;
    height: 25px;
    width: 25px;
    }
    
    .slider.open-slider .hamburger_menu {
      
    transform: scale(1) ;
    transition: transform var(--cubic-play-list) ;
    
    }
    
    .hamburger_menu_btn {
      height: 100%;
      width: 100%;
        background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
      }

    .media_control_button--absolute--center {
      
    top: 0 ;
    left: 0 ;
    right: 0 ;
    bottom: 0 ;
    margin: auto ;
    position: absolute ;
    
    }
    
    h3[alt ="pause-icon"] {
      display: none ;
    }
    
    
    /* --- Box with Buttons ECT --- */
    .mp3_control_buttons.move {
    
      position: relative;
    left: 21px;
    width: 100% ;
    transform: translate3d(-1.1em , calc(var(--parent-height) - 153%) , 0) ;
    
    }
    
    /* --- Full List Title --- */
    .player__context {
      
    margin: 0 ;
    width: 238px ;
    display: flex ;
    line-height: 1.5 ;
    flex-direction: column ;
    justify-content: center ;
    text-transform: capitalize ;
    
    }
    
    @keyframes opacity {
      0% {
        opacity: 0 ;
      }
      90%{
        opacity: 1 ;
      }
    }
    /* --- Player Label Full Screen --- */
    .mp3_control_buttons.move .slider_context{
      
      width: 80% ;
    }
    
    .player__title {
      
    font-size: .7em ;
    color: #00000086 ;
    
    }
    
    .mp3_control_buttons.move .duration_progress_bar{
    
    position: relative;
    width: 95% ;
    top: 28px;
    
    }
    
    .duration_progress_bar_filled {
    
    width: 0% ;
    height: 100% ;
    display: flex ;
    position: relative ;
    align-items: center ;
    border-radius: inherit ;
    background-color: #78adfe ;
    
    }
    
    .duration_progress_bar_filled::before {
      
    right: -5px ;
    width: .35em ;
    content: " " ;
    height: .35em ;
    border-radius: 50% ;
    position: absolute ;
    background-color: #5781bd ;
    
    }
    
    .mp3_song_block {
      
      height: 50px;
    display: flex ;
    cursor: pointer ;
    margin: 5px;
    padding: 5px;
    border-bottom: 2px solid #e5e7ea ;
    }
    
    .mp3_song_block li {
        scroll-snap-align: start;
    }
    
    .mp3_song_block .player__context {
      margin-top: 2px;
    line-height: 1.5 ;
    margin-left: .65em ;
    height: 35px;
    }
    
    .song_name {
    font-size: .88em ;
    }
    
    .song_full_duration {
    
    font-size: .65em ;
    font-weight: bold ;
    color: #00000079 ; 
    height: fit-content ;
    align-self: flex-end ;
    
    }
    .list {
    margin: 0 ;
    padding: 0 ;
    list-style-type: none ;
    }
    
    .album-name_duration {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    }
    
    .audio {
      display: none !important ;
    }
    

    .triangle {
      position: relative;
      background-color: #464646;
      text-align: left;
    }
    .triangle:before,
    .triangle:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }
    .triangle,
    .triangle:before,
    .triangle:after {
      width:  100%;
      height: 100%;
      border-top-right-radius: 30%;
    }
    
    .triangle {
      transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
    }
    .triangle:before {
      transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
    }
    .triangle:after {
      transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
    }

    .player_ALL_buttons {
      font-family: Arial;
      position: relative;
      display: flex ;
    flex-wrap: nowrap ;
    align-items: center ;
    will-change: contents ;
    align-content: center ;
    justify-content: center ;
    text-align: center;
      height: fit-content;
      width: fit-content;
      top: 20px;
      color: #444;
    }
    #loopBtn {
      position: relative;
      margin-right: 35px;
      float: left;
      top: 0px;
      height: 20px;
      width: 20px;

    }
    #loopOnce {
      position: relative;
      font-size: 10px;
      top: -0.5px;
      right: 0.5px;
      font-weight: bolder;

    }
    .loopOnceUnclicked {
      opacity: 0.0;
    }
    .loopOnceClicked {
      opacity: 1;
    }
    .loopIcon {
      background-image: url("../../content/images/mp3/loopBtn.png");
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
    }
    .loopClicked {
      background-image: url("../../content/images/mp3/shuffleBtnClick.png");
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
  color: #9E3623;
    }
    .back {
      height: 8px;
      width: 8px;
    }
    .media_control_button.back {
      position: relative;
      margin-right: 55px;
      top: 0px;
      font-size: 30px;
    }
    .media_control_button.play {
      position: relative;
      margin-right: 50px;
      font-size: 25px;
    }
    .play {
      height: 12px;
      width: 12px;
    }
    .pause {
      position: relative;
      margin-left: 20px;
      top: -7px;
      font-size: 50px;
      height: 12px;
      width: 12px;
    }
    .next {
      height: 8px;
      width: 8px;
    }
    .media_control_button.next {
      position: relative;
      margin-right: 35px;
      top: 0px;
      font-size: 30px;
    }
    .shuffleBtn {
      position: relative;
      margin-right: 0px;
      float: left;
      top: 0px;
      height: 18px;
      width: 18px;
    }
    .media_control_button.shuffleBtn {
      position: relative;
      top: 0px;
      font-size: 30px;
    }
    .shuffleIcon {
      background-image: url("../../content/images/mp3/shuffleBtn.png");
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;

    }
    .media_control_button:hover {
      opacity: 0.3;
    }
    .rotate-90 {
      transform: rotate(-90deg);
      /* Legacy vendor prefixes that you probably don't need... */
      
      /* Safari */
      -webkit-transform: rotate(-90deg);
      
      /* Firefox */
      -moz-transform: rotate(-90deg);
      
      /* IE */
      -ms-transform: rotate(-90deg);
      
      /* Opera */
      -o-transform: rotate(-90deg);
      
      /* Internet Explorer
      Ctrl+D Select one at a Time
      Ctrl+Shift+L Select All
      */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
    .rotate90 {
    transform: rotate(90deg);
    /* Legacy vendor prefixes that you probably don't need... */
    
    /* Safari */
    -webkit-transform: rotate(90deg);
    
    /* Firefox */
    -moz-transform: rotate(90deg);
    
    /* IE */
    -ms-transform: rotate(90deg);
    
    /* Opera */
    -o-transform: rotate(90deg);
    
    /* Internet Explorer
    Ctrl+D Select one at a Time
    Ctrl+Shift+L Select All
    */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    
    #mp3_song_list {
    height: 100% ;
    overflow: auto ; 
    
    }
    
    #mp3_song_list:hover {
      scrollbar-width: thin ;
    }
    #mp3_song_list::-webkit-scrollbar {
    
    width: 0 ;
    
    }