portfolio/app/globals.css

/* app/globals.css */

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

/* Custom Global Styles */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    background: radial-gradient(circle at 20% 20%, #ff8185, transparent 25%),
    radial-gradient(circle at 80% 80%, #ffaa91, transparent 25%),
    radial-gradient(circle at 50% 50%, #fb7fd9, transparent 25%),
    radial-gradient(circle at 30% 70%, #9b6fff, transparent 25%),
    radial-gradient(circle at 70% 30%, #ff8edf, transparent 25%);
    background-size: 200% 200%;
    animation: bubbleAnimation 60s ease infinite;
}

@keyframes bubbleAnimation {
    0% {
        background-position: 0 0;
        transform: rotate(0deg) scale(1.5);
    }
    2.5% {
        background-position: 5% 5%;
        transform: rotate(9deg) scale(1.5);
    }
    5% {
        background-position: 10% 10%;
        transform: rotate(18deg) scale(1.5);
    }
    7.5% {
        background-position: 15% 15%;
        transform: rotate(27deg) scale(1.5);
    }
    10% {
        background-position: 20% 20%;
        transform: rotate(36deg) scale(1.5);
    }
    12.5% {
        background-position: 25% 25%;
        transform: rotate(45deg) scale(1.5);
    }
    15% {
        background-position: 30% 30%;
        transform: rotate(54deg) scale(1.5);
    }
    17.5% {
        background-position: 35% 35%;
        transform: rotate(63deg) scale(1.5);
    }
    20% {
        background-position: 40% 40%;
        transform: rotate(72deg) scale(1.5);
    }
    22.5% {
        background-position: 45% 45%;
        transform: rotate(81deg) scale(1.5);
    }
    25% {
        background-position: 50% 50%;
        transform: rotate(90deg) scale(1.5);
    }
    27.5% {
        background-position: 55% 55%;
        transform: rotate(99deg) scale(1.5);
    }
    30% {
        background-position: 60% 60%;
        transform: rotate(108deg) scale(1.5);
    }
    32.5% {
        background-position: 65% 65%;
        transform: rotate(117deg) scale(1.5);
    }
    35% {
        background-position: 70% 70%;
        transform: rotate(126deg) scale(1.5);
    }
    37.5% {
        background-position: 75% 75%;
        transform: rotate(135deg) scale(1.5);
    }
    40% {
        background-position: 80% 80%;
        transform: rotate(144deg) scale(1.5);
    }
    42.5% {
        background-position: 85% 85%;
        transform: rotate(153deg) scale(1.5);
    }
    45% {
        background-position: 90% 90%;
        transform: rotate(162deg) scale(1.5);
    }
    47.5% {
        background-position: 95% 95%;
        transform: rotate(171deg) scale(1.5);
    }
    50% {
        background-position: 100% 100%;
        transform: rotate(180deg) scale(1.5);
    }
    52.5% {
        background-position: 95% 95%;
        transform: rotate(189deg) scale(1.5);
    }
    55% {
        background-position: 90% 90%;
        transform: rotate(198deg) scale(1.5);
    }
    57.5% {
        background-position: 85% 85%;
        transform: rotate(207deg) scale(1.5);
    }
    60% {
        background-position: 80% 80%;
        transform: rotate(216deg) scale(1.5);
    }
    62.5% {
        background-position: 75% 75%;
        transform: rotate(225deg) scale(1.5);
    }
    65% {
        background-position: 70% 70%;
        transform: rotate(234deg) scale(1.5);
    }
    67.5% {
        background-position: 65% 65%;
        transform: rotate(243deg) scale(1.5);
    }
    70% {
        background-position: 60% 60%;
        transform: rotate(252deg) scale(1.5);
    }
    72.5% {
        background-position: 55% 55%;
        transform: rotate(261deg) scale(1.5);
    }
    75% {
        background-position: 50% 50%;
        transform: rotate(270deg) scale(1.5);
    }
    77.5% {
        background-position: 45% 45%;
        transform: rotate(279deg) scale(1.5);
    }
    80% {
        background-position: 40% 40%;
        transform: rotate(288deg) scale(1.5);
    }
    82.5% {
        background-position: 35% 35%;
        transform: rotate(297deg) scale(1.5);
    }
    85% {
        background-position: 30% 30%;
        transform: rotate(306deg) scale(1.5);
    }
    87.5% {
        background-position: 25% 25%;
        transform: rotate(315deg) scale(1.5);
    }
    90% {
        background-position: 20% 20%;
        transform: rotate(324deg) scale(1.5);
    }
    92.5% {
        background-position: 15% 15%;
        transform: rotate(333deg) scale(1.5);
    }
    95% {
        background-position: 10% 10%;
        transform: rotate(342deg) scale(1.5);
    }
    97.5% {
        background-position: 5% 5%;
        transform: rotate(351deg) scale(1.5);
    }
    100% {
        background-position: 0 0;
        transform: rotate(360deg) scale(1.5);
    }
}