/* Modernist Animated Background */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: #121212;
    position: relative;
  }
  
  /* Background container */
  .bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  
  /* Animated shapes */
  .shape {
    position: absolute;
    opacity: 0.15;
    border-radius: 50%;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .shape-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #1a1a2e, #16213e);
    top: -100px;
    left: -100px;
    animation-name: float-1;
  }
  
  .shape-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #0f3460, #16213e);
    bottom: -50px;
    right: -50px;
    animation-name: float-2;
  }
  
  .shape-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(225deg, #1a1a2e, #0f3460);
    top: 50%;
    left: 30%;
    animation-name: float-3;
  }
  
  .shape-4 {
    width: 150px;
    height: 150px;
    background: linear-gradient(315deg, #16213e, #1a1a2e);
    bottom: 20%;
    left: 10%;
    animation-name: float-4;
  }
  
  .shape-5 {
    width: 250px;
    height: 250px;
    background: linear-gradient(90deg, #0f3460, #1a1a2e);
    top: 20%;
    right: 10%;
    animation-name: float-5;
  }
  
  /* Animation keyframes */
  @keyframes float-1 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(100px, 100px) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) rotate(360deg);
    }
  }
  
  @keyframes float-2 {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(-100px, -100px) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) rotate(-360deg);
    }
  }
  
  @keyframes float-3 {
    0% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-50px, 50px) scale(1.2);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }
  
  @keyframes float-4 {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(50px, -30px) scale(1.1) rotate(180deg);
    }
    100% {
      transform: translate(0, 0) scale(1) rotate(360deg);
    }
  }
  
  @keyframes float-5 {
    0% {
      transform: translate(0, 0) scale(1) rotate(0deg);
    }
    50% {
      transform: translate(-70px, 40px) scale(0.9) rotate(-180deg);
    }
    100% {
      transform: translate(0, 0) scale(1) rotate(-360deg);
    }
  }
  
  /* Additional geometric elements */
  .line {
    position: absolute;
    background-color: rgba(86, 128, 233, 0.15);
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .line-1 {
    width: 100%;
    height: 1px;
    top: 25%;
    animation-name: line-move-1;
  }
  
  .line-2 {
    width: 100%;
    height: 2px;
    top: 75%;
    animation-name: line-move-2;
  }
  
  .line-3 {
    width: 1px;
    height: 100%;
    left: 30%;
    animation-name: line-move-3;
  }
  
  .line-4 {
    width: 2px;
    height: 100%;
    left: 70%;
    animation-name: line-move-4;
  }
  
  @keyframes line-move-1 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes line-move-2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes line-move-3 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(20px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  @keyframes line-move-4 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  /* Make sure content stays above the background */
  #container {
    position: relative;
    z-index: 1;
  }