body {
    font-family: Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #fff; /*#d6f5df;*/
    overflow-x: hidden; /* Prevent horizontal overflow */
   /* display: flex; /* Use flexbox for layout */
}

header .logo {
   display:none;
}

header .sunflower {
    position: absolute;
    right: 20px;
    width: 100px;
    height: auto;
}
nav.side-menu .logo {
    display: none; /* Hide logo by default */
}

nav.side-menu {
    position: sticky;
    top: 0;
    width: 62px; /* Thin width for the side menu */
    padding-right: 2px;
    padding-left: 2px;
    background: #228B22; /* Forest Green */
    height: 100vh; /* Full viewport height */
    overflow-y: auto;
    transition: width 0.3s; /* Smooth transition for expanding */
    z-index: 999;
}

nav.side-menu .hamburger {
    font-size: 30px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #fff; /* forest green border for the hamburger menu */
    border-radius: 10px; /* Add some padding to the border */
}

nav.side-menu.expanded .hamburger {
    margin: 0 34%;
}

nav.side-menu .menu-items {
    display: none; /* Hide menu items initially */
    flex-direction: column;
    align-items: center;
    z-index: 999;
}

nav.side-menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin: 10px 0;
    padding: 0px;
    background: #006400; /* Dark Green */
    border-radius: 5px;
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
}

nav.side-menu a:hover {
    background: #004d00; /* Darker Green on hover */
}

nav.side-menu.expanded {
    width: 200px; /* Expanded width for the side menu */
}

nav.side-menu.expanded .menu-items {
    display: flex; /* Show menu items when expanded */
}

main {
    padding: 0px;
    background-color: #fff; /*#d6f5df;*/
    flex: 1;
}

#main-logo {
    display: flex;
    justify-content: center; /* Center horizontally */
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%); /* Center the logo */
    width: 30%;
    height: 25%;
}

#main-title {
    display: flex;
    position: absolute;
    font-size: 5rem;
    color: white;
    bottom: 5%;
    right: 5%;
    text-shadow: 
        -1px -1px 0 #006400,  /* Dark Green border */
        1px -1px 0 #006400,
        -1px  1px 0 #006400,
        1px  1px 0 #006400,
        -2px -2px 0 #006400,
        2px -2px 0 #006400,
        -2px  2px 0 #006400,
        2px  2px 0 #006400,
        -3px -3px 0 #006400,
        3px -3px 0 #006400,
        -3px  3px 0 #006400,
        3px  3px 0 #006400,
        -4px -4px 0 #006400,
        4px -4px 0 #006400,
        -4px  4px 0 #006400,
        4px  4px 0 #006400;
}

.video-background {
    position: relative;
    width: 100%;
    height: 100vh; /* Adjust as needed */
    overflow: hidden;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: translate(-50%, -50%);
    z-index: -1; /* Ensure the video is behind other content */
}

.home-section {
    background: url('images/sunrise_blurred.jpg') no-repeat center center;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 0 20px 50px 20px;
    position: fixed; /* Make the section fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Full viewport height */
    z-index: -2; /* Ensure the background is behind other content */
}

#games-filter-date-range-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 20px 0;
    gap: 20px;
    font-size: 1.5rem;
}

#manage-stats-big-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0 20px 0;
}

.modal {
    display: none; /* Hide by default */
    position: fixed; /* Position the modal */
    top: 20%; /* Center vertically */
    left: 30%; /* Center horizontally */
    right: 30%; /* Center horizontally */
    z-index: 899;
    border: 5px solid #228B22; /* Forest Green border */
    background-color: #fff; /* White background */
    box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
    }

.modal label{
    display: flex;
    justify-content: center;
    margin-top: 15px;
    font-size: 1.5rem;
}

.modal label + * {
    font-size: 1.5rem;
}

.edit-modal-fields {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.edit-button {
    width: 100%;
    height: 40px;
}

#edit-game-submit-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 20px 0;
    gap: 20px;
    flex-direction: row-reverse;
}

#edit-game-submit, #delete-game-submit {
    margin: 10px 0 10px 0;
    font-size: 20px;
    color: white;
    background-color: #228B22;
    border-radius: 15px;
    padding: 10px 30px;
}

#delete-game-submit {
    background-color:#e92c2c;
}

.close {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 50px;
    color: #228B22; /* Forest Green */
    cursor: pointer;
}

#manage-players, #manage-players-form {
    display: flex;
    margin: 20px 0 20px 0;
    align-items: center;
    flex-direction: column;
}

