.section_3
{
    position: relative;
    width: 393px;
    height: 665px;
    background: #e12516;
    flex-shrink: 0;
    overflow: hidden;
    
}

.section_3
{
    --color: gray;
    background-image: linear-gradient( 0deg , transparent 24% , var(--color) 25% , var(--color) 26% ,  transparent 27% ,  transparent 74% , var(--color) 75% , var(--color) 76% , transparent 77% ,  transparent ) , 
    linear-gradient( 90deg , transparent 24% , var(--color) 25% , var(--color) 26% ,  transparent 27% ,  transparent 74% , var(--color) 75% , var(--color) 76% , transparent 77% ,  transparent );
    
    background-size: 100px 100px ;
}


.section_3 .letter-box
{
    position: absolute;
    width: 393px;
    height: 665px;
    overflow-x: auto;
    overflow-y: hidden; 
    direction: rtl;
    /* border: 5px solid black; */ 
     
}


.section_3 .letter-box .letter
{
    position: absolute;
    width: 665px;
    height: 393px;
    top: 130px;
    left: -170px;
    transform: rotate(90deg);
    direction: ltr;
    display: none;
     /* border: 5px solid blue; */ 
}

 .section_3 .letter-box .letter p
{
    position: absolute;
    margin-left: 40px;
    margin-right: 40px;
    padding: 10px;
    font-family: Emily-Street;
    font-size: 15px;
    line-height:50px;
    word-spacing: 15px;
    color: #1f4eaa;
    font-size: 12px;
    border: 2px solid black;
} 


.section_3 .letter-box .letter p #lyric-radio 
{
    display: none;
} 


.section_3 .letter-box .letter p .click-button 
{
    border: 2px solid black;
    padding: 5px;
}

.section_3 .letter-box .letter p .lyric 
{
    position: relative;
    color: black;
}

.section_3 .lyric .t
 {
    position: relative;
    visibility: hidden;
    display: none;
}

.section_3 .letter p:has(#lyric-radio:checked) .lyric .t 
{
    display: inline-block;
    visibility: hidden;
        
}

.section_3 .lyric .t1
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0.53s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t2
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1.43s;
    animation-fill-mode: forwards;
    
} 

.section_3 .lyric .t3
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.53s;
    animation-fill-mode: forwards;
    
}
.section_3 .lyric .t4
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.87s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t5
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 3.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t6
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 4.40s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t7
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t8
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t9
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 6.10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t10
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 7.10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t11
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 7.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t12
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 8.10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t13
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 8.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t14
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 9.30s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t15
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t16
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 11s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t17
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 12s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t18
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 13s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t19
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 14s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t20
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 15s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t21
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 16s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t22
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 16.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t23
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17.13s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t24
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t25
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 18.10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t26
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 18.80s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t27
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 19.10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t28
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 20.2s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t29
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 21.43s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t30
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 22.7s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t31
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23.90s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t32
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24.47s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t33
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 25.17s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t34
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 25.73s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric .t35
{
    
    animation-name: animatelyrics;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 26.40s;
    animation-fill-mode: forwards;
    
}

@keyframes animatelyrics
{
    from
    {
        visibility: visible;
    }
    to
    {
        visibility: visible;
    }
}



.section_3 .letter-box .letter p #lyric-radio-2
{
    display: none;
} 


.section_3 .letter-box .letter p .click-button-2 
{
    border: 2px solid black;
    padding: 5px;
}

.section_3 .letter-box .letter p .lyric-2 
{
    position: relative;
    color: black;
}

.section_3 .lyric-2 .t2
 {
    position: relative;
    visibility: hidden;
    display: none;
}

.section_3 .letter p:has(#lyric-radio-2:checked) .lyric-2 .t2 
{
    display: inline-block;
    visibility: hidden;
        
}

.section_3 .lyric-2 .t2-1
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-2
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
} 

.section_3 .lyric-2 .t2-3
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    
}
.section_3 .lyric-2 .t2-4
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-5
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-6
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-7
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-8
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5s;    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-9
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 7s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-10
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 8.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-11
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-12
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-13
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-14
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 11s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-15
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 11.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-16
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 12s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-17
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 13s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-18
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 16s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-19
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-20
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-21
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 19s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-22
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 21.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-23
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-24
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-25
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-26
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24.5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-27
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-28
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 27s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-29
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 28s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-30
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 30s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-2 .t2-31
{
    
    animation-name: animatelyrics-2;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 34s;
    animation-fill-mode: forwards;
    
}

  

@keyframes animatelyrics-2
{
    from
    {
        visibility: visible;
    }
    to
    {
        visibility: visible;
    }
}




.section_3 .letter-box .letter p #lyric-radio-3
{
    display: none;
} 


.section_3 .letter-box .letter p .click-button-3
{
    border: 2px solid black;
    padding: 5px;
}

.section_3 .letter-box .letter p .lyric-3
{
    position: relative;
    color: black;
}

.section_3 .lyric-3 .t3
 {
    position: relative;
    visibility: hidden;
    display: none;
}

.section_3 .letter p:has(#lyric-radio-3:checked) .lyric-3 .t3
{
    display: inline-block;
    visibility: hidden;
        
}

.section_3 .lyric-3 .t3-1
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-2
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
} 

