body {
    background-color: black;
    padding: 20px;
}

p {
    color: white;
    font-family: Arial, sans-serif;
    text-shadow: 
        -1px -1px 0 orange,
         1px -1px 0 orange,
        -1px  1px 0 orange,
         1px  1px 0 orange,
         1px  1px 2px #222; /* subtle dark shadow */
         text-align: center;
}

h1 {
    color: white;
    font-family: "Times New Roman", serif;
    text-shadow: 
        -1px -1px 0 orange,
         1px -1px 0 orange,
        -1px  1px 0 orange,
         1px  1px 0 orange;
    /* no extra dark shadow for h1 */
    text-align: center;
    font-size: 3.0em; /* classic header size */
}
/* Reset default margin/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body background */
body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

/* Banner styling */
.banner img {
    width: 100%;       /* Stretch full width */
    height: 125px;     /* Half the previous height */
    object-fit: cover; /* Crop/stretch without distortion */
    display: block;
}

/* Navbar styling */
.navbar {
    background-color: #111; /* Dark navbar */
    border-top: 1px solid #333;  /* Top border around navbar */
    border-bottom: 1px solid #333; /* Bottom border around navbar */
}

.navbar ul {
    list-style: none;
    display: flex;           /* Horizontal menu */
    justify-content: center; /* Center items */
    padding: 0;
}

.navbar li {
    margin: 0;
    border-left: 1px solid #333; /* Separator line between buttons */
}

.navbar li:first-child {
    border-left: none; /* Remove left border for first button */
}

.navbar a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 10px 20px; /* Classic button spacing */
}

/* Remove hover effect for old-school look */
.navbar a:hover {
    text-decoration: underline; /* subtle effect instead of color change */
}

/* Example content styling */
main {
    text-align: center;
    padding: 20px;
}

main h1 {
    font-family: "Times New Roman", serif;
    color: white;
}

main p {
    font-family: Arial, sans-serif;
    color: white;
}
.carousel {
    position: relative;
    width: 200px;       /* fixed width for smaller square */
    height: 200px;      /* fixed height to match your square images */
    margin: 20px auto;  /* center it horizontally */
    overflow: hidden;
    border: 2px solid #333;
}

.carousel-img {
    display: none;    /* hide all images by default */
    width: 100%;    /* fill the carousel container */
    height: 100%;   /* fill the container height */
    object-fit: cover; /* keeps image square and cropped correctly */
}

.carousel-img.active {
    display: block; /* show active image */
}
/* Gallery container */
.gallery {
    display: flex;
    flex-wrap: wrap;        /* wrap to next line if needed */
    justify-content: center;
    gap: 20px;              /* space between items */
}

/* Individual gallery item */
.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #333; /* dark separator line */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Images */
.gallery-item img {
    height: 200px;          /* fixed height for all images */
    width: auto;            /* preserve original width proportionally */
    object-fit: cover;      /* ensures it fills height without distortion */
    display: block;
    margin-bottom: 5px;
    border: 1px solid #333; /* optional subtle border like nav bar */
}

/* Art name */
.gallery-item p {
    margin: 0;
    font-size: 1em;
    color: white;
    font-family: Arial, sans-serif;
}