#manage-players-form {
    align-items: flex-start;
}

.manage-players-fields {
    display: flex;
    margin-top: 0;
    gap: 30px;
    flex-direction: row;
    align-items: center;
}

#season-filter-container, #games-filter-container, #chemistry-filter-container {
    flex-direction: column;
    margin-top: 100px;
    color: #0c630c;
}

#season-filter-container select, #games-filter-container select,
#chemistry-filter-container select {
    margin: 15px 0 10px 0;
    font-size: 1.5rem;
}

#player-total-stats, #team-totals {
    display: flex;
    margin: 20px 0 20px 0;
    align-items: center;
    flex-direction: column;
    font-size: 1rem;
    width: 100%;
    border: 0;
    border-spacing: 0;
}

#player-total-stats thead {
    display: flex;
    flex-direction: row;
    overflow: auto;
    width: 480px;
}

#player-total-stats tbody, #team-totals tbody {
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 480px;
}

#player-total-stats tbody tr, #team-totals tbody tr {
    display: flex;
    flex-direction: row;
    width: 480px;
}

#player-total-stats thead tr {
    display: flex;
    flex-direction: row;
    width: 480px;
}

#player-total-stats th {
    display: flex; /* Use flexbox to arrange text and image */
    justify-content: space-evenly; /* Space between text and image */
    align-items: center; /* Center items vertically */
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
    width: 96px;
    cursor: pointer;
    vertical-align: middle;
}

#player-total-stats th:hover{
    background-color: #006400;
}

#player-total-stats th img{
    vertical-align: middle;
    width: 20px;
    height: 20px;
}


#player-total-stats tbody td, 
#team-totals tbody td {
    display: flex;
    padding: 5px;
    text-align: center;
    width: 86px;
    justify-content: center;
    flex-direction: column;
}

#player-total-stats td:nth-child(1),
#team-totals td:nth-child(1) {
    text-align: left;
}

#player-total-stats tr:nth-child(odd) {
    background-color: #ddffdd /*#d5dcd8;*/
}

#player-total-stats > tbody > tr {
    cursor: pointer;
}

#player-total-stats > tbody > tr:hover {
    background-color: #006400;
    color: white;
}

.big_container {
    display: flex;
}

#team-totals {
    font-size: 1.25rem;
    font-weight: bold;
}

#team-totals tr {
    background-color: #87de87
}

#player-total-stats-container {
    width: 50%;
}

#goal-chart-container {
    cursor: pointer;
    max-width: 1000px;
}

#chemistryModal {
    position: fixed;
    top: 55%;
    left: 30%;
    width: 45%;
    height: 40%; 
    display: none; /* Hidden by default */
    z-index: 990; /* Ensure it is above other elements */
    overflow-y: auto;
}

#chemistryModal .modal-content {
    position: relative;
    margin: 2% auto;
    padding: 0;
    background-color: white;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    overflow: auto;
}

#chemistryModal .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

#chemistryModal h2 {
    display: flex;
    justify-content: center;
    color: #228B22;
    font-size: 2rem;
    margin: 5px 0 5px 0;
}

#connections-table {
    display:flex;
    flex-direction: column;
}

#connections-table tr:nth-child(even) {
    width: 100%;
   background-color: #ddffdd
}

#connections-table thead {
    display: flex;
    flex-direction: row;
    width: 480px;
}

#connections-table th {
    display: flex; /* Use flexbox to arrange text and image */
    justify-content: space-evenly; /* Space between text and image */
    align-items: center; /* Center items vertically */
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
    width: 107px;
    cursor: pointer;
    vertical-align: middle;
}

#connections-table tbody {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-width: 480px;
}

#connections-table tr {
    display: flex;
    flex-direction: row;
}

#connections-table tbody td {
    display: flex;
    padding: 5px;
    text-align: center;
    width: 110px;
    justify-content: center;
    flex-direction: column;
}   

#individualModal h2 {
    display: flex;
    justify-content: center;
    color: #228B22;
    font-size: 2rem;
    margin: 10px 0 0 0px;
}

#individualModal img {
    display: flex;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-top: 10px;
}

.modal-player-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0 30px 0px;
    gap: 100px;
}

.modal-player-stats {
    display: flex;
    flex-direction: column;
    margin: 20px 0 20px 0;
    align-items: flex-start;
    font-size: 1.5rem;
    flex-grow: 1;
}

