@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&family=IM+Fell+DW+Pica:ital@0;1&family=Lexend:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=ZCOOL+KuaiLe&display=swap');

:root {
    --primary-font: "PT Sans", sans-serif;
    --title-font: "Lexend", sans-serif;
    --number-font: "Cabin Condensed", sans-serif;
    --chinese-font: "ZCOOL KuaiLe", sans-serif;
    --fun-font: "IM Fell DW Pica", serif;
    --color-sky_blue: #7ad5ff;
}

* {
    margin: 0px;
    padding: 0px;
}

.bg-green {
    background-color: #3eff88 !important;
}

.bg-yellow {
    background-color: rgb(184, 184, 62) !important;
}

.bg-gray {
    background-color: gray !important;
}

.bg-red {
    background-color: rgb(255, 82, 82) !important;
}

.bg-pink {
    background-color: #ffb4db !important;
}


.tf {
    font-family: var(--title-font), 'Courier New', Courier, monospace !important;
}

.ripple-button {
    all: unset;
    display: flex;
    position: relative;
    width: 5rem;
    height: 2.5rem;
    background-color: var(--color-sky_blue);
    justify-content: center;
    align-items: center;
    color: white;
    overflow: hidden;
    border-radius: 4px;
    /* margin: 1rem 0rem 1rem 0rem; */
    padding: .25rem;
    box-shadow: 0px 0px .1rem 0rem #000;
}

.ripple-button:hover {
    cursor: pointer;
}

.ripple-button>.indicator {
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    animation: indicatorRipple;
    animation-duration: 0.5s;
    transform-origin: center center;
    transform: scale(0);
    /* animation-iteration-count: infinite; */
}

@keyframes indicatorRipple {
    to {
        transform: scale(3);
    }
}