* {
    font-family: "Arial", system-ui, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid;
    font-size: 20px;
}

table th {
    text-align: left;
    padding: 4px;
    border: 1px solid;
}

table td {
    padding: 4px;
    border: 1px solid;
}

/* Medium-sized screens (e.g., tablets) */
@media (max-width: 1199px) {
    table {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Small-sized screens (e.g., mobile phones) */
@media (max-width: 959px) {
    table {
        font-size: 14px;
        line-height: 1.4;
    }
}



    const speakElements = document.querySelectorAll('[data-speak]') 

    function speakText(text) {
        if ('speechSynthesis' in window) {
            const utterance = new SpeechSynthesisUtterance(text);
    
            utterance.lang = 'de-DE'; // Set language, e.g., 'en-US' for English
            utterance.rate = 1; // Speed of narration (1 is normal, adjust as needed)
            utterance.pitch = 1; // Pitch of narration (1 is normal)
    
            window.speechSynthesis.speak(utterance);
        } else {
            console.error('Text-to-Speech is not supported in this browser.');
        }
    }

    function speak(e) {
        const el = e.target.parentElement;
        console.log(el, e)
        const emoji = el.querySelector(".swap")
        const word = el.querySelector(".word").textContent
        
        const originalSize = emoji.style.fontSize;
        speakText(word)
        emoji.style.fontSize = '44px'
        setTimeout(() => {
            emoji.style.fontSize = originalSize
        }, 250)
    }
    speakElements.forEach(el => el.addEventListener("click", speak))