.game-description {
    flex: 0 0 50%; /* Beperk de breedte van de uitleg aan de rechterkant */
    padding: 20px; /* Voeg wat ruimte toe rondom de uitleg */
    font-family: Arial, sans-serif; /* Gebruik een leesbaar lettertype */
    font-size: 16px; /* Stel een standaard lettergrootte in */
    color: #333; /* Gebruik een donkere kleur voor de tekst */
   
   
    
}

.book-section {
    position: absolute; /* Zorg dat de sectie boven de achtergrond staat */
    top: 59%; /* Plaats de sectie in het midden van de pagina */
    left: 49%; /* Pas de horizontale positie aan om de sectie beter te centreren */
    transform: translate(-50%, -50%); /* Corrigeer de positie om exact in het midden te staan */
    display: grid; /* Gebruik een grid-layout om de twee secties te verdelen */
    grid-template-columns: 1fr 1fr; /* Verdeel de sectie in twee gelijke kolommen */
    align-items: center; /* Center both columns vertically so left stays fixed */
    
    padding: 10px; /* Verminder de padding verder om de sectie compacter te maken */
    border: none; /* Verwijder de border volledig */
    box-shadow: none; /* Verwijder ook de schaduw */
    
    width: 60%; /* Maak de sectie nog smaller */
    gap: 20px; /* Voeg ruimte toe tussen de kolommen */
    z-index: 100; /* Zorg dat de sectie boven andere elementen zichtbaar is */
    transition: opacity 0.3s ease-in-out;
}

.book-section.fade-out {
    opacity: 0;
}

.book-section.fade-in {
    opacity: 1;
}

.left-section {
    display: flex;
    flex-direction: column; /* Stapel de inhoud verticaal */
    align-items: center; /* Zorg dat de afbeelding gecentreerd blijft */
    text-align: center; /* Centreer de tekst */
    gap: 5px; /* Vergroot de ruimte tussen de afbeelding en de tekst */
    /* Fixed positioning so it never shifts regardless of right-side content */
    align-self: center !important;   /* vertical centering inside grid row */
    justify-self: center !important; /* horizontal centering inside grid column */
    position: relative; /* establish positioning context */
    flex-shrink: 0; /* prevent shrinking */
    flex-grow: 0;   /* prevent growing */
    min-width: 300px; /* fixed minimum width - iets groter */
    max-width: 400px; /* fixed maximum width - iets groter voor grotere afbeelding */
}

.game-image {
    max-width: 100%; /* Vergroot de afbeelding naar volledige breedte */
    width: 500px; /* Verhoog de vaste breedte voor een nog grotere afbeelding */
    height: auto; /* Behoud de verhoudingen van de afbeelding */
    filter: sepia(50%) hue-rotate(-20deg) saturate(120%); /* Pas een fantasy-thema filter toe */
    border: 3px solid #865836c5; /* Voeg een rand toe die bij het thema past */
    border-radius: 12%; /* Verlaag de afronding van de hoeken */
    box-shadow: 0 8px 15px rgba(56, 26, 1, 0.6), 0 4px 10px rgba(156, 116, 41, 0.753); /* Vergroot de schaduw voor een sterker diepte-effect en voeg een subtiele gloed toe voor een magisch effect */
    margin: auto; /* Centreer de afbeelding binnen de container */
    margin-top: -60px; /* Verplaats de afbeelding nog iets verder omhoog ten opzichte van de tekst */
    margin-bottom: 20px; /* Voeg meer ruimte toe tussen de afbeelding en de tekst */
    display: block; /* Zorg dat de afbeelding correct wordt weergegeven */
}

.right-section {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* center all children horizontally */
    justify-content: flex-start;
    text-align: center;
    margin-left: 0; /* removed 50px to allow proper centering */
    margin-top: -15%;
    padding: 0 20px;
    /* Fixed positioning so it never shifts regardless of content */
    align-self: center !important;   /* vertical centering inside grid row */
    justify-self: center !important; /* horizontal centering inside grid column */
    flex-shrink: 0; /* prevent shrinking */
    flex-grow: 0;   /* prevent growing */
    min-width: 450px; /* fixed minimum width */
    max-width: 500px; /* fixed maximum width */
}

.game-name {
    order: -1; /* Ensure the title appears first */
    margin-bottom: 20px; /* Add spacing below the title */
    position: relative; /* Remove absolute positioning */
    top: 0; /* Reset top positioning */
    left: 0; /* Reset left positioning */
    transform: none; /* Remove transform */
}

