html {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #000;
    /* Fallback color, will show if the image can't be loaded */
    background-image: url('rollerblade4.png');
    /* Adds the image as a background */
    color: #fff;
    /* Ensures all text is white by default */
    background-size: contain;
    /* Ensures the background image covers the whole page */
    background-position: right center;
    /* Right-justifies the image and centers it vertically */
    background-repeat: no-repeat;
    /* Prevents image from repeating */
}


@media only screen and (max-width: 640px) {
    body {
        background-image: url(rollerblade_mobile.png);
    }
}

/* Assuming the rest of your CSS stays the same since you already set text and other backgrounds accordingly. */
.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image-row div {
    width: 176px;
    /* Fixed width for each image box */
    height: 150px;
    /* Fixed height for each image box */
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers content vertically */
    align-items: center;
    /* Centers content horizontally */
    border: 2px solid #000;
    background-color: #36454F;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.image-row img {
    max-width: 100%;
    /* Ensures image does not exceed its container width */
    max-height: 100%;
    /* Allows image to scale within the container */
    object-fit: contain;
    /* Ensures the entire image is visible; adds bars if necessary */
    align-self: center;
    /* Center the image specifically in flex context */
    margin-bottom: auto;
    /* Helps in pushing the title to the bottom */
}

.image-name {
    color: #fff;
    font-size: 12px;
    width: 100%;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    /* Ensures font is Helvetica or a fallback */
    position: absolute;
    bottom: 0;
    /* Positions text at the bottom */
    left: 0;
    padding: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover effect for the entire image box */
.image-row div:hover {
    border-color: #FFD700;
    /* Changes border to gold */
    transform: scale(1.05);
    /* Slightly increases the size */
    z-index: 10;
    /* Ensures the zoomed image is above others */
}

/* Hover effect specifically for the images */
.image-row div:hover img {
    opacity: 0.9;
    /* Slightly reduces the image opacity */
}

/* Hover effect for the image name, to make it more prominent on hover */
.image-row div:hover .image-name {
    background-color: rgba(0, 0, 0, 0.7);
    /* Adds a more noticeable background */
    font-weight: bold;
    /* Makes the font bolder */
}

label {
    cursor: help;
    /* Shows a question mark or a help cursor on hover */
}


.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    /* Set background color with some transparency */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    padding: 20px;
    max-width: 300px;
    /* Max width to control sizing while being responsive */
    width: 100%;
    /* Allow width to adjust to the box's content */
    margin: auto;
    /* Center horizontally */
}

.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    /* Ensure the video is in the background */
}

.video {
    min-height: 100%;
    /* Make sure it covers the viewport height */
    height: 100%;
    /* Set height to 100% of the viewport */
    width: auto;
    /* Width adjusts to keep aspect ratio */
    position: absolute;
    top: 0;
    /* Align to the top */
    left: 50%;
    /* Center the video horizontally */
    transform: translateX(-50%);
    /* Center the video */
}

.content {
    position: relative;
    /* Ensure content is above the video */
    color: white;
    /* Change text color if needed */
    text-align: center;
    padding: 20px;
}

.fallback-image {
    display: none;
    /* Hide by default */
    width: 100%;
    /* Adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
    /* Ensure it appears atop the video */
}

/* Show fallback image when the video cannot play */
.video:not(:valid)+.fallback-image {
    display: block;
    /* Show the image if the video does not play */
}

.modal {
    display: none;
    position: fixed;

    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    /* Background overlay */
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(54, 69, 79, 0.85);
    /* Semi-transparent background color */
    color: white;
    /* Text color */
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Optional: semi-transparent border */
    width: 80%;
    max-width: 400px;
    /* Set a max-width to prevent the modal from becoming too wide */
    border-radius: 8px;
    /* Optional: adds rounded corners */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: white;
    /* Change close button color on hover to white */
    text-decoration: none;
    cursor: pointer;
}

.white-italic {
    color: white;
    /* Set the text color to white */
    font-style: italic;
    /* Set the font style to italic */
}

.quote-container {
    position: absolute;
    /* Change to absolute for easier centering */
    top: 50%;
    /* Center vertically in the viewport */
    left: 50%;
    /* Center horizontally in the viewport */
    transform: translate(-50%, -50%);
    /* Offset to center based on its own size */
    padding: 20px;
    /* Adds some padding */
    background-color: transparent;
    /* More transparent background */
    color: #818589;
    /* Text color */
    font-family: 'Lobster', cursive;
    /* Use the Lobster font */
    font-size: 1.5em;
    /* Adjust the font size as needed */
    max-width: 400px;
    /* Control the width */
    border-radius: 8px;
    /* Rounded corners */
    text-align: center;
    /* Center text */
    z-index: 5;
    /* Ensure it stays above other content */
}

.author {
    color: #818589;
    /* Match author text color to quote color */
    font-size: 0.9em;
    /* Smaller font size */
    font-style: normal;
    /* Not italic */
    margin-top: 10px;
    /* Add some space between quote and author */
}

#eventForm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 1000;
    /* Keeps it above other content */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#eventData {
    padding-top: 0px;
    /* To avoid overlap with fixed form */
    margin-top: 20px;
}