.section_3 .lyric-3 .t3-3
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    
}
.section_3 .lyric-3 .t3-4
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-5
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-6
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-7
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 6.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-8
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 6.75s;    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-9
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 7.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-10
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-11
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 12.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-12
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 13.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-13
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 14s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-14
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 14.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-15
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 16.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-16
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-17
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 19s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-18
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 20s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-19
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 21s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-20
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 21.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-21
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 22s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-22
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-23
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-24
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 23.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-25
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-26
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-27
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-28
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 24.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-29
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 25.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-30
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 26s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-31
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 27.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-32
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 27.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-33
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 28s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-34
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 29s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-35
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 29.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-36
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 29.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-37
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 30.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-3 .t3-38
{
    
    animation-name: animatelyrics-3;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 31s;
    animation-fill-mode: forwards;
    
}

  

@keyframes animatelyrics-3
{
    from
    {
        visibility: visible;
    }
    to
    {
        visibility: visible;
    }
}


            /* lyrics -4 */

.section_3 .letter-box .letter p #lyric-radio-4
{
    display: none;
} 


.section_3 .letter-box .letter p .click-button-4
{
    border: 2px solid black;
    padding: 5px;
}

.section_3 .letter-box .letter p .lyric-4
{
    position: relative;
    color: black;
}

.section_3 .lyric-4 .t4
 {
    position: relative;
    visibility: hidden;
    display: none;
}

.section_3 .letter p:has(#lyric-radio-4:checked) .lyric-4 .t4
{
    display: inline-block;
    visibility: hidden;
        
}

.section_3 .lyric-4 .t4-1
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-2
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
    
} 

.section_3 .lyric-4 .t4-3
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
}
.section_3 .lyric-4 .t4-4
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-5
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 2.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-6
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-7
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 5.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-8
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 6.50s;    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-9
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 6.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-10
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 7.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-11
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 8.50s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-12
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-13
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 10.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-14
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 12.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-15
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 13.75s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-16
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 14.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-17
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 15s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-18
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 16.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-19
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-20
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 17.25s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-21
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 19s;
    animation-fill-mode: forwards;
    
}

.section_3 .lyric-4 .t4-22
{
    
    animation-name: animatelyrics-4;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 19.25s;
    animation-fill-mode: forwards;
    
}

@keyframes animatelyrics-4
{
    from
    {
        visibility: visible;
    }
    to
    {
        visibility: visible;
    }
}








            /* letter -2 */
            
.section_3 .letter-box .letter-2
{
    position: absolute;
    width: 665px;
    height: 393px;
    top: 136px;
    left: -140px;
    transform: rotate(90deg);
    direction: ltr;
    display: none;
    /* border: 1px solid yellow; */
}            
            
.section_3 .letter-box .letter-2 p
{
    position: absolute;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 40px;
    padding: 10px;
    font-family: Emily-Street;
    font-size: 15px;
    line-height:50px;
    word-spacing: 15px;
    color: #1f4eaa;
    font-size: 12px;
    border: 2px solid black;
}            











 .section_3 .password-box
{
    position: absolute;

    width: 280px;
    padding: 25px;

    top: -50px;
    left: 50px;

    transform: rotate(90deg) scaley(0.8) scalex(1.1);


    text-align: center;
    z-index: 10;
    
}



.section_3 #password
{
    width: 180px;
    height: 45px;
    transform: translatex(-10px);
    margin-bottom: 20px;

    font-size: 25px;
    text-align: center;

    letter-spacing: 8px;

    border: 3px solid black;
    outline: none;
}


.section_3 .keypad
{
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    width: 210px;

    margin: auto;
    
    direction: ltr;
}


.section_3 .keypad button
{
    height: 50px;
    width: 50px;

    font-size: 20px;
    font-weight: bold;

    background: #087b77;
    color: white;

    border-radius: 12px;

    cursor: pointer;

    box-shadow: 0 5px 0 #cdcca2;

    transition: 
        transform 0.1s ease,
        box-shadow 0.1s ease,
        background 0.2s ease;
}


.section_3 .keypad button:hover
{
    background: #09948f;
}


.keypad button:active
{
    transform: translateY(5px);
    box-shadow: 0 0 0 black;
}

.section_3 .keypad button:active
{
    transform: scale(0.95);
}


.section_3 .login-btn
{
    width: 210px;
    height: 50px;

    margin-top: 18px;

    font-size: 18px;
    font-weight: bold;

    background: black;
    color: white;

    border: 3px solid black;
    border-radius: 12px;

    cursor: pointer;

    box-shadow: 0 5px 0 #087b77;

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        background 0.2s ease;
}


.section_3 .login-btn:hover
{
    background: #222;
}


.section_3 .login-btn:active
{
    transform: translateY(5px);
    box-shadow: 0 0 0 #087b77;
}

.section_3 #password-message
{
    margin-top: 10px;
}


 .section_3 .letter-content
{
    display: none;
}

.section_3 .instructions
{
    position: absolute;
    width:300px;
    height: 200px;
    top: 100px;
    left: 270px;
    font-size: 50px;
    font-family: Story-Maker;
    color: #cdcca2;
}