#individualModal p {
    display: flex;
    text-align: center;
    font-size: 1.4rem;
    margin: 0;
    padding: 8px 0 0 5px;
}

.modal-player-stats div:nth-child(odd) {
    width: 100%;
   background-color: #ddffdd
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#assists-and-yellow-cards-chart, #stats-and-first-chart {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    margin: 75px 0 20px 0;
    align-items: center;
    font-size: 1.5rem;
    flex-grow: 1;
}

#stats-and-first-chart {
    margin: 40px 0 20px 0;
}

#stats-and-first-chart {
    flex-direction: row;
}

#assist-chart-container, #yellow-card-chart-container, #goal-chart-container {
    cursor: pointer;
    width: 40%;
    margin: 0 auto;
    max-width: 800px;
}

#player-assists-chart, #player-yellow-cards-chart, #player-goals-chart {
    width: 100% !important;
    height: auto !important;
}

#games-and-line-graph-container {
    display: flex;
    flex-direction: row;
    margin: 0 0 20px 0;
    align-items: flex-start;
    font-size: 1.5rem;
    flex-grow: 1;
}

#games-and-totals-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
}

#games-and-totals-container table {
    width: auto;
    margin: 10px auto 40px auto;
}

#games-container {
    display: flex;
    flex-direction: row;
    margin: 20px 0 0 0;
    align-items: center;
    width: 100%;
}


#games-data-table-container {
    display: flex;
    margin: 20px 0 0 0;
    align-items: center;
    flex-direction: column;
    font-size: 1rem;
    width: 100%;
    border: 0;
    border-spacing: 0;
}

#pagination-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px 0;
    font-size: 1rem;
}

#pagination-controls button {
    display: flex;
    margin: 0 10px;
    font-size: 1rem;
    color: white;
    background-color: #228B22;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
}

#pagination-controls button:hover {
    background-color: #006400;
}

#wins-losses-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 0 0 20px 0;
    font-size: 1.5rem;
}


#games-data, #wins-losses {
    display: flex;
    margin: 20px 0 20px 0;
    align-items: center;
    flex-direction: column;
    font-size: 1rem;
    width: 100%;
    border: 0;
    border-spacing: 0;
}

#wins-losses {
    font-size: 1.5rem;
    font-weight: bold;
    color: green;
}

#games-data th {
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
    cursor: default;
}

#games-data tr {
    cursor: pointer;
}

#games-data td {
    padding: 5px;
    text-align: center;
}

#games-data td:nth-child(1) {
    text-align: left;
}

#games-data tr:nth-child(odd) {
    background-color: #ddffdd /*#d5dcd8;*/
}

#games-data tr:hover {
    background-color: #006400;
    color: white;
}

#gamesStatsModal {
    position: fixed;
    top: 55%;
    left: 30%;
    width: 45%;
    height: 40%;
    display: none; /* Hidden by default */
    z-index: 900; /* Ensure it is above other elements */
    overflow-y: auto;
}

#game-stats-table {
    width: 75%;    
    margin-bottom: 25px;
}

#game-stats-table th {
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
    cursor: default;
}

#game-stats-table td {
    padding: 5px;
    text-align: center;
}

#game-stats-table tbody tr:nth-child(even) {
    background-color: #ddffdd /*#d5dcd8;*/
}

#saves-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 20px 0;
    font-size: 1rem;
}

#saves-table td:first-of-type {
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
}

#additional-filters-and-line-chart {
    display: flex;
    flex-direction: column;
    margin: 100px 0 20px 0;
    align-items: center;
    font-size: 1.5rem;
    flex-grow: 1;
}

#additional-filters {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: baseline;
    justify-content: center;
}

#additional-filters label {
    margin: 0 10px 0 20px;
    font-size: 1.5rem;
}

#additional-filters #or {
    margin: 0 0 0 20px;
}

#additional-filters select {
    margin: 15px 0 40px 0;
    font-size: 1.5rem;
}

#line-chart-container {
    position: relative;
    width: 60%;
    max-width: 1400px;
    right: 32px;
}

.list-filter {
    display: flex;
    margin: 20px 0 0 0;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: 2rem;
    color: #228B22;
}

.chart-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 20px 0;
    width: 40%;
    align-items: center;
}

#player-yellow-cards-chart {
    height: 100%;
    width: 100%;
}
#graph-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 20px 0;
}

#graph-container svg {
   height: 600px;
   border-radius: 10px;
   width: 75%;
   border: 5px solid #228B22;
}

