#twilight-section {
    background: linear-gradient(to bottom, #2C0938 0%, #34274F 50%, #403B62 100%); 
    transition: background-color 0.5s ease;
}

#twilight-section .label {
    color: #FAD4E4; 
    text-shadow: 2px 2px 4px #B58DB6; 
    font-size: 1.5rem; 
}

#twilight-section .twilight-text,
#twilight-section .twilight-text span {
    font-size: 2rem; 
    color: #FAD4E4; 
    -webkit-text-stroke-color: #FAD4E4; 
}

#twilight-section textarea {
    background: #34274F; 
    color: #EAD1DC; 
    border: 1px solid #D1B3C4; 
    font-size: 1rem; 
    padding: 10px; 
    margin-top: 10px; 
}

.twilight-output span {
    animation: twilightGlow 2s infinite;
    display: inline-block;
    color: #FAD4E4; 
}

@media (max-width: 768px) {
    #twilight-section .label,
    #twilight-section .twilight-text {
        text-align: center; 
        margin-right: 0; 
    }

    #twilight-section .textarea-container,
    #twilight-section .twilight-text {
        width: 100%; 
        font-size: 1.5rem; 
    }
}

@keyframes twilightGlow {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 10px #FAD4E4, 0 0 20px #FAD4E4, 0 0 30px #FAD4E4; 
    }
    50% { 
        opacity: 0.5; 
    }
}