*{
    color: white
}

body, html{
    margin:0
}

/* body{
    background: #301355;
} */

body {
  margin: 0;
  height: 100vh;
  background: #0f172a; /* dark base */
  overflow: hidden;
}

.circle {
  position: absolute;
  background: radial-gradient(circle, rgba(255,0,150,0.5), transparent 70%);
  filter: blur(120px);
}

.circle:nth-child(1) { top: -100px; left: -100px; background: radial-gradient(circle, #f75c03, transparent 70%); animation: move 20s infinite ease-in-out alternate; width: 400px; height: 400px;}
.circle:nth-child(2) { top: 200px; left: 50%; background: radial-gradient(circle, #D90368, transparent 70%); animation: move 15s infinite ease-in-out alternate; width: 500px; height: 500px;}
.circle:nth-child(3) { top: 569px; left: 75%; background: radial-gradient(circle, #BADEFC, transparent 70%); animation: move 18s infinite ease-in-out alternate; width: 400px; height: 400px;}
.circle:nth-child(4) { top: 400px; left: 200px; background: radial-gradient(circle, #04A777, transparent 70%); animation: move 19s infinite ease-in-out alternate; width: 650px; height: 650px;}
.circle:nth-child(5) { top: 250px; left: 600px; background: radial-gradient(circle, rgba(21, 255, 0), transparent 70%); animation: move 25s infinite ease-in-out alternate; width: 750px; height: 750px;}

@keyframes move {
  0% { transform: translate(0, 0); }
  50% {transform: translate(-300px, 50px);}
  100% { transform: translate(200px, -150px); }
}



h1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 500px;
}


.background{
    backdrop-filter: blur(60px);
    width: 100vw;
    height: 100vh;
}


.circle{
    border-radius: 100%;
    width: 550px;
    height: 550px;
}