#graph-container image {
    border-radius: 10px;
}
.node {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 1.5px;
    border-radius: 10px;
}

.link {
    fill: none;
    stroke: #999;
    stroke-opacity: 0.6;
}

#about {
    padding: 0;
    background-color: #f9f9f9;
    width: 100%;
}

.about-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 0px;
    justify-content: center;
}

.about-item {
    text-align: center;
    display: flex;
    flex-direction: row; /* Place image and text side by side */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    /*overflow: hidden;*/ /* This makes the transitions not work */
}

.about-item img, .about-item p{
    width: 50%; /* Adjust width as needed */
    height: 700px;
    box-sizing: border-box;
    margin: 0; /* Add margin to separate from text */
}

.about-item img {
    object-fit: cover;
    object-position: top;
    border-radius: 0px;
}

.about-item:first-of-type img {
    object-position: center;
}

.about-item > img {
    animation: zoom-out linear;
    animation-timeline: view();
    animation-range-start:cover;
    animation-range-end: contain;
    z-index: 3;
}

.about-item p + img {
    z-index: 2;
}

@-webkit-keyframes zoom-out {
    from { 
          -webkit-transform: translateY(-10%);
          -webkit-transform: opacity .4;
         }
    to { 
        -webkit-transform: translateY(0%);
        -webkit-transform: opacity 1;
       }
}

@keyframes zoom-out {
    from { 
         
          transform: translateY(-10%);
          opacity: .4; 
         }
    to { 
         
        transform: translate(0%);
        opacity: 1;
       }
}

.about-item p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #004700;
    font-size: 1.9rem;
    background-color: #9EF0BF; /* Add a background color to the text section */
    border-radius: 0px; /* Round the right corners */
    padding: 20px 50px 40px 75px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better separation */
    z-index: 3;
}

.about-item p .small-img {
    width: 200px; /* Set a fixed width for the small image */
    height: 200px; /* Set a fixed height for the small image */
    margin-bottom: 50px; /* Add margin below the small image */
    margin-top: -10%;
    animation: fade-in linear;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: contain;
}

@-webkit-keyframes fade-in {
    from {  
          -webkit-transform: scale(.3);
        }
    to { 
        -webkit-transform: scale(1);
       }
}

@keyframes fade-in {
    from { 
          transform: scale(.3); 
        }
    to { 
        transform: scale(1); 
       }
}

#about .section-header{
    z-index: 9;
    margin-bottom: 0;
    position: relative;
}

#gallery{
    padding: 40px 0 40px 40px;
    background-color: #fff;
    position: relative;
    z-index: 4;
}

#carousel-gallery {
    display: flex;
    overflow: hidden;
    height: 100%;
    margin-bottom: 100px;
    margin: 0 5px;
}

.carousel {
    position: relative;
    max-width: 900px;
    height: 600px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.carousel-item {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
    height: 100%;
}

#carousel-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.367);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

#carousel-previews {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 20px auto;
    overflow-x: auto; /* Allow horizontal scrolling */
    max-width: 900px; /* Ensure it fits within the carousel container */
    padding: 0 10px;
    scrollbar-width: none; /* Hide scrollbar */
}

#carousel-previews img {
    width: 100px; /* Adjust the width as needed */
    height: 60px; /* Adjust the height as needed */
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

#carousel-previews img.active {
    opacity: 1;
    border: 2px solid #228B22; /* Highlight the active thumbnail */
}

.photo-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 0 0;
    padding: 0;
    font-size: 2rem;
    color: #228B22;
}

#switching-images-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)); /* Adjust the minmax value as needed */
    grid-auto-rows: auto; /* Ensure consistent row height */
    grid-auto-flow: dense;
    gap: 50px;
    margin: 0 20px 50px 0;
}

.switching-images {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    text-align: center;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.switching-images img {
    width: auto;
    height: 315px;
    display: none; /* Hide all images initially */
    object-fit: cover;
    position: relative;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.switching-images img.active {
    display: block; /* Show the active image */
}

#schedule {
    padding: 50px 0;
    background-color: white;
}

#standings, #roster, #statistics, #contact {
    margin-bottom: 50px; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
    background-color: #FFF; /* Set a background color */
}

#contact h2{
    padding: 0 7px;
    font-size: 2rem;
    margin-bottom: 0;
    margin-top: 50px;
}

#contact h3{
    padding: 0 15px;
    margin-top: 40px;
    margin-bottom: 5px;
}

