/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY / GLOBAL BACKGROUND */
body {
  min-height: 100vh;
  background-color: #2a0f3d; /* dark purple */
  overflow-x: hidden;
  font-family: system-ui, sans-serif;
}

/* CENTER COLUMN (LIGHT BLUE LINE) */
.center-column {
  position: relative;
  width: 820px; /* change this if you want */
  min-height: 100vh;
  margin: 0 auto;
  background-color: #6fd3ff; /* light blue */
  overflow: hidden;
}

/* SITE CONTENT */
.content {
  position: relative;
  z-index: 2;
  padding: 48px;
  color: #0b1a24;
}

/* FLOATING CIRCLES BASE */
.bg-circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  animation: drift 40s linear infinite;
}

/* LIGHT PURPLE CIRCLES ON DARK BACKGROUND */
.bg-left {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(200, 140, 255, 0.22) 20%,
    transparent 22%
  );
  background-size: 140px 140px;
}

/* DARK BLUE CIRCLES ON LIGHT BLUE COLUMN */
.bg-center {
  background-image: radial-gradient(
    circle,
    rgba(20, 60, 120, 0.35) 20%,
    transparent 22%
  );
  background-size: 90px 90px;
  animation-duration: 25s;
}

/* DIAGONAL FLOAT ANIMATION */
@keyframes drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px -600px;
  }
}