body { background-color: #290713; }

@font-face {
    font-family: 'Acier'; 
    src: url('fonts/aciertext.otf') format('opentype');
}

#container {
  height: 540px;
  width: 960px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 20px;
}

.panel {
  position: absolute;      
}

.panel img {
  display: block;
  transition: opacity .3s ease;
  opacity: .15;            
}

.panel:hover img {
  opacity: 1;      
}

#panel1 { left: 0px;   top: 0px; }
#panel2 { left: 74px;  top: 0px; }
#panel3 { left: 129px; top: 0px; }
#panel4 { left: 184px; top: 0px; }
#panel5 { left: 247px; top: 0px; }
#panel6 { left: 297px; top: 0px; }
#panel7 { left: 347px; top: 0px; }
#panel8 { left: 396px; top: 0px; }
#panel9 { left: 499px; top: 0px; }
#panel10_1 { left: 633px; top: 153px; }
#panel10_2 { left: 693px; top: 153px; }
#panel10_3 { left: 750px; top: 153px; }
#panel10_4 { left: 804px; top: 153px; }
#panel10_5 { left: 853px; top: 153px; }
#panel11 { left: 901px; top: 0px; }

.hover-text {
    position: absolute;
    top: 98%;                 
    left: 50%;              
    transform: translate(-50%, 60%); 
    font-family: Arial, Helvetica, sans-serif; 
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
    
  .hover-text-outro {
    font-family: Arial, Helvetica, sans-serif; 
    text-align: left; 
    position: absolute;
    top: 98%;              
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  .hover-text-intro {
    font-family: Arial, Helvetica, sans-serif; 
    position: absolute;
    top: 98%;              
    left: 60%;
    transform: translateX(-50%) translateY(6px);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    margin-top: 2px;
    margin-bottom: 0;
    text-align: center; 
    max-width: 50px;    
    word-wrap: break-word; 
  }

  .hover-text-outro p {
    margin-top: 2px;
    margin-bottom: 0;
    text-align: left; 
    max-width: 200px;    
    word-wrap: break-word; 
  }

  .hover-text-intro p {
    margin-top: 2px;
    margin-bottom: 0;
    text-align: left; 
    max-width: 200px;    
    word-wrap: break-word; 
  }

 .hover-text-outro h1 {
    color: #e57a02; 
    font-family: Acier; 
    font-size: 15px; 
    text-align: center; 
    margin-bottom: 2px; 
  }

 .hover-text-intro h1 {
    color: #e57a02; 
    font-family: Acier; 
    font-size: 15px; 
    text-align: center; 
    margin-bottom: 2px; 
  }

  .panel:hover .hover-text {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
  }

  .panel:hover .hover-text-outro {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
  }

  .panel:hover .hover-text-intro {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
  }

  .hover-text p {
    margin-top: 2px;
    margin-bottom: 0;
  }

  #panel1 .hover-text-intro p {
    position: relative;        
    left: 15px;              
  }

  #panel2 .hover-text p {
    position: relative;        
    left: 60px;              
  }

    #panel3 .hover-text p {
    position: relative;         
    left: 60px;             
    }

    #panel7 .hover-text p {
        position: relative;        
        left: 15px;              
    }

    #panel8 .hover-text p {
        position: relative;        
        left: 15px;              
    }

    #panel11 .hover-text-outro p {
        position: relative;        
        left: 20px;              
    }

    #panel9 .hover-text p:nth-of-type(1){
        text-align: center;
        left: 0;             
      }

    #panel10_1 .hover-text p {
        font-size: 15px; 
        position: relative;        
        left: 2px;   
    }

    #panel10_2 .hover-text p {
        font-size: 15px; 
        position: relative;        
        left: 2px;   
    }


    #panel10_3 .hover-text p {
        font-size: 15px; 
        position: relative;        
        left: 2px;
        margin-right: 260px;
        margin-left: 150px;      
    }


    #panel10_4 .hover-text p {
        font-size: 15px; 
        position: relative;        
        left: 2px;   
        margin-right: 250px;   
        text-align: right;
    }


    #panel10_5 .hover-text p {
        font-size: 15px; 
        position: relative;        
        margin-right: 145px;   
        text-align: right;
    }

  h1 {
    color: #e57a02; 
    font-family: Acier; 
    font-size: 15px; 
    text-align: center; 
    margin-bottom: 2px; 
  }

.audio-ui{
    position: absolute;
    right: 10px;
    bottom: 10px;         
    z-index: 1000;      
    width: 180px;         
    padding: 8px;
    border-radius: 10px;
  }
  
  .audio-ui .song-slider{
    width: 100%;
    margin: 0 0 -30px 0;
  }
  .audio-ui .time-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }
  
  .audio-ui .current-time,
  .audio-ui .song-duration{
    font-size: 11px;
    line-height: 1;
    color: #fff;
    opacity: .9;
  }

  .audio-ui .seek-bar{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;      
    border-radius: 6px;
    background: #098796;
    overflow: hidden;
    cursor: pointer;
  }
  
  .audio-ui .seek-bar::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 1px; height: 16px; 
    box-shadow: -300px 0 0 300px #d5eebb;
  }

  .audio-ui .seek-bar::-moz-range-thumb{
    width: 0; height: 0; border: 0; 
  }

  .audio-ui .seek-bar::-moz-range-progress{ background: #3ec7d7; height: 3px; }
  .audio-ui .seek-bar::-moz-range-track{ background: #098796; height: 3px; }
  
  .audio-ui .controls{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    width: 100%;
  }

  .audio-ui .play-btn{
    width: 36px; height: 36px; 
    border-radius: 50%;
    background: #ff8b1e;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    margin-left: -60px;   
  }
  .audio-ui .play-btn span{
    position: absolute;
    top: 50%;
    left: 28%;
    transform: translateY(-50%);
    width: 7px; height: 18px;
    border-radius: 2px;
    background: #edccad;
    transition: .3s;
    clip-path: polygon(0 0,100% 0,100% 100%,0% 100%);
  }

  .audio-ui .play-btn span:nth-child(2){
    left: 55%;
  }

  .audio-ui .play-btn.pause span:nth-child(2){ transform: translateY(-50%) scaleY(0); }
  .audio-ui .play-btn.pause span:nth-child(1){
    width: 40%;
    left: 52%;
    transform: translate(-50%,-50%);
    border-radius: 0;
    clip-path: polygon(0 0,100% 50%,100% 50%,0 100%); 
  }
  
  .panel.active img { opacity: 1; }

.panel.active .hover-text,
.panel.active .hover-text-intro,
.panel.active .hover-text-outro {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}