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

.bg-body {
    background-size: 10px 10px;
    background-image:
        linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
    position: fixed;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.me-image {
    animation: bg-move 30s linear infinite forwards,
        border-move 15s linear infinite forwards;
}

@keyframes border-move {
    0% {
        border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
    }

    10% {
        border-radius: 39% 61% 38% 62% / 53% 54% 46% 47%;
    }

    20% {
        border-radius: 56% 44% 52% 48% / 57% 35% 65% 43%;
    }

    30% {
        border-radius: 41% 59% 45% 55% / 33% 56% 44% 67%;
    }

    40% {
        border-radius: 46% 54% 60% 40% / 55% 74% 26% 45%;
    }

    50% {
        border-radius: 44% 56% 22% 78% / 31% 74% 26% 69%;
    }

    60% {
        border-radius: 31% 69% 32% 68% / 31% 71% 29% 69%;
    }

    70% {
        border-radius: 44% 56% 60% 40% / 63% 36% 64% 37%;
    }

    80% {
        border-radius: 46% 54% 38% 62% / 44% 48% 52% 56%;
    }

    90% {
        border-radius: 66% 34% 57% 43% / 49% 51% 49% 51%;
    }

    100% {
        border-radius: 51% 49% 34% 66% / 39% 66% 34% 61%;
    }
}

* {
    font-family: Reddit Mono;
}