body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: hidden;
}
	
	/*.main-container {
    display: flex;
    gap: 20px; 
    flex-wrap: wrap;
	align-items: flex-start;
    padding: 10px;
    max-width: 95%;
    margin: 0 auto;
} */
	
	.main-container {
    display: flex;
    gap: 20px; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    align-items: flex-start;
    padding: 10px;
    max-width: 100%; /* Use 100% to prevent shrinking */
    box-sizing: border-box; /* Include padding and border in width */
    margin: 0 auto; /* Center the container */
    justify-content: center; /* Center items within the container */
    overflow-x: hidden; /* Prevent horizontal overflow */
    overflow-y:hidden;
}
	
    .container {
    padding: 10px;
    max-width: 95%;
    margin: 0 auto;
    display: flex; /* Align children horizontally */
    flex-wrap: wrap; /* Allow wrapping to handle small screens */
    gap: 20px; /* Space between items */
	justify-content: space-between;
    }
	
	.rcontainer {
    padding: 10px;
    max-width: 50%;
    margin: 0 auto;
    display: flex; /* Align children horizontally */
    flex-wrap: wrap; /* Allow wrapping to handle small screens */
    gap: 20px; /* Space between items */
	justify-content: space-between;
	flex-direction: column;
    }

	.member-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-bottom: 20px;
    max-width: 40vw;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
	
  .gold-sponsors {
         border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-bottom: 20px;
	max-width: 40vw;
	align-items: flex-start;
	}
	
	.event-pictures {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-bottom: 20px;
    max-width: 40vw; 
    width: 100%;
}
	
	h2 {
        font-size: 1.5em;
        font-weight: bold;
        color: #6c89c6;
        margin: 10px; 
    }
	
	.event-pictures h3{
		font-size: 1.3em;
		font-weight: bold;
		 color: #6c89c6;
        margin: 10px; 
	}
	
	.login-box {
	/* display: none; */
    gap: 20px; /* Space between the columns */
    max-width: 40vw;
    margin-bottom: 20px; /* Space between the boxes */
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;	
	text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);	
    box-sizing: border-box;
	width: 100%;
}

	.login-title {
    text-align: left; 
    margin-bottom: 20px; 
}
	
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-input {
    width: 80%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

	.login-button {
    width: 50%;
    padding: 10px;
    background-color: #6c89c6;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
	margin: 0 auto;
}

	.login-p{
		text-align: left;
		margin-top: 15px;
	}
	
	.login-box a{
		text-decoration: none;
		color: #6c89c6;
	}
	
	.login-box a:hover{
		text-decoration: underline;
		color: #385591;
	}

.login-button:hover {
    background-color: #385591;
	}

.not-a-member {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
}
	
	
    .member-image {
        flex-shrink: 0;
        text-align: left;
        margin-right: 20px;
    }

    .member-image img {
        border-radius: 8px;
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    .member-contact {
        margin-top: 10px;
    }

    .member-name {
        font-size: 1.2em;
        margin: 10px 0 5px;
    }

    .member-email,
    .member-phone {
        font-size: 0.9em;
        margin: 5px 0;
    }

    .member-details {
		flex-grow: 1;
    	text-align: left;
        flex-basis: 50%;
		align-self: flex-start;
    }

    .member-id,
    .member-status,
    .member-since,
    .member-upcoming-games,
    .member-ranking {
        margin: 5px 0;
        font-size: 0.9em;
    }

    .recent-scores-btn:hover {
        background-color: #385591;
    }
	
	.bottom-btn:hover {
        background-color: #d0d0d0;
    }

    .bottom-btn {
        flex-grow: 0;
        padding: 8px;
        background-color: transparent;
        border: none;
        color: #727272;
        cursor: pointer;
        text-align: center;
    }
			
.button-container {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
	
.bottom-buttons-container {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

/* Recent Scores button styling */
.recent-scores-btn {
    padding: 10px 20px;
    background-color: #6c89c6;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-size: 1.2em;
}

    .event-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
	
    .upload-btn {
		display: none;
        padding: 8px 16px;
        background-color: #6c89c6;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 5px;
    }

    .upload-btn:hover {
        background-color: #385591;
    }

    .event-images {
        display: flex;
        justify-content: space-between;
        width: 100%;
		margin-top: 1em;
		margin-bottom: 1em;
    }

    .event-images img {
        width: 40%; /* Adjusts width to fit three images in a line */
        border-radius: 5px;
		width: 75%;
    }

    .see-more-btn {
        padding: 8px 16px;
        color: #6c89c6;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .see-more-btn:hover {
        color: #727272;
    }

    .sponsor {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .sponsor img {
        width: 200px;
        object-fit: contain;
        margin-right: 20px;
    }

    .sponsor p {
        font-size: 0.9em;
        color: #333;
        margin: 0;
    }
	
	/* Styles for sponsors with text underneath the logo */
    .sponsor-1,
    .sponsor-3,
    .sponsor-5,
	.sponsor-7{
        flex-direction: column; /* Stack the logo above the text */
        align-items: center; /* Center the content */
        text-align: center;
    }

    .sponsor-1 img,
    .sponsor-3 img,
    .sponsor-5 img {
        margin-bottom: 10px; /* Space between logo and text */
    }

    .sponsor-1 p,
    .sponsor-3 p,
    .sponsor-5 p,
	.sponsor-7 p{
        margin-left: auto; /* Center text under logo */
        text-align: center;
        width: 100%;
    }

	  .grey-background {
        background-color: #9D9D9D; /* Light grey background */
		 width: 100%;
    }

	
    .sponsor-2,
    .sponsor-4,
    .sponsor-6 {
        flex-direction: row; /* Logos with text to the right */
		/*background-color: #9D9D9D;*/
    }

    .sponsor-2 p,
    .sponsor-4 p,
    .sponsor-6 p {
        margin: .25em; /* Reset margin for text next to logos */
        text-align: left;
		margin-left: 8px;
		margin-right: 8px;
    }

.content-wrapper {
    flex: 1;
    min-width: 0;
	width: 60%;
}

.upcoming-events, .separate-sponsors{
	flex: 1;
	/*width: 55vw;*/
	width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
	margin-bottom: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}		  
		  
	   .container > :last-child {
        margin-right: 0;
    }

    .event-card {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        border-radius: 8px;
        padding: 15px;
    }

    .event-image {
        flex-shrink: 0;
        width: 20%; /* Width of the image */
        margin-right: 15px; /* Space between the image and the text */
    }

    .event-image img {
        width: 100%;
        border-radius: 8px;
        object-fit: cover;
    }

    .event-details {
        flex-grow: 1; /* To ensure text uses remaining space */
    }

    .event-title {
        font-size: 1.1em;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .event-date {
        font-size: 0.9em;
        color: #727272;
        margin-bottom: 10px;
    }

    .event-description {
        font-size: 0.9em;
        color: #333;
    }
	
	/* Styling for the "Other VGA Events" section */
.other-events {
    margin-top: 20px;
}

.other-event-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.other-event {
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    border-radius: 8px;
	text-align: center; 
}

.other-event:last-child {
    margin-right: 0; /* Remove margin for the last item in each row */
}

.other-event h4 {
    font-size: 1em;
    margin-bottom: 5px;
}
	
	.event-logo {
    margin-bottom: 10px;
}
	
	.event-logo img {
    width: 100%; /* Adjust width as necessary */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space between the logo and event title */
}
	
.other-events img{
	   height: 15vh; /* Set the height relative to the viewport height */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image fits within the set height */
    max-height: 100px; /* Optional: Set a maximum height for larger screens */
	}
	
.other-event p {
    font-size: 0.9em;
    color: #727272;
}
	
.other-sponsors {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 5 columns */
    grid-template-rows: repeat(6, auto); /* 4 rows */
    gap: 8px; /* Space between logos */
}

.sponsor-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
    background-color: #ffffff;
    border-radius: 6px;
}

.sponsor-logo img {
   max-width: 100%;
    height: auto;
    object-fit: contain; 
}

/* Responsive Adjustments */
	
@media (max-width: 1980px) {
	.other-events {
    text-align: center; /* Centers the section title */
    margin: 20px 0;
}

.other-event-row {
    justify-content: center; /* Align rows in the center */
    margin-bottom: 20px; /* Space between rows */
}

.other-event {
    width: 200px; /* Adjust width as needed */
}

h4 {
    font-size: 1rem; /* Adjust heading size as needed */
    margin: 5px 0; /* Space around heading */
}

p {
    font-size: 0.9rem; /* Adjust paragraph size */
    margin: 0; /* Remove default margins */
    color: #555; /* Optional: Adjust text color */
}

	}

@media (max-width: 1150px)	{
	
	
	  .event-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .sponsor-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
	
	.sponsor-0,	
    .sponsor-2,
    .sponsor-4,
    .sponsor-6 {
        flex-direction: column; /* Changes layout to vertical */
        align-items: center; /* Center-align the items */
        text-align: center; /* Center-align the text */
    }

	.sponsor-0 img,
    .sponsor-2 img,
    .sponsor-4 img,
    .sponsor-6 img {
        margin-bottom: 10px; /* Adds space between the logo and the text */
    }

	.sponsor-0 p,	
    .sponsor-2 p,
    .sponsor-4 p,
    .sponsor-6 p {
        width: 100%; /* Makes the text take full width */
		margin: 15px;
    }
		
	  .sponsor-1 p,
    .sponsor-3 p,
    .sponsor-5 p,
	.sponsor-7 p{
        margin: 15px; /* Adjust margin size as needed */
    }
}
	
@media (max-width: 900px) {
	
.sponsor-0 p, .sponsor-1 p,.sponsor-2 p,.sponsor-3 p,
	.sponsor-4 p,.sponsor-5 p,.sponsor-6 p,.sponsor-7 p {
		font-size: 2vw;
	}
	
	  .event-images img {
        width: 90%;
        border-radius: 3px;
		align-content: center;
    }

    .sponsor-grid {
        gap: 10px;
    }

    .sponsor-logo img {
        max-width: 90%;
    }

    .member-image {
        flex-basis: 100%; /* Adjusts image size on small screens */
    }
	
	
	.container {
        padding: 0 15px;
    }


    .button-container, .bottom-buttons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bottom-btn {
        flex: 1 1 45%;
        margin: 5px;
    }

    .event-card, .other-event {
        flex-direction: column;
        text-align: center;
    }

    .event-details {
        margin: 10px 0;
    }

    .header-title {
        font-size: 1.8rem;
        text-align: center;
    }

    .member-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
	
	.member-details {
		align-items: center;
	}

    .member-image {
        margin-bottom: 20px;
    }

    .gold-sponsors .sponsor {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .gold-sponsors .sponsor img {
        max-width: 80%;
    }
	
 .other-event-row {
        display: grid;
        grid-template-columns: 1fr; /* Single column layout */
        gap: 10px; /* Spacing between rows */
    }

    .other-event {
        width: 100%; /* Each event takes full width */
    }

    .other-events {
        margin: 0 auto;
        padding: 10px;
    }

}

@media (max-width: 700px) {
    /* Main container layout for stacking content */
    .content-wrapper,
    .main-container,
    .container,
    .rcontainer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%; /* Full width */
        margin: 0 auto;
    }

    /* For rcontainer */
    .rcontainer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        max-width: 95%; /* Full width */
        margin: 0 auto;
    }

    /* Apply consistent width, padding, and centering for all main sections */
    .login-box,
    .event-pictures,
    .gold-sponsors,
    .upcoming-events,
    .separate-sponsors {
        width: 100%;
        max-width: 95%; /* Ensure sections do not exceed max width */
		min-width: 400px;
        margin: 0 auto; /* Center sections */
        padding: 8px; /* Internal padding */
		flex-direction: column;
        box-sizing: border-box; /* Include padding in the width calculation */
        text-align: center; /* Center content */
		align-items: center;
    }
	
	 .member-card {
        width: 100%; /* Ensure it doesn't stretch too wide */
        max-width: 95%; /* Limit the max width */
		 min-width: 400px;
        margin: 0 auto;
        padding: 8px;
        flex-direction: column; /* Stack content vertically */
        align-items: center; /* Center content */
        text-align: center;
        box-sizing: border-box;
    }

    .member-image {
        flex-basis: 100%; /* Image should take up full width */
        text-align: center; /* Center align image */
    }

    .member-details {
        flex-basis: 100%; /* Ensure details section also uses full width */
        text-align: center;
    }

    /* Ensure the gold-sponsors section is centered */
    .gold-sponsors {
        margin: 0 auto;
        text-align: center;
        padding: 8px;
        width: 95%; /* Ensure it has the same width as other sections */
    }

    /* Ensure event-pictures section width matches the others */
    .event-pictures {
        width: 95%; /* Set width to match the other sections */
        max-width: 2000px; /* Maintain consistency */
        padding: 8px;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
    }

    /* Consistent styling for the other sections */
    .upcoming-events,
    .separate-sponsors {
        width: 95%; /* Ensure the sections are aligned in terms of width */
        max-width: 2000px;
        padding: 8px;
        margin: 0 auto;
        text-align: center;
    }

    /* Sponsor grid adjustments */
    .sponsor-grid {
        display: grid;
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
        gap: 15px;
        justify-items: center;
    }

    .sponsor-logo img {
        max-width: 150px; /* Control sponsor logo size */
        margin: auto;
    }

    /* Bottom buttons container styling */
    .bottom-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
        justify-content: center;
        align-items: center;
    }

    .bottom-btn {
        width: 100%;
        padding: 12px;
        text-align: center;
    }
	
	.event-image {
        width: 40%; /* Width of the image */
		align-items: center;
    }
	
	 .event-image img {
        margin: 0 auto; /* Center the image horizontally */
        display: block; /* Ensure the image is treated as a block-level element */
    }
	
    /* Update headers to be more responsive */
    h2 {
        font-size: 1em;
        text-align: center;
    }
	
	.member-name {
        font-size: 1em;
        margin: 7px 0 3px;
    }

    .member-email,
    .member-phone {
        font-size: 0.8em;
        margin: 4px 0;
    }
	
	.member-id,
    .member-status,
    .member-since,
    .member-upcoming-games,
    .member-ranking {
        margin: 4px 0;
        font-size: 0.8em;
		align-content: center;
		text-align: left;
    }

}

@media (max-width: 500px) {
    body {
        overflow-x: hidden; /* Ensure no horizontal scroll */
    }

    .main-container {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .container {
        flex-direction: column;
        align-items: center;
    }

    .rcontainer,
    .login-box,
    .event-pictures,
    .gold-sponsors,
    .upcoming-events,
    .separate-sponsors {
        padding: 0 10px;
        margin: 0 auto;
        width: 100%;
		min-width: 180px;
    }
	
	.login-box {
		margin-top: 10px;
	}

    .member-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
		min-width: 180px;
    }

    .bottom-buttons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding: 4px 0;
    }

    .bottom-btn {
        width: 90%; /* Ensure buttons are responsive */
        max-width: 200px;
        padding: 2px;
        color: #727272;
    }

    .event-image img {
        width: 70%; /* Adjusts width to fit three images in a line */
        border-radius: 3px;
		align-content: center;
    }
	
    .other-event {
        width: 100%;
        text-align: center;
    }
	
	  .event-card {
        align-items: center;
    }

    .event-image {
        width: 40%; /* Width of the image */
        margin: 0px; /* Space between the image and the text */
    }

	
	.sponsor-logo {
    padding: 4px;
}

.sponsor-logo img {
   max-width: 80%;
}
	
	 .member-image {
        text-align: center;
        margin: 0px;
    }

	  .sponsor {
        margin-bottom: 10px;
    }

    .sponsor img {
        width: 150px;
        margin: 0px;
    }
	
}