@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    img {
        @apply inline-block;
    }
}



/* .circle-wrap {
    width: 300px;
    height: 300px;
    background: #fefcff;
    border-radius: 50%;
    border: 1px solid #cdcbd0;
    position: relative;
} */

/* .circle-wrap .mask,
.circle-wrap .fill {
    width: 300px;
    height: 300px;
    position: absolute;
    border-radius: 50%;
} */

.circle-wrap .mask {
    clip: rect(0px, 300px, 300px, 150px);
}

/* .circle-wrap .inside-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #7f1d64;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} */

/* color animation */

/* 3rd progress bar */
.mask .fill {
    clip: rect(0px, 150px, 300px, 0px);
    background-color: #227ded;
}

.mask.full,
.circle-wrap .fill {
    animation: fill ease-in-out 3s;
    transform: rotate(135deg);
}

@keyframes fill {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(135deg);
    }
}