:root {
    --element-contrast-background: #1e1e1e;
    --contrast-color: #0e9243;
}

.header {
    height: 100vh;
    min-width: 100%;
    background-image: url('../assets/img/header/campus.webp');
    background-size: cover;
    background-position: bottom 30% right 50%;
}

.sky {
    height: 100vh;
    min-width: 100%;
    background-image: url('../assets/img/header/sky.webp');
    background-size: cover;
    background-position: bottom 30% right 50%;
    animation: skyZoom 15s infinite alternate ease-in-out;
}

@keyframes skyZoom {
    0% {
        background-size: 100% 100%;
    
    }
    50% {
        background-size: 150% 130%;
        background-position: bottom 0% left 100%;
    }
    100% {
        background-size: 180% 150%;
        background-position: bottom 0% left 100%;
    }
}

.title {
    background-color: #28be46;
    color: white;
    padding: 10px 0;
}

.count-card {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 50px;

    img {
        height: 250px;
    }
}

#gift-container {
    background: linear-gradient(135deg, #1e1e1e 0%, #1e1e1e 70%, #0e9243 100%);
    color: white;
}

.footer {
    background-color: var(--element-contrast-background);
    padding: 32px 0;
    color: white;
}