#scene_text {
    position: absolute;
    left: 3rem; bottom: 3rem; width: 27rem; height: 26rem;
    background-color: rgba(0, 66, 55, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    -webkit-backdrop-filter: blur(20px);
    z-index: 99;
    opacity: 0;
    transform: scale(0.85);
    transform-origin: left bottom;
    pointer-events: none;
    transition: 
        border-radius var(--transition-duration), 
        left var(--transition-duration),
        bottom var(--transition-duration),
        width var(--transition-duration),
        height var(--transition-duration),
        opacity var(--transition-duration),
        transform var(--transition-duration);
}

#scene_text.expand {
    left: 0; bottom: 0; width: 100%; height: 100%;
    border-radius: 0rem;
}

@media (width < 500px) {
    #scene_text {
        left: 0; bottom: 0; width: 100%; height: 100%;
        border-radius: 0rem;
    }        
}

body.scene_text #scene_text {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

#scene_text > .icon {
    position: absolute;
    left: 1rem; top: 0.5rem; width: 4rem; height: 4rem;
    transition: 
        left var(--transition-duration),
        top var(--transition-duration),
        width var(--transition-duration),
        height var(--transition-duration);
}

#scene_text.expand > .icon {
    left: 2rem; top: 1.5rem; width: 6rem; height: 6rem;
}

#scene_text .btn {
    position: absolute;
    top: 0.5rem; width: 4rem; height: 4rem;
    transition: 
        right var(--transition-duration),
        top var(--transition-duration),
        width var(--transition-duration),
        height var(--transition-duration);
}

#scene_text.expand .btn {
    top: 2rem; width: 6rem; height: 6rem;
}

#scene_text .btn .icon {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

#scene_text button.close {
    right: 1.0rem; 
}

#scene_text button.expand {
    right: 5rem;
}

#scene_text.expand button.close {
    right: 2rem; 
}

#scene_text.expand button.expand {
    right: 9rem;
}


#scene_text button.expand .icon {
    opacity: 0; transition: opacity var(--transition-duration);
}

#scene_text.expand button.expand .icon.collapse,
#scene_text:not(.expand) button.expand .icon.expand {
    opacity: 1;
} 

#scene_text .text_stage {
    position: absolute;
    left: 1rem; top: 5rem; right: 0rem; bottom: 2rem;
    transition: 
        left var(--transition-duration),
        top var(--transition-duration),
        right var(--transition-duration),
        bottom var(--transition-duration);
}

#scene_text .text_stage > div:first-child {
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    width: calc(100% - 2.5rem);
    height: 100%;
    padding: 1rem 0rem 0rem 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2rem;
    color: white;
    transition: 
        font-size var(--transition-duration),
        padding var(--transition-duration);
}

#scene_text.expand .text_stage {
    left: 25%; top: 16%; right: 25%; bottom: 16%;
}

#scene_text.expand .text_stage > div:first-child {
    font-size: 2.0rem;
    padding: 1rem 2rem 0rem 1rem;
}

@media (width < 890px) {
    #scene_text {
        left: 0; bottom: 0; width: 100%; height: 100%;
        border-radius: 0rem;
    } 
    #scene_text > .icon {
        left: 2rem; top: 1.5rem; width: 6rem; height: 6rem;
    }  
    #scene_text .btn {
        top: 2rem; width: 6rem; height: 6rem;
    }
    #scene_text button.expand {
        display: none;
    }   
    #scene_text .text_stage {
        left: 2rem; top: 9rem; right: 2rem; bottom: 3rem;
    }
    
    #scene_text .text_stage > div:first-child {
        font-size: 1.6rem;
        /* padding: 1rem 2rem 0rem 1rem; */
    }  
}