.right-section > h2 {
    position: static; /* Use default positioning */
    text-shadow: 2px 2px 4px rgba(165, 80, 1, 0.767); /* Subtiele schaduw voor een beter contrast */
    margin-bottom: 10px; /* Verklein de marge onder de titel */
}

.right-section > p {
    margin-top: 10px; /* Ensure spacing between title and explanation */
    margin-bottom: 10px; /* Voeg een witregel toe onder elke paragraaf */
}

.left-section p {
    margin: 2px 0; /* Verminder de marges tussen de tekstregels om ze dichter bij elkaar te plaatsen */
}

/* Zorg ervoor dat de witruimte correct wordt toegepast op de basis tekst */
.right-section .basic-text {
    display: block; /* Zorg dat de tekst als blok wordt weergegeven */
    margin-bottom: 10px; /* Voeg een witregel toe onder elke tekstregel */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Voeg een subtiele schaduw toe voor een beter visueel effect */
}

/* Zorg dat de knoppen horizontaal gecentreerd zijn onder de tekst */
.right-section .button-container {
    display: flex;
    justify-content: center; /* Centreer de knoppen horizontaal */
    align-items: center; /* Zorg dat de knoppen verticaal gecentreerd blijven */
    margin-top: 20px; /* Voeg ruimte toe boven de knoppen */
    width: 100%; /* Zorg dat de container de volledige breedte gebruikt */
}

/* Voeg een kleine gap toe tussen de knoppen voor de volgende en vorige game */
.right-section .button-container {
    display: flex;
    gap: 10px; /* Voeg een kleine ruimte toe tussen de knoppen */
    justify-content: center; /* Centreer de knoppen horizontaal */
}

/* Plaats de knoppen helemaal onderin de rechtersectie */
.right-section .button-container {
    position: absolute; /* Maak de container absoluut gepositioneerd */
    bottom: -40px !important; /* Plaats de container iets onder de onderkant van de rechtersectie */
    left: 50% !important; /* Exact in het midden */
    transform: translateX(-50%); /* Corrigeer de horizontale centrering */
}

/* Maak de uitleg tekst groter */
.right-section .extra-text {
    font-size: 18px; /* Verhoog de lettergrootte van de uitleg tekst */
    line-height: 1.6; /* Voeg meer regelafstand toe voor betere leesbaarheid */
    text-shadow: 2px 2px 4px rgba(165, 80, 1, 0.767);
}

/* Stijl de GitHub-knop in een fantasy-thema */
.left-section .github-link {
    display: inline-block;
    margin-top: 10px; /* Voeg wat ruimte toe boven de knop */
    padding: 8px 16px; /* Maak de knop iets kleiner */
    font-size: 16px; /* Verhoog de lettergrootte van de knoptekst */
    color: #fff; /* Maak de tekst wit */
    background: linear-gradient(45deg, #6b3e26, #865836); /* Voeg een magische gradient toe */
    border: 2px solid #865836; /* Voeg een bijpassende rand toe */
    border-radius: 15px; /* Maak de hoeken afgerond */
    text-decoration: none; /* Verwijder de standaard onderstreping */
    text-align: center; /* Centreer de tekst */
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.8); /* Voeg een gloed toe voor een magisch effect */
    transition: transform 0.3s, box-shadow 0.3s; /* Voeg een animatie toe voor hover-effecten */
}

.left-section .github-link:hover {
    transform: scale(1.1); /* Vergroot de knop iets bij hover */
    box-shadow: 0 0 20px rgba(139, 69, 19, 1); /* Versterk de gloed bij hover */
}

/* Stijl de knoppen voor de volgende en vorige game in een fantasy-thema */
.right-section .button-container button {
    display: inline-block;
    padding: 8px 16px; /* Zorg voor een vergelijkbare grootte als de GitHub-knop */
    font-size: 14px; /* Gebruik dezelfde lettergrootte als de GitHub-knop */
    font-family: 'MagicalNeverland', cursive; /* Gebruik het fantasy-lettertype */
    color: #fff; /* Maak de tekst wit */
    background: linear-gradient(45deg, #6b3e26, #865836); /* Voeg een magische gradient toe */
    border: 2px solid #865836; /* Voeg een bijpassende rand toe */
    border-radius: 15px; /* Maak de hoeken afgerond */
    text-decoration: none; /* Verwijder de standaard onderstreping */
    text-align: center; /* Centreer de tekst */
    box-shadow: 0 0 10px rgba(139, 69, 19, 0.8); /* Voeg een gloed toe voor een magisch effect */
    transition: transform 0.3s, box-shadow 0.3s; /* Voeg een animatie toe voor hover-effecten */
    cursor: pointer; /* Zorg dat de knop klikbaar is */
}

.right-section .button-container button:hover {
    transform: scale(1.1); /* Vergroot de knop iets bij hover */
    box-shadow: 0 0 20px rgba(139, 69, 19, 1); /* Versterk de gloed bij hover */
}

/* Zorg dat de teller onder de knoppen staat zonder de knoppen te beïnvloeden */
.button-container-wrapper {
    display: flex;
    flex-direction: column; /* Stapel de knoppen en de teller verticaal */
    align-items: center; /* Centreer de inhoud */
}

.button-container {
    display: flex;
    flex-direction: row; /* Zorg dat de knoppen naast elkaar blijven */
    justify-content: center; /* Centreer de knoppen horizontaal */
    gap: 10px; /* Voeg ruimte toe tussen de knoppen */
}

.game-counter {
    margin-top: 10px; /* Voeg ruimte toe tussen de knoppen en de teller */
    text-align: center; /* Centreer de tekst van de teller */
}

.image-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed-size box so all carousel images occupy the same area */
    width: 420px;
    max-width: 100%;
    height: 300px;
    overflow: hidden;
    padding: 12px;
    background: none;
    box-shadow: none;
}

