:root {
    --circle-color-active: #dbab09;
    --circle-color-inactive: #7c6c21;
}

html,
body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #333;
}

button {
    padding: 3px 20px 3px 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    background-color: white;
    color: black;
    border: none;
    font-weight: bold;
    letter-spacing: 0.05rem;
    border-bottom: 2px solid black;
    border-radius: 5px;
    cursor: pointer;
}
span {
    position: relative;
}

span::after,
span::before {
    content: '';
    height: 7px;
    width: 7px;
    position: absolute;
    background-color: #730415;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 0 0 5px;
    border-radius: 100%;
}

span::after {
    animation: ping 1.5s linear infinite alternate;
}

span::before {
    background-color: red;
    opacity: 0;
    animation: pulse 3s linear infinite;
}

@keyframes ping {
    from {
        background-color: #730415;
    }

    to {
        background-color: red;
    }
}

@keyframes pulse {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 0;
    }

    50% {
        transform: translateY(-50%) scale(1.5);
        opacity: 0.2;
    }

    100% {
        transform: translateY(-50%) scale(1.8);
        opacity: 0;
    }
}