#contact p{
    padding: 0 10px;
    margin: 0 10px;
}

#contact a{
    text-decoration: none;
    color: #087708;
}

#contact iframe {
    width: 500px;
    height: 380px;
    margin: 10px 0 0 30px;
}

.field-map-images {
    display: flex;
    gap: 75px;
    margin: 10px 0 10px 40px;
}

.field-map-item {
    width: 24%; /* Adjust width to fit two items in a row */
    text-align: center;
}

.field-map-item h4 {
    margin-bottom: 10px; /* Add some space below the title */
}

.field-map-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

footer {
    background: url('images/panoramic.webp') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    width: 100%;
    height: 225px;
}

footer p {
    padding: 200px 0 0 0;
}

#social-media {
    display: flex;
    justify-content: center;
}

#social-media a {
    display: flex;
    align-items: center;
    color: #228B22;
    font-size: 1.5rem;
    text-decoration: none;
    gap: 10px;
}

#social-media img {
    width: 50px;
}

#schedule-iframe{
    width: 100%;
    height: 2875px;
    border: none;
}

#standings-iframe {
    width: 100%;
    height: 1600px;
}

#schedule-iframe-container, #standings-iframe-container {
    border: 10px solid #006400; /* Dark Green Border */
    margin: 40px auto;
    padding: 10px;
    max-width: 900px;
    text-align: center;
    border-radius: 10px;
}

#standings{
    padding: 30px 0;
}
#standings-iframe-container {
    height: 1600px;
}

.section-header{
    background-color: #228B22;
    height: 100px;
    margin-bottom: 50px;
    top: 0;
}

.section-header h1{
    display: flex;
    font-size: 3rem;
    color: #fff;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
    margin-top: 0;
}

.roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center; /* Ensure all items are stretched to the same height */
}

.roster-item {
    flex: 1 1 150px; /* Flex-grow, flex-shrink, and flex-basis */
    max-width: 150px; /* Optional: Set a max-width for each item */
    text-align: center;
    display: flex;
    flex-direction: column;
}

.roster-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    aspect-ratio: 1; /* Maintain a consistent aspect ratio */
    transition: transform 0.4s ease; /* Smooth transition for transform */
}

.roster-item img:hover {
    transform: scale(1.7); /* Slightly enlarge the image on hover */
    z-index: 4;
}

.roster-item img:hover + p {
    color: #fff; /* Change text color to white */
    background: #228B22; /* Change background color to forest green */
    border: 2px solid #228B22; /* Add green border */
    padding: 5px; /* Add padding to the text */
    border-radius: 5px; /* Add rounded corners to the text */
    z-index: 5;
    margin-top: 0px;
}

.roster-item img:hover + div {
    color: #fff; /* Change text color to white */
    background: #228B22; /* Change background color to forest green */
    border: 2px solid #228B22; /* Add green border */
    padding: 0 5px 0 5px; /* Add padding to the text */
    border-radius: 5px; /* Add rounded corners to the text */
    z-index: 5; 
    height: 35px;
}

.roster-item img:hover + div p {
    margin-top: 0px;
    color: #fff; /* Change text color to white */
    padding: 5px; /* Add padding to the text */
    z-index: 5; 
}

.roster-item p {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #066e06; /* Forest Green */
    z-index: 0;
}

.roster-item .sunflower-name{
    display: flex;  
    align-items: stretch;
    justify-content: space-evenly;
    height: 40px;
}

.roster-item .sunflower-name img{
    width: 30px;
    height: 30px;
    transform: none; /*  */
}

.roster-item .sunflower-name p{
   margin-top: 10px;

}

.roster-item .sunflower-name img:hover + p{
    height: 25px;
    color: #228B22; /* Change text color to white */
    background: #fff; /* Change background color to forest green */
    padding: 10px; /* Add padding to the text */
    border: none; /* Add rounded corners to the text */
    z-index: 5;
    margin-top: 0px;
}

#add-player-stats-form-header, #add-game-stats-form-header {
    color: #228B22;
    text-align: center;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin: 0;

}

#add-player-stats-form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0 50px 0;
}

.add-player-stats-form-fields {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
    margin: 0px 0 25px 0;
    font-size: 1.5rem;
}

#add-player-stats-form div:nth-of-type(4) {
    margin: 0;
}

#goalkeeper-saves-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 60px;
}

#assisted-by-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 94px;
    margin: 0;
}

/************************** ADMIN *************************************/

