@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

*{
    padding: 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
  }
  
  
  .box {
    width: 100%;
    height: 500px;
    background-image:
      radial-gradient(at 40% 20%, #8A2BE2 0, transparent 40%),
      radial-gradient(at 80% 0%, #4682B4 0, transparent 40%),
      radial-gradient(at 0% 50%, #4169E1 0, transparent 40%),
      radial-gradient(at 80% 50%, #6495ED 0, transparent 40%),
      radial-gradient(at 0% 100%, #00BFFF 0, transparent 40%),
      radial-gradient(at 80% 100%, #87CEEB 0, transparent 40%),
      radial-gradient(at 0% 0%, #483D8B 0, transparent 40%);
  }
  
  .box2 {
    width: 100%;
    height: 500px;
    background-image:
      radial-gradient(at 40% 20%, #8A2BE2 0, transparent 40%),
      radial-gradient(at 80% 0%, #4682B4 0, transparent 40%),
      radial-gradient(at 0% 50%, #4169E1 0, transparent 40%),
      radial-gradient(at 80% 50%, #6495ED 0, transparent 40%),
      radial-gradient(at 0% 100%, #00BFFF 0, transparent 40%),
      radial-gradient(at 80% 100%, #87CEEB 0, transparent 40%),
      radial-gradient(at 0% 0%, #483D8B 0, transparent 40%);
  }

@media (max-width: 768px) {
    .box, .box2 {
        height: 400px;
    }
}

/* For mobile phones */
@media (max-width: 480px) {
    .box, .box2 {
        height: 300px;
    }
}