body {
    font-family: 'Work Sans', sans-serif;
}

.hidden {
    display: none;
}

.word-button svg text {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px; /* A base size for SVG scaling */
    fill: currentColor;
}

.bg-connections-yellow {
    background-color: #F9DF69;
}

.bg-connections-green {
    background-color: #A0C35A;
}

.bg-connections-blue {
    background-color: #B5E1EA;
}

.bg-connections-purple {
    background-color: #D8B4E2;
}

@keyframes scale-up {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }
    20%, 80% {
        transform: translateX(2px);
    }
    30%, 50%, 70% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.scale-up {
    animation: scale-up 0.5s ease-in-out;
}

.shake {
    animation: shake 0.4s ease-in-out;
}

.fade-out {
    animation: fade-out 0.5s ease-in-out;
}

@keyframes scale-up-down {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.scale-up-down {
    animation: scale-up-down 0.3s ease-in-out;
}