body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    /* background: linear-gradient(to top, #035aa6  0%, #1578ce  80%, #4338e6 100%); */
}

.pulse {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
}

.pulse .circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
}

.pulse .circles .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: pulse 5s calc(-1s * var(--i)) linear infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    90% {
        transform: scale(3);
        opacity: 0;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.waves {
    --wave-blank: 5rem;
    --wave-width: 100vw;
    --wave-height: 4rem;
    position: fixed;
    bottom: 0;
    width: var(--wave-width);
    height: calc(var(--wave-height) + var(--wave-blank));
    overflow: hidden;
}

.waves::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--wave-blank);
    background: white;
}

.waves .wave {
    position: absolute;
    bottom: calc(var(--wave-y-offset) * -1 + var(--wave-blank));
    width: 200%;
    height: var(--wave-height);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%0AviewBox='0 24 176 36' preserveAspectRatio='none' shape-rendering='auto'%3E%3Cpath d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' fill='white'%3E%3C/path%3E%3C/svg%3E") 0 0/var(--wave-width) 100%;
    opacity: var(--wave-opacity);
    animation: wave var(--wave-duration) var(--wave-delay) cubic-bezier(0.6, 0.5, 0.4, 0.5) infinite;
}

.waves .wave:nth-child(1) {
    --wave-y-offset: 0px;
    --wave-opacity: 0.7;
    --wave-duration: 7s;
    --wave-delay: -2s;
}

.waves .wave:nth-child(2) {
    --wave-y-offset: 10px;
    --wave-opacity: 0.5;
    --wave-duration: 10s;
    --wave-delay: -4s;
}

.waves .wave:nth-child(3) {
    --wave-y-offset: 20px;
    --wave-opacity: 0.3;
    --wave-duration: 14s;
    --wave-delay: -6s;
}

.waves .wave:nth-child(4) {
    --wave-y-offset: 30px;
    --wave-opacity: 1;
    --wave-duration: 21s;
    --wave-delay: -8s;
}

@keyframes wave {
    from {
        transform: translateX(calc(var(--wave-width) * -1));
    }
    to {
        transform: translateX(0);
    }
}

.main_style {
    background-color: #f3f7ff;
}

.main_style:hover {
    background-color: #f3f7ff;
}

.main_background-style {
    background-color: #f3f7ff !important;
}