* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
html, body {
            height: 100%;
            margin: 0;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        main {
            flex: 1;
        }
header {
    background:#a8aaae;
    padding: 15px 0;
}


.fade-slide {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideIn 1s ease-out forwards;
}

.fade-slide.delay {
    animation-delay: 0.5s;
}

@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.bouncing-ball {
    width: 20px;
    height: 20px;
    background-color: #007bff;
    border-radius: 50%;
    margin: 0 auto;
    animation: bounce 1s infinite ease-in-out;
}

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