/* CSS */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    position: relative; /* Ensure relative positioning */
    z-index: 1; /* Ensure it's above the background video */
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Ensure video is behind other content */
}

.bg-video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.overlay {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: rgba(0, 0, 0, 0); /* Adjust overlay color and transparency */
}

.container {
    background: rgba(255, 255, 255, 1); /* Adjust container background color and transparency */
    border-radius: 15px;
    max-width: 600px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    animation: fadeIn 1.5s ease-in-out;
    text-align: center;
    overflow: hidden;
}

/* Header styles */
header img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px; /* Adjust spacing */
}

header p {
    font-size: 1.2em;
    margin: 10px 0;
    color: #0f0000;
}

/* Event table styling */
.event-table {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
    color: #000000;
    margin-left: 2em;
}

.event-table td {
    padding: 10px 0;
    text-align: left;
}

.event-table strong {
    font-weight: bold;
    margin-right: 10px;
}

/* Details and invitation section styles */
.details, .invitation {
    margin: 20px 0;
}

.details h2, .invitation h2 {
    background: -webkit-linear-gradient(#6f50a0, #8c449a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.details p, .invitation p {
    color: #0f0000;
}

/* Sponsored section styles */
.sponsored {
    background: #000000;
    background-size: 200% auto; /* Double the height to animate */
    color: #ffffff; /* Text color */
    padding: 10px 0; /* Adjust vertical padding as needed */
    display: block;
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width calculation */
    margin: 0; /* Remove margin */
    border-radius: 15px;
}

.rainbow-text strong {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sponsored p {
    margin: 0; /* Remove default margin */
}

/* Abundant Rain text gradient */
.abundant-rain {
    background: linear-gradient(to top, #19619b, #7ba1cc); /* Gradient from bottom to top */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Top messages */
.message1, .message2 {
    color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1em 0; /* Adjust padding as needed */
    text-align: center;
}

.message1 {
    background: linear-gradient(to right, white, gold); /* Gold gradient */
    z-index: 998; /* Ensure it's above other content */
}

.message2 {
    background: linear-gradient(to right, gold, white); /* Gold gradient */
    z-index: 999; /* Ensure it's above other content */
    animation: gradientAnimation 30s linear infinite; /* Animation for gradient */
}

.message1 p, .message2 p {
    margin: 0;
    font-weight: bold; /* Set font weight to bold */
    color: black; /* Set text color to black */
}

/* Animation keyframes */
@keyframes gradientAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Media query for mobile */
@media (max-width: 700px) {
    .container {
        position: absolute;
        top: 7em;
        left: 0;
    }
}


@media (max-height: 850px) {
    .container {
        position: absolute;
        top: 7em;
        left: 0;
    }
}

h1 {
    color: #ffffff;
}