body, html {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a6fa5;
    color: #fff;
    overflow: hidden;
}

.container {
    text-align: center;
    z-index: 1;
    position: relative;
}

.bg-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    background-color: rgba(255, 255, 255, 0.2);
    animation: floatAnimation linear infinite;
}

.shape1, .shape5 { width: 80px; height: 80px; }
.shape2, .shape6 { width: 120px; height: 120px; }
.shape3, .shape7 { width: 60px; height: 60px; }
.shape4, .shape8 { width: 100px; height: 100px; }

.shape1 { top: 10%; left: 20%; animation-duration: 5s; }
.shape2 { top: 70%; left: 80%; animation-duration: 6s; }
.shape3 { top: 50%; left: 10%; animation-duration: 4s; }
.shape4 { top: 80%; left: 50%; animation-duration: 5.5s; }
.shape5 { top: 30%; left: 75%; animation-duration: 4.5s; }
.shape6 { top: 85%; left: 25%; animation-duration: 6.5s; }
.shape7 { top: 20%; left: 50%; animation-duration: 5s; }
.shape8 { top: 60%; left: 15%; animation-duration: 4.5s; }

@keyframes floatAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-50px); }
}

h1 {
    font-size: 4em;
    margin-bottom: 0.5em;
}

p {
    font-size: 1.5em;
    margin: 10px 0;
}