.carousel-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #865836; /* theme brown border */
    border-radius: 10px;
    background: #f5efe6; /* paper-like background to match site theme */
    box-shadow: 0 6px 18px rgba(134, 88, 54, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* remove inner padding so image fills the frame */
    overflow: hidden; /* ensure image doesn't overflow the frame */
}

.carousel-frame img {
    width: 100%;        /* fill the frame horizontally */
    height: 100%;       /* fill the frame vertically */
    object-fit: cover;  /* crop and fill to cover the whole frame */
    display: block;
    margin: 0;          /* no extra margin */
    background: transparent; /* ensure image background not forced */
    /* shift slightly to the right (horizontal, vertical); use !important to override inline styles/browsers */
    object-position: 70% center !important;
}

.project-image:hover {
    transform: none; /* Remove any scaling or growth effect on hover */
}

.zoomed-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
}

.zoomed-image {
    max-width: 90%;
    max-height: 90%;
    border: 5px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #222;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001; /* above overlay content */
}

.close-button:hover {
    background: rgba(255,255,255,1);
}

/* Ensure the rest of the page is not interactable when zoomed */
body.zoom-active {
    overflow: hidden; /* Prevent scrolling when an image is zoomed */
}

/* Remove styles for navigation arrows */
.carousel-prev-button,
.carousel-next-button {
    display: none;
}

/* 
 * RIGHT SECTION LAYOUT FIX:
 * - Center all children horizontally including the carousel
 */
.right-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* center all children horizontally */
}

/* Carousel container: shifted to the right */
.right-section .image-carousel-container {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 20px;
    margin-bottom: 20px;
    /* carousel layout */
}

/* Ensure the game title and subtitle sit directly above the carousel image
   - match the carousel width and center text within that width
   - align-self:flex-end so they stack exactly above the image block */
.right-section > h2 {
    /* keep the H2 centered across the right section */
    align-self: center !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
    transform: translateX(18px) !important; /* increased rightward nudge */
}

/* Place the game-name directly under the carousel, centered and matching carousel width */
.right-section .game-name {
    align-self: center !important;
    width: 100% !important; /* span the right-section */
    max-width: 420px; /* but don't grow past carousel width */
    text-align: center !important;
    margin: 18px 12px 0 0 !important; /* moved down a bit */
    transform: translateX(36px) !important; /* keep right nudge */
}

/* Themed styling for the game title to match site look-and-feel */
.right-section .game-name {
    font-family: 'MagicalNeverland', cursive; /* site fantasy font */
    color: #6b3e26; /* theme brown */
    font-weight: 700;
    font-size: clamp(1rem, 2.2vw, 1.4rem); /* responsive size */
    letter-spacing: 0.4px;
    text-shadow: 2px 2px 4px rgba(165, 80, 1, 0.6);
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0));
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(134,88,54,0.12);
    box-sizing: border-box;
}

/* Small rightward nudge for the explanatory text under the title */
.right-section .extra-text {
    transform: translateX(16px) !important;
    margin-top: 12px !important; /* small downward shift so text sits lower */
}

/* Small hint shown above the carousel */
.carousel-hint {
    padding-left: 1.5rem;
    padding-top: 1.5rem;;
    font-size: 1.1rem !important;
    color: #6b3e26;
    opacity: 0.95;
    margin: 0 0 -18px 0 !important; /* pull the hint down onto the carousel */
    text-align: center;
    font-style: italic;
    line-height: 0; /* compact spacing */
    pointer-events: none; /* allow clicks to pass through to the image */
}