* {
    color: rgb(195, 195, 195); /* Light grey for general text */
    margin: 0;
    padding: 0;
    font-size: calc(16px + 0.390625vw); /* Slightly larger base font size */
    box-sizing: border-box;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}    

html {
    background: rgb(35, 0, 36); /* Dark purple base */
    text-shadow: 2px 2px 5px black;
    scrollbar-color: rgba(78, 110, 57, 1) rgba(35, 0, 36, 1); /* Gecko */
    scrollbar-width: thin; /* Gecko */
    scroll-snap-type: y mandatory; /* Keep scroll snap on html */
}

html::-webkit-scrollbar { /* Chromium */
    width: 10px;
}

html::-webkit-scrollbar-track { /* Chromium */
    background: rgba(35, 0, 36, 1);
    box-shadow: inset 1px 1px 5px black;
}

html::-webkit-scrollbar-thumb { /* Chromium */
    background: linear-gradient(0deg, rgba(78, 110, 57, 1), rgb(41, 58, 30));
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover { /* Chromium */
    background: linear-gradient(0deg, rgba(100, 130, 70, 1), rgb(50, 70, 40));
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:active { /* Chromium */
    background: linear-gradient(0deg, rgba(60, 90, 50, 1), rgb(30, 50, 20));
    border-radius: 10px;
}

section {
    height: 100vh;
    background: radial-gradient(circle, rgb(78, 69, 33) 0%, rgb(7, 49, 78) 100%); /* Gold to blue gradient */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    scroll-snap-align: start;
    overflow: hidden; /* Prevent content from spilling out */
}

.page {
    width: 80%;
    max-height: 100vh; /* Ensure page fits within viewport */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding: 15px; /* Moderate padding to save space */
    box-sizing: border-box;
}

section p img {
    width: 42px; /* Slightly smaller than original to save space */
    height: 42px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 15px; /* Reduced from 20px */
}

section img:not(.footer img):not(p img) { /* Target director images, exclude footer and link icons */
    max-width: 100%; /* Ensure image fits container width */
    max-height: 40vh; /* Constrain height to fit viewport */
    width: auto;
    height: auto;
    object-fit: contain; /* Show entire image without cropping */
    margin-top: 15px; /* Reduced from 25px */
    border: 5px solid rgb(255, 255, 255); /* Thin white border */
    box-shadow: 0 0 20px rgba(0, 127, 99, 0.6), 0 0 40px rgba(0, 127, 99, 0.3); /* Thicker green glow shadow matching titles */
    border-radius: 12px; /* Curved corners */
}

a {
    color: rgb(0, 127, 99); /* Teal for links */
    text-decoration: none;
}

a:hover {
    color: rgb(43, 154, 164); /* Lighter teal on hover */
    cursor: pointer;
}

h1 {
    font-size: 3.5rem; /* Reduced from 4rem to save space */
    font-family: 'greater_foundation', fantasy;
    line-height: 1.3; /* Tightened to save space */
    color: rgb(0, 127, 99); /* Match link color for consistency */
    text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.5), 2px 2px 5px black; /* Thicker white drop shadow with 0 blur + existing black drop shadow */
}

h2 {
    color: rgb(0, 127, 99);
    font-family: 'greater_foundation', fantasy;
    font-size: calc(84px + 0.390625vw); /* Increased from 76px for larger titles */
    line-height: 1.2; /* Tightened to save space */
    flex-shrink: 1;
    text-shadow: 5px 5px 0px rgba(255, 255, 255, 0.5), 2px 2px 5px black; /* Thicker white drop shadow scaled for larger text with 0 blur + existing black drop shadow */
}

h3 {
    font-size: calc(24px + 0.390625vw); /* For "Favourites" */
    font-family: 'greater_foundation', fantasy;
    color: rgb(0, 127, 99);
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.3;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5), 2px 2px 5px black; /* Thicker white drop shadow scaled for smaller text with 0 blur + existing black drop shadow */
}

p:not(.footer p) { /* Target text paragraphs, exclude footer */
    font-size: calc(14px + 0.390625vw); /* Smaller than base to fit */
    line-height: 1.5; /* Tightened to save space */
    margin-bottom: 10px;
}

.footer {
    margin-top: 15px; /* Reduced from 20px */
}

.footer p {
    font-size: calc(14px + 0.390625vw); /* Reduced from 18px */
    line-height: 1.5; /* Tightened to save space */
}

@font-face {
    font-family: 'greater_foundation';
    src: url('font/greater_foundation.otf');
    font-style: normal;
    font-display: swap; /* Improve font loading */
}

/* Media query for smaller screens */
@media (max-width: 600px) {
    h1 {
        font-size: 2.5rem;
        text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.842), 2px 2px 5px black; /* Adjusted thicker white drop shadow with 0 blur for smaller text */
    }

    h2 {
        font-size: calc(60px + 0.390625vw); /* Slightly smaller than main but larger than before */
        text-shadow: 2.5px 2.5px 0px rgba(255, 255, 255, 0.842), 2px 2px 5px black; /* Adjusted thicker white drop shadow with 0 blur for smaller text */
    }

    h3 {
        font-size: calc(20px + 0.390625vw);
        text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.842), 2px 2px 5px black; /* Adjusted thicker white drop shadow with 0 blur for smaller text */
    }

    p:not(.footer p) {
        font-size: calc(12px + 0.390625vw);
    }

    .footer p {
        font-size: calc(12px + 0.390625vw);
    }

    section img:not(.footer img):not(p img) {
        max-height: 30vh; /* Further reduce image height on small screens */
        border: 3px solid rgb(255, 255, 255); /* Slightly thinner white border on small screens */
        box-shadow: 0 0 15px rgba(0, 127, 99, 0.5), 0 0 30px rgba(0, 127, 99, 0.2); /* Thicker but adjusted softer green glow on small screens */
        border-radius: 8px; /* Adjusted curved corners for smaller screens */
    }

    section p img {
        width: 36px;
        height: 36px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
    }
}