/* Font-face declarations */
@font-face {
    font-family: 'western';
    src: url('fonts/Pixel-Western.ttf') format('truetype');
}
@font-face {
    font-family: 'win00';
    src: url('fonts/Windows_Command_Prompt.ttf') format('truetype');
}
@font-face {
    font-family: 'formal';
    src: url('fonts/pixel-arial-14.otf') format('opentype');
}
@font-face {
    font-family: 'dosvga';
    src: url('fonts/Perfect DOS VGA 437.ttf') format('truetype');
}
@font-face {
    font-family: 'uptt';
    src: url('fonts/upheavtt.ttf') format('truetype');
}
@font-face {
    font-family: 'm42';
    src: url('fonts/m42.TTF') format('truetype');
}
@font-face {
    font-family: 'operator';
    src: url('fonts/PixelOperator.TTF') format('truetype');
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #000000;
    color: #ffffff;
    text-align: center;
}

.pixel-arial {
    font-family: 'formal', Arial, sans-serif;
}

.western {
    font-family: 'western', Arial, sans-serif;
}

.win00 {
    font-family: 'win00', Arial, sans-serif;
}

.dosvga {
    font-family: 'dosvga', Arial, sans-serif;
}

.uptt {
    font-family: 'uptt', Arial, sans-serif;
}

h1 {
    margin: 0;
    font-size: 24px;
}

h1, h2 {
    text-align: center;
    margin: 20px 0;
    font-family: 'western', Arial, sans-serif;
}

header h1 {
    margin: 20px 0;
    font-size: 24px;
}

main p {
    margin: 10px 0;
    font-size: 16px;
}

nav.tabs {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    margin-top: -1px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    cursor: pointer;
    padding: 10px 15px;
    margin-left: 0;
    border-radius: 0; /* Make the curve blocky */
    background-color: #181d2f;
    color: #ffffff;
    background-image: linear-gradient(to bottom, #000000 0%, #181d2f 66%, #004f74 100%);
    box-shadow: 0 2px 4px -2px #333;
    border: 1px solid #30445d;
    position: relative;
    transition: background-color 0.3s, box-shadow 0.3s;
    text-shadow: 0px -1.5px #202840;
    font-family: 'm42', Arial, sans-serif; /* Use Pixel Western for tabs */
    z-index: 1; /* Bring text to the front layer */
}

nav li a {
    color: inherit;
    text-decoration: none;
}

nav li.active {
    background-color: #5c002c;
    background-image: linear-gradient(to bottom, #3a002d 0%, #760039 66%, #d6220d 100%);
}

nav li.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c9301f; /* Match the active tab background color */
    transition: border-top-color 0s; /* Add transition for smooth color change */
}

nav li.active:hover::after {
    border-top-color: #ffaa00; /* Lighten the triangle color on hover */
}

nav li::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(#ffaa00, #e11142);
    border-radius: 0; /* Make the curve blocky */
    z-index: -1; /* Ensure the gradient is behind the text */
}

nav li:hover {
    background: linear-gradient(#ffaa00, #e11142, #ffaa00);
}

.container {
    width: 75%;
    max-width: 100%;
    background-color: #000000; /* Light background for container */
    color: #ffffff; /* Black text */
    margin: 0 auto;
    border-radius: 0; /* Make the curve blocky */
}

.fc {
    width: 60%;
    max-width: 100%;
    margin: 50px auto;
    box-sizing: border-box;
    border-radius: 0;
    border: 4px solid #004f74;
    text-align: center;
}

.fc img {
    max-width: 75%; /* Limit the width of the images to 50% of the .fc container */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove inline spacing issues */
    margin: 0 auto; /* Center the images horizontally */
    padding-bottom: 25px;
}

@media (max-width: 1024px) {
    .container {
        width: 75%;
    }
    .fc {
        width: 75%;
    }
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
    .fc {
        width: 100%;
    }
}

.tab-content {
    display: none; /* Hide all tab contents by default */
    padding: 20px;
    border-top: none;
    font-family: 'dosvga', Arial, sans-serif;
}

.tab-content.active {
    display: block; /* Show only the active tab content */
}

.bc {
    width: 100%;
    color: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 0;
    border-radius: 0; /* Make the curve blocky */
}

.button {
    border-radius: 0;
}

/* Ensure the logo matches the width of the .fc container */
.image-container img {
    width: 100%; /* Make the logo fill its parent container */
    max-width: 100%; /* Prevent overflow */
    image-rendering: pixelated;
}

.image-container {
    width: 50%; /* Match the width of the .fc container */
    max-width: 75%; /* Prevent overflow */
    margin: 0 auto; /* Center the image container */
    box-sizing: border-box;
    padding-top: 20px;
}

img {
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.photo-gallery {
    margin: 20px auto;
    padding: 10px;
}

.photo-gallery h2 {
    font-family: 'western', Arial, sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three images per row */
    gap: 20px; /* Space between items */
    justify-items: center; /* Center items horizontally */
}

.gallery-item img {
    width: 100%; /* Ensure images fill their container */
    height: auto; /* Maintain aspect ratio */
}

footer {
    margin-top: 20px;
    padding: 10px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 14px;
}

.digi-archive-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 20px; /* Minimal padding */
    background-color: #000; /* Black background */
    color: #fff; /* White text */
}

.digi-archive-header h1 {
    margin: 0;
    font-size: 24px;
    font-family: Arial Black, Arial, sans-serif;
}

.digi-archive-title {
    font-weight: bold;
    font-style: italic;
    color: #fff; /* Black text */
}

.lorenzo-tam-title {
    font-weight: bold;
    color: #aaa; /* Lighter gray text */
    margin-left: 10px; /* Space between titles */
}