#games-list-header, #stats-list-header {
    color: #228B22;
    text-align: center;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    margin: 50px 0 0 0;
}

#add-game-form {
    display: flex;
    flex-direction: column;
    margin: 0 0 50px 0;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

#manage-stats-list-header, #manage-players-list-header {
    color: #228B22;
    text-align: center;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    margin: 50px 0 0 0;
}

#add-game-submit, #add-player-stats-submit {
    margin: 10px 0 10px 0;
    font-size: 20px;
    color: white;
    background-color: #228B22;
    border-radius: 15px;
    padding: 10px 30px;
}

#add-player-submit, #delete-player-submit, #resurrect-player-submit {
    margin: 10px 0 10px 0;
    font-size: 14px;
    color: white;
    background-color: #228B22;
    border-radius: 15px;
    padding: 8px 15px;
}

#delete-player-submit {
    background-color: #e92c2c;
}

#resurrect-player-submit {
    background-color: #257de4;
}

#add-game-submit-container, #add-player-stats-submit-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 10px 0;
}

.games_table_container, .players_table_container {
    display: flex;
    justify-content: center;
    margin: 0 0 50px 0;
}

#games_table, #manage-stats-table{
    border: 0;
    border-spacing: 0;
}

#games_table th, #manage-stats-table th {
    padding: 5px;
    text-align: center;
    background-color: #228B22;
    color: white;
    border: 2px solid white; /* Simulate cellspacing with border */
    cursor: default;
}

#games_table tr:nth-child(odd), #manage-stats-table tr:nth-child(odd) {
    background-color: #ddffdd; /*#d5dcd8;*/
    border: 2px solid white; /* Simulate cellspacing with border */
}

#games_table td, #manage-stats-table td {
    text-align: center;
    padding: 10px;
}

#games_table button {
    background-color: #257de4;
    color: white;
    border-radius: 10px;
    border: 2px solid #257de4;
}

#manage-stats-table input {
    background-color: #e92c2c;
    color: white;
    border-radius: 10px;
    border: 2px solid #e92c2c;
}

#sticky-button{
    display:none;
}

/* Media query for mobile devices */
@media (max-width: 1600px) {
    #main-title {
        font-size: 4.5rem;
    }
}

@media (max-width: 1400px) {
    #main-title {
        font-size: 4rem;
    }
}

