/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    background-color: black;
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevents accidental scroll bars */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns GIF at the top */
    align-items: center;
    height: 100%;
    padding-bottom: 20px; /* Adding bottom padding for all screens */
}

.gif-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide overflow to prevent any breaking */
}

.bg-gif {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Ensures it doesn't exceed 80% of the screen height */
    object-fit: contain; /* Ensure scaling works properly without stretching */
}

/* Styling for the "ENTER" and "CONTACT" links */
.links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.enter-link {
    margin-bottom: 10px; /* Space between "ENTER" and "CONTACT" */
}

.disabled-link {
    color: grey; /* Greyed out for the "Enter" link */
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -0.06em; /* -60 tracking */
    text-decoration: none;
    cursor: not-allowed; /* Show a disabled cursor */
}

/* Contact Link Styling */
.contact-link {
    margin-top: 10px; /* Space between GIF and contact link */
    text-align: center;
}

.contact-link a {
    color: white;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -0.06em; /* -60 tracking */
    text-decoration: none;
}

.contact-link a:hover {
    text-decoration: underline;
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
    .bg-gif {
        max-height: 60vh; /* Reduces the height on smaller screens */
    }

    .contact-link {
        margin-top: 10px; /* Reducing the space between GIF and Contact */
    }

    .contact-link a {
        font-size: 18px; /* Adjust font size for smaller screens */
    }

    .disabled-link {
        font-size: 18px; /* Adjust font size for smaller screens */
    }
}