bady {
    background-color:red;
}
/* Civics App styles */
.speeching-button {
    cursor: pointer;
    animation: colorTransition 2s infinite;
    /* transform-origin: center center; */ /* Set the transform origin to the center */
}

@@keyframes colorTransition {
    0% {
        background-color: grey;
    }

    40% {
        background-color: red;
    }

    70% {
        background-color: orange;
        /*      width: 32px;
        height: 32px;
 */
    }

    100% {
        background-color: green;
    }
}

.result-green {
    color: green;
}

.result-red {
    color: red;
}

m-fadeIn {
    visibility: visible;
    opacity: 1;
    animation: fadein 2000ms steps(5, start) infinite;
}

@@keyframes fadein {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.blink {
    /* animation: blink-animation 2000ms steps(5, start) infinite; */
    animation: blink-animation 100ms infinite;
    -webkit-animation: blink-animation 100ms steps(5, start) infinite;
}

@@keyframes blink-animation {
    to {
        visibility: hidden;
        border-color: yellow;
    }
}

@@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
        border-color: yellow;
    }
}

@@keyframes blink2 {
    50% {
        opacity: 0.0;
        border-color: yellow;
    }
}

.blink2 {
    animation: blink2 100ms step-start 0s infinite;
}