@charset "utf-8";

.rippleContainer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 50vw;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* bottom: 15%; */
    left: 10px;
}
.circle {
    width: 80%;
    height: 80%;
    position: absolute;
    /* border: solid thin #303030; */
    /* border: solid thin #ffffff; */
    border: solid thin #9f763e;
    border-radius: 50%;
    /* animation: wave 2s infinite; */
}
div.circle.layer-0 {
    /* animation-delay: 0s; */
    animation: wave-0 2s infinite;

}
div.circle.layer-1 {
    /* animation-delay: 0.2s; */
    animation: wave-1 2s infinite;

}
div.circle.layer-2 {
    /* animation-delay: 0.4s; */
    animation: wave-2 2s infinite;

}
div.circle.layer-3 {
    /* animation-delay: 0.6s; */
    animation: wave-3 2s infinite;
}

/* @keyframes wave {
    from {
        width: 0%;
        height: 0%;
        box-shadow: 0 0 100px inset #512500;

    }
    to {
        width: 100%;
        height: 100%;
        opacity: 0;
        border: none;
    }
} */
@keyframes wave-0 {
    0% {
        width:  0%;
        height: 0%;
        box-shadow: 0 0 100px inset #512500;
        transform: none;
    }
    6% {
        transform: translateY(10%);
    }
    8% {
        transform: translateY(-10%);
    }
    16% {
        transform: translateY(5%);
    }
    100% {
        width:  100%;
        height: 100%;
        opacity:   0;
        transform: none;
    }
}

@keyframes wave-1 {
    0% {
        width:  0%;
        height: 0%;
        box-shadow: 0 0 100px inset #512500;
        transform: none;
    }
    8% {
        transform: translateY(10%);
    }
    12% {
        transform: translateY(-10%);
    }
    24% {
        transform: translateY(5%);
    }
    100% {
        width:   90%;
        height:  90%;
        opacity:   0;
        transform: none;
    }
}

@keyframes wave-2 {
    0% {
        width:  0%;
        height: 0%;
        box-shadow: 0 0 100px inset #512500;
        transform: none;
    }
    10% {
        transform: translateY(10%);
    }
    16% {
        transform: translateY(-10%);
    }
    32% {
        transform: translateY(5%);
    }
    100% {
        width:   75%;
        height:  75%;
        opacity:   0;
        transform: none;
    }
}

@keyframes wave-3 {
    0% {
        width:  0%;
        height: 0%;
        box-shadow: 0 0 100px inset #512500;
        transform: none;
    }
    10% {
        transform: translateY(10%);
    }
    20% {
        transform: translateY(-10%);
    }
    40% {
        transform: translateY(5%);
    }
    100% {
        width:   50%;
        height:  50%;
        opacity:   0;
        transform: none;
    }
}