@media (max-width: 1200px) {
    #main-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 1024px) {
    
    nav.side-menu {
        position: fixed;
        top: 0;
        width: 100%; /* Full width for the top menu */
        height: 65px; /* Fixed height for the top menu */
        display: flex; /* Use flexbox for layout */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Space items evenly */
        padding: 0 20px; /* Add some padding for spacing */
        transition: height 0.4s ease;
    }

    nav.side-menu .logo {
        display: block; /* Show logo in mobile view */
        position: absolute; /* Position the logo absolutely */
        top: 5px; /* Position it 10px from the top */
        left: 10px; /* Position it 10px from the left */
        width: 60px; /* Adjust width for mobile view */
        height: auto;
    }

    nav.side-menu .hamburger {
        display: block; /* Show hamburger menu in mobile view */
        position: absolute; /* Position the hamburger menu absolutely */
        top: 0px; /* Position it 10px from the top */
        right: 55px; /* Position it 10px from the left */
        border: 2px solid #fff; /* forest green border for the hamburger menu */
        border-radius: 0px; /* Add some padding to the border */
    }

    nav.side-menu.expanded .hamburger {
        margin: 0;
        padding: 11px 13px;
    }

    nav.side-menu .menu-items {
        display: none; /* Hide menu items initially */
        flex-direction: column; /* Display menu items in a column */
        align-items: center;
        width: 100%; /* Full width for the dropdown menu */
        background: #228B22; /* Forest Green background for the dropdown menu */
        position: absolute; /* Position the dropdown menu absolutely */
        top: 65px; /* Position the dropdown menu below the navbar */
        left: 0;
        max-height: 0; /* Initially set max-height to 0 */
        overflow: hidden; /* Hide overflow */
    }
    
    nav.side-menu a{
        font-size: 2rem;
        padding-right: 3rem;
    }

    nav.side-menu.expanded .menu-items {
        display: flex; /* Show menu items when expanded */
        max-height: 600px;
        width: 100%;
    }

    nav.side-menu.expanded{
        height: 600px;
        width: 100%;
        z-index: 999;
    }
  
    .home-section {
        background: url('images/sunrise_blurred_mobile.jpg') no-repeat center center;
        background-size: cover;
        height: 100vh;
        width: auto;
        overflow-x: hidden;
        position: relative;
        z-index: 0;
    }

    #main-logo {
        position: absolute;
        top: 75px;
        height: 15%;
        width: 20%;
    }

    #main-title {
        font-size: 1.5rem;
        bottom: 20%;
        right: 3%;
    }

    .modal {
        top: 10%;
        left: 10%; /* Center the modal horizontally */
        right: 10%;
    }

    #graph-container svg {
        width: 100%;
        
     }

    #chemistryModal {
        top: 50%;
        left: 1%; /* Center the modal horizontally */
        right: 2%;
        width: 95%;
        height: 45%;
    }

    #chemistryModal h2 {
        font-size: 1.8rem;
        margin: 5px 0 10px 0;

    }
    #chemistryModal .modal-content {
        width: 99%;
    }

    #chemistryModal table {
        display: flex;  
    }

    #chemistryModal thead, #chemistryModal tbody {
        display: flex;
        width: 100%;
    }


    #chemistryModal tbody td {
        width: 100%;
    }

    #chemistryModal th, #chemistryModal td {
        display: block;
        width: 26%;
    }

    #chemistryModal tr {
        display: flex;
        margin-bottom: 10px;
        justify-content: flex-end;
    }

    #add-game-error-message {
        display: flex;
        justify-content: center;
        font-size: 1.5rem;
        width: 75%;
    }

    #all-chart-container {
       flex-direction: column;
    }

    .chart-container {
        width:95%;
    }

    #game-stats-table {
        width: 95%;
    }

    #gameStatsModal h2:first-of-type {
        margin-top: 40px;
    }

    #gameStatsModal h2:last-of-type{
        margin-bottom: 20px;
    }


    #gameStatsModal h2 {
        font-size: 1.3rem;
        margin: 0 auto 5px auto;
    }

    #games-filter-container {
        margin-top: 25px;
    }

    #additional-filters-and-line-chart {
        width: 100%;
        margin: 10px 0;
    }

    #additional-filters {
        flex-direction: column;
        align-items: center;
    }

    #additional-filters select {
        margin: 0;
    }

    #additional-filters label {
        margin: 7px 0;
    }

    #additional-filters #or {
        margin: 5px 0 0 0;
    }
   
    #line-chart-container {
        width: 98%;
        right: 0;
    }
   
    #assist-chart-container, #yellow-card-chart-container, #goal-chart-container {
        width: 99%;
    }

    #games-container, #stats-and-first-chart, #assists-and-yellow-cards-chart {
        flex-direction: column;
        width: 100%;
        margin: 0;;
    }

    #games-and-line-graph-container {
        flex-direction: column;
        width: 100%;
    }

    #games-and-totals-container {
        width: 100%;
    }

    #wins-losses-container {
        margin-top: 0;
        margin-bottom: 0;
        flex-direction: column;
        width: 100%;
    }

    #wins-losses {
        font-size: 1.25rem;
    }

    #assists-and-yellow-cards-chart {  
        margin: 20px 0 20px 0;
    }
    #player-total-stats thead {
        width: 388px;
    }
    
    #player-total-stats th {
        flex-direction: column;
        width: 20%;
        justify-content: flex-end;
    }

    #player-total-stats th img {
        margin-top: 5px;
    }

    #player-total-stats tbody, #team-totals tbody {
        width: 388px;
    }

    #player-total-stats tbody tr, #team-totals tbody tr {
        width: 388px;
    }
    #player-total-stats-container, #games-data-table-container {
        width: 100%;
    }

    #individualModal {
        top: 15%;
        left: 2%;
        right: 2%;
    }

    .modal-player-info {
        flex-direction: column;
        margin: 10px 15px 30px 15px;
        gap: 20px;
    }

    .modal-content {
        width: 100%;
    }

    .about-container {
        flex-direction: column; /* Stack items vertically on mobile */
    }

    .about-item {
        flex-direction: column; /* Stack image and text vertically on mobile */
        /*overflow: hidden;*/ /* This makes the transitions not work */
    }

    .about-item.reverse {
        flex-direction: column-reverse; /* Reverse the order of image and text for the second about-item */
    }

    .about-item img {
        width: 100%; /* Full width for the image on mobile */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 0; /* Add bottom margin */
    }

    .about-item img:nth-child(1) {
        height: auto;
    }

    .about-item p {
        width: 100%; /* Full width for the text on mobile */
        font-size: 1.5rem; /* Adjust font size for mobile */
        padding: 20px 50px 40px 50px;
        animation: scroll-slide linear;
    }

    .about-item p .small-img {
        width: 125px; /* Set a fixed width for the small image */
        height: 125px; /* Set a fixed height for the small image */
        margin-bottom: 30px; /* Add margin below the small image */ 
    }

    .section-header{
        margin-top:65px;
    }

    .section-header h1{
        display: flex;
        font-size: 1.75rem;
    }

    #about .section-header {
        margin-top: 0;
    }

    .photo-header h1 {
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #switching-images-container {
      width: 100vw;
      margin: 0;
    }

    .switching-images img {
        width: 95vw;
        height: auto;
    }

    .switching-images h2 {
        font-size: 1rem;
    }

    #gallery{
        padding: 30px 5px;
        background-color: #fff;
    }

    #carousel-gallery {
        width: 97vw; /* Set the width to 100% of the viewport width */
        margin: 0 6px; /* Remove any margin */
        height: 100%;
    }

    .carousel {
        max-width: 97vw; /* Set the max-width to 100% of the viewport width */
        height: auto; /* Adjust the height to auto */
    }

    .carousel-item {
        height: auto; /* Adjust the height to auto */
        max-height: 275px;
    }

    .carousel-item img {
        object-fit: contain; /* Ensure the image covers the container */
    }

    #carousel-previews {
        gap: 5px; /* Adjust gap for smaller screens */
        max-width: 375px;
    }

    #schedule {
        position: relative;
        z-index: 3;
        padding-left: 0;
        height: auto;
    }

    #schedule-iframe-container { 
        width: 368px; 
        height: 1713px; 
        padding: 0; 
        overflow: hidden; 
    }
    
    #schedule-iframe { 
        width: 634px; 
        height: 2900px; 
        border: 1px solid black; 
    }
    
    #schedule-iframe {
        -ms-zoom: 0.59;
        -moz-transform: scale(0.59);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.59);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.59);
        -webkit-transform-origin: 0 0;
    }

    #standings-iframe-container { 
        width: 367px; 
        height: 1063px; 
        padding: 0; 
        overflow: hidden; 
        margin-top: 60px;
    }
    
    #standings-iframe { 
        width: 618px; 
        height: 1800px; 
        border: 1px solid black; 
    }
    
    #standings-iframe {
        -ms-zoom: 0.59;
        -moz-transform: scale(0.59);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.59);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.59);
        -webkit-transform-origin: 0 0;
    }

    .roster-grid {
        gap: 10px; /* Adjust gap for smaller screens */
    }

    .roster-item {
        flex: 1 1 100px; /* Adjust flex-basis for smaller screens */
    }

    .roster-item p {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .roster-item img {
        border-radius: 5px; /* Adjust border radius for smaller screens */
        transition: transform 0.5s ease; /* Smooth transition for transform */
        z-index: 1; 
    }
    
    .roster-item img:hover {
        transform: scale(1.7); /* Slightly enlarge the image on hover */
    }

    #contact iframe {
        width: 100%;
        height: 475px;
        margin: 10px 0 0 0;
    }

    .field-map-images {
        flex-direction: column; /* Stack images vertically on mobile */
        margin: 10px 0 10px 0; /* Adjust margin for smaller screens */
        gap: 10px;
    }

    .field-map-item {
        width: 100%; /* Full width for the items on mobile */
        margin-bottom: 20px; /* Add bottom margin */
    }

    .field-map-item img {
        width: 100%; /* Full width for the images on mobile */
    }

    #add-game { 
        display: flex;
        flex-direction: column;
    }

    #add-game label {
        margin: 10px 0 0 0;
        font-size: 1.5rem;
    }

    #add-game input, #add-game select {
        margin: 0 0 10px 0;
        font-size: 1.5rem;
    }

    #add-game-submit {
        font-size: 2.5rem;
    }
    /*
    #sticky-button{
        display:flex;
        justify-content: center;
        width: 100%;
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: white;
        height: 100px;
    }

    #sticky-button button {
        font-size: 2rem;
        width: 100%;
        padding: 1rem;
        color: white;
        background-color: #c8102e;
        margin: 1rem;
    }
    */
    footer{
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 90px;
    }
}

@media (max-width: 560px) {
    .carousel-item {
        max-height: 252.2px;
    }
}