@layer reset, base, preflights, primeui, components, icons, default, shortcuts, utilities;

@import url("./reset.css") layer(reset);

@layer base {
    :root {
        background-color: #f4f4f4;
        line-height: 1.5;
    }

    body {
        display: flex;
        flex-direction: column;
    }
}

.liquid {
    /* background-color: #02b8f3; */
    background: linear-gradient(to top, #02b8f3, #02b7f300);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: inset 5px -5px 25px #45cefb, inset -5px 0px 25px #45cefb;
}

.liquid::after {
    content: "";
    width: 200%;
    height: 150%;
    background: white;
    z-index: 1;
    position: absolute;
    left: -40%;
    top: -90%;
    border-radius: 45%;
    animation: animate 5s linear 0.2s infinite;
    animation-play-state: paused;
}

.liquid::before {
    content: "";
    width: 200%;
    height: 150%;
    /* background-color: #45cefb; */
    background: linear-gradient(to top, #45cefb, #45cefb00);
    z-index: 1;
    position: absolute;
    left: -40%;
    top: -90%;
    border-radius: 40%;
    animation: animate 5s linear 0s infinite;
    animation-play-state: paused;
}

.group:hover .liquid::after,
.group:hover .liquid::before {
    animation-play-state: running;
}

@keyframes animate {
    from {
        transform: rotate(var(--start));
    }

    to {
        transform: rotate(var(--end));
    }
}

.liquid2 {
    /* background-color: #02b8f3; */
    background: linear-gradient(to top, #02b8f3, #02b7f300);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: inset 5px -5px 25px #45cefb, inset -5px 0px 25px #45cefb;
}

.liquid2-1 {
    content: "";
    width: 200%;
    height: 150%;
    /* background-color: #45cefb; */
    background: linear-gradient(to top, #45cefb, #45cdfb4e);
    z-index: 1;
    position: absolute;
    left: -40%;
    top: -90%;
    border-radius: 45%;
}

.liquid2-2 {
    content: "";
    width: 200%;
    height: 150%;
    /* background: #9fe8ff; */
    background: linear-gradient(to top, #9fe8ff, #9fe8ff4e);
    z-index: 1;
    position: absolute;
    left: -40%;
    top: -90%;
    border-radius: 50%;
}

.liquid2-3 {
    content: "";
    width: 200%;
    height: 150%;
    background: white;
    z-index: 1;
    position: absolute;
    left: -40%;
    top: -90%;
    border-radius: 55%;
}

.group:hover .liquid2-1,
.group:hover .liquid2-2,
.group:hover .liquid2-3 {
    animation-play-state: running;
}

.group:hover .liquid2-1 {
    animation: animate 3s linear 0s infinite;
    --start:0deg;
    --end: 360deg;
}

.group:hover .liquid2-2 {
    animation: animate 3s linear 0.2s infinite;
    --start:0deg;
    --end: 360deg;
}

.group:hover .liquid2-3 {
    animation: animate 3s linear 0.4s infinite;
    --start:0deg;
    --end: 360deg;
}