:root{
    --tap-radius: 8vw;
    --tap-color: rgba(217, 219, 200, 1);
    --tap-color-faded: rgba(11, 63, 121, 0);
}

#tap {
    position: absolute;
    display: flex;
    width: 4vw;
    aspect-ratio: 1/1;
    bottom: 3vw;
    right: 4vw;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none; 
}

#tap>div:nth-child(1) {
    position: absolute;
    display: flex;
    width: 2vw;
    aspect-ratio: 1/1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 0.75vw solid rgb(0 0 0);
    border-radius: 100%;
    background: rgba(29, 64, 75, 0.66);
    box-shadow: 0 0 2vw 0 #5b7b8b;
    z-index: 2;
}

#tap>div:nth-child(2) {
    position: absolute;
    width: 4vw;
    aspect-ratio: 1/1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: var(--tap-color);
    z-index: 1;

    --tap-time: 2s;
    /* Animation */
    animation: tap-animation var(--tap-time) ease-out infinite;
    -webkit-animation: tap-animation var(--tap-time) ease-out infinite;
    -moz-animation: tap-animation var(--tap-time) ease-out infinite;
    -o-animation: tap-animation var(--tap-time) ease-out infinite;
    -ms-animation: tap-animation var(--tap-time) ease-out infinite;
}

/* Animations */

@keyframes tap-animation {
    0% {
        width: 4vw;
        background: var(--tap-color);
    }


    50% {
        width: var(--tap-radius);
        background: var(--tap-color-faded);
    }

    100% {
        width: var(--tap-radius);
        background: var(--tap-color-faded);
    }
}



/* === Media === */

/* Portait */
@media (orientation: portrait) {
    #tap {
        bottom: 30vw;
        right: 20vw;
    }   

    #tap>div:nth-child(1) {
        width: 6vw;
        border: 1.5vw solid rgb(0 0 0);
    }

    #tap>div:nth-child(2) {
        width: 8vw;
    }
}