/* Default styles for all devices */
body {
    background-image: url('images/soccerTile.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    /* Set the background color to gray */
    background-color: rgba(255, 255, 255, 0.9);
}

.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.banner,
.homepage-tile {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    text-align: center; /* Center the text horizontally */
    z-index: 2; /* Ensure overlay text is above buttons */
}

.buttons-container {
    position: absolute;
    /* Position the buttons container below the homepage image and overlay text */
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the buttons horizontally */
    flex-wrap: wrap; /* Allow the buttons to wrap to the next line */
    z-index: 1; /* Ensure buttons are behind overlay text */
}

.banner {
    box-shadow: 0 0 10px rgba(60, 60, 60, 2.0); /* Box shadow for the banner */
}

.homepage-tile {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Box shadow for the homepage tile */
}

h1 {
    text-align: center;
}

/* Additional CSS for buttons */
.button-53 {
    background-color: #605859;
    border: 0 solid #E5E7EB;
    color: #fff; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Font weight */
    padding: 10px 20px; /* Padding */
    margin: 5px; /* Margin */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.button-53:focus {
    outline: none; /* Remove focus outline */
}

.button-53:hover {
    background-color: #4d4841; /* Darken background color on hover */
}

/* Adjust layout for small devices */
@media screen and (max-width: 700px) {
    .overlay-text {
        position: relative;
        width: 100%;
        background-color: rgba(0, 0, 0, 1);
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        text-align: center; /* Center the text horizontally */
        margin-top: 10px; /* Add margin to separate from the image */
    }

    .buttons-container {
        position: relative;
        text-align: center; /* Center the buttons horizontally */
        margin-top: 10px; /* Add margin to separate from the image */
        flex-direction: column; /* Display buttons vertically */
    }
}

@media screen and (min-width: 701px) {
    /* Calculate the combined height of the homepage image and overlay text */
    .homepage-tile {
        height: auto; /* Ensure the height is auto to fit the content */
    }
       .overlay-text {
        bottom: 20px; /* Adjust the distance from the bottom */
    }
    .buttons-container {
		
        display: flex; /* Use flexbox */
        justify-content: center; /* Center the buttons horizontally */
        flex-wrap: wrap; /* Allow the buttons to wrap to the next line if necessary */
    }
}
/* Adjust layout for small devices in portrait mode */
@media screen and (orientation: portrait) and (max-width: 700px) {
    .container {
        max-width: 100%; /* Adjust container width to fill the page */
    }
    
    .banner,
    .homepage-tile {
        width: 100%; /* Make banner and homepage tile fill the container width */
    }
    
    .overlay-text {
        width: 90%; /* Adjust overlay text width to fill the container */
    }

    .buttons-container {
        width: 90%; /* Adjust buttons container width to fill the container */
    }
}