@font-face
{
    font-family: 'fixedsys';
    src: url('fixedsys.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	/* Ensure font renders crisply */
    font-smooth: never;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

body
{
    margin: 0;
    padding: 0;
}

/* Global font settings */
body, .main-page
{
    font-family: 'fixedsys', monospace !important;
    font-size: 64px;
    margin: 0;
    padding: 0;
	flex-grow: 1;
    background-color: #000000;
}

/* Ensure all text elements use fixedsys, which looks best without anti-aliasing */
body, .main-page, .section-text, .nav-button, .nav-section, .footer-text, .section-image
{
    font-family: 'fixedsys', monospace !important;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

/* Content area should expand */
.main-container
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.nav-button-container
{
    /* Fill available space equally */
    flex: 1 1 0;
    display: flex;
    height: 100%;
}

/* Navigation bar */
.nav-section
{
    position: relative;
    z-index: 100; /* Higher than grid overlays */
    background-color: #000000;
}

/* Navbar colon styling */
.nav-colon
{
    color: #ff0000;
    font-size: 96px;
    margin-right: -5px;
}

.nav-colon-hidden
{
    color: #00000000;
    font-size: 96px;
    margin-right: -5px;
}

.nav-button
{
    /* Prevent text stretching */
    white-space: nowrap;
    /* Fill entire container */
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 96px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
	text-decoration: none !important;
}
.nav-button:hover
{
    background-color: #3301a9;
    cursor: pointer;
}


.section-text
{
	color: #0000ff;
	/* Ensure text area stretches */
	flex: 1;
}
.section-text a { color: #0000ff !important; }
.section-text a:hover { color: #ff0000 !important; }


/* News Section */
.news-section-root { background-color: #330099; }

.news-section
{
    background-color: #330099;
    padding: 20px;
}

.news-grid-container
{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns by default */
    gap: 40px; /* Space between columns */
    height: 100%;
    width: 100%;
}

.news-entry-container
{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-entry-date-author {}

.news-entry-title, .news-entry-date
{
    color: #ffffff;
    text-align: left;
    padding: 0;
    margin: 0;
}
/* News title anchor */
.news-entry-title-anchor
{
    font-size: 32px;
    display: block;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}
.news-entry-title-anchor:hover
{
    color: #ffff00 !important;
    text-decoration: none !important;
}

.news-entry-date { font-size: 16px; }

.news-entry-author-by
{
    font-size: 16px;
    color: #ffffff;
    margin-left: 10px;
}

.news-entry-author-name
{
    font-size: 16px;
    color: #00ffff;
    margin-left: 5px;
}

.news-entry-image
{
    background-color: #ffff00;
    border: 50px solid #ffff00;
    padding: 0px;
    margin: 0px;
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: none; /* Disable scaling */
    object-position: left top;
}
.news-entry-image:hover
{
    filter: brightness(1.2);
    cursor: pointer;
}

.news-entry-button
{
    font-family: 'fixedsys', monospace !important;
    background-color: #000000;
    color: #ffff00;
    font-size: 32px;
    border: none;
    margin: 0px;
    padding: 5px 15px;
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
    width: auto;
    border: 4px solid #ffff00;
}
.news-entry-button:hover { background-color: #222222; }

/* Red skin */
.skin-red .news-section { background-color: #ff0000; }
.skin-red .news-entry-title-anchor
{
    color: #00ffff;
    border: 0px solid #ff0000;
}
.skin-red .news-entry-title-anchor:hover { color: #ffff00; }
.skin-red .news-entry-date-author{ border: 0px solid #ff0000; }
.skin-red .news-entry-image
{
    background-color: #ffff00;
    border: 4px solid #000000;
}
.skin-red .news-entry-image:hover { border: 4px solid #ffff00; }
.skin-red .news-entry-button
{
    background-color: #ffff00;
    color: #000000;
    border: 0px solid #ff0000;
}
.skin-red .news-entry-button:hover
{
    background-color: #000000;
    color: #ffff00;
    border: 0px solid #ff0000;
}

/* Home skin */
.skin-home .news-section { background-color: #330099; }
.skin-home .news-entry-title-anchor { color: #ffffff; }
.skin-home .news-entry-title-anchor:hover { color: #ffff00; }
.skin-home .news-entry-button
{
    background-color: #000000;
    color: #ffff00;
    border: 4px solid #ffff00;
}
.skin-home .news-entry-button:hover
{
    background-color: #ff0000;
    color: #ffff00;
    border: 4px solid #ffff00;
}

/* Switch to single column on mobile */
@media (max-width: 1520px)
{
    .news-grid-container
    {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: repeat(2, 1fr); /* Two rows */
        gap: 20px;
    }
}



/* Footer section */
.footer-button
{
    color: #0000ff;
    position: relative;
    text-decoration: none !important;
    font-size: 24px;
    padding: 8px 16px 16px 16px;
    border: 2px solid #0000ff;
    background-color: #000000;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Fallback for older browsers */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    .footer-button span.first-letter { color: #ff0000 !important; }
    .footer-button:hover span.first-letter { color: #ffff00 !important; }
}

.footer-button::first-letter
{
    color: #ff0000;
    font-size: 24px;
    transition: color 0.3s ease;
}

.footer-button:hover
{
    background-color: #ff0000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.footer-button:hover::first-letter { color: #ffff00; }
.footer-first-letter { color: #ff0000 !important; }
.footer-rest { color: #0000ff !important; }
.footer-button:hover .footer-first-letter { color: #ffff00 !important; }
.footer-button:hover .footer-rest { color: #ffffff !important; }


/* Footer text */
.footer-text
{
    color: #ffffff;
    font-size: 16px;
    text-align: center;
}

.error-text
{
    color: #ff0000;
}

/* Ensure buttons wrap on small screens */
@media (max-width: 600px)
{
    .footer-section .whboxlayout
	{
        flex-direction: column;
        gap: 5px;
    }
    
    .footer-button
	{
        width: 100%;
        text-align: center;
		margin: 2px 0;
    }
}


/* News Entry Page */
.news-single-entry-title
{
    font-size: 48px;
    color: #ffff00;
    margin-bottom: 20px;
}

.news-single-entry-date
{
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 30px;
}

.news-author-by
{
    font-size: 24px;
    color: #ffffff;
}

.news-author-name
{
    font-size: 24px;
    color: #00ffff;
    margin-left: 5px;
}

.news-single-entry-image
{
	width: 100%; /* Image fills the span's width */
	height: auto; /* Preserves aspect ratio */
	margin-bottom: 40px;
    border: 40px solid #ffff00;
	box-sizing: border-box; /* Include borders in width calc */
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

.news-single-entry-body
{
    font-size: 32px;
    color: #ffffff;
    line-height: 1.6;
}

.news-single-entry-back-link
{
    font-size: 32px;
    color: #0000ff;
    margin-top: 40px;
    display: block;
}

/* Image alignment classes */
.img-left
{
    float: left;
    margin: 0 20px 10px 0;
    shape-outside: margin-box;
}

.img-right
{
    float: right;
    margin: 0 0 10px 20px;
    shape-outside: margin-box;
    border: 4px solid #ffff00;
}

.gallery-container
{
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}


/* News navigation */
.news-nav-links
{
    margin-top: 40px;
    padding: 20px 0;
    border-top: 2px solid #ffff00;
    width: 100%;
}

.news-nav-links .whboxlayout
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.news-nav-links .whboxlayout > div
{
    flex: 1;
    text-align: center;
}

.news-nav-links .whboxlayout > div:first-child { text-align: left; }
.news-nav-links .whboxlayout > div:last-child { text-align: right; }

.news-nav-link
{
    font-size: 32px;
    color: #0000ff;
    text-decoration: none !important;
    padding: 8px 16px;
    border: 2px solid #0000ff;
    background-color: #000000;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0 5px;
}

.news-nav-link:hover
{
    background-color: #ff0000;
    color: #ffffff;
}

@media (max-width: 768px)
{
    .news-nav-links .whboxlayout
	{
        flex-direction: column;
        gap: 10px;
    }
    
    .news-nav-links .whboxlayout > div
	{
        text-align: center !important;
    }
    
    .news-nav-link
	{
        display: block;
        margin: 5px 0;
    }
}



/* Header Container */
.header-container
{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 540px;
    position: relative;
    z-index: 1; /* Creates new stacking context */
    isolation: isolate; /* Modern alternative */
    background-color: #000000;
}


/* Image Section */
.img-section
{
    width: 960px;
    height: 540px;
    overflow: hidden;
    flex-shrink: 0;
}
.img-section a, .img-section img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.header-bottom-row
{
	display: flex;
	flex-direction: row; /* Horizontal layout */
	height: 540px;
	width: 100%;
	background-color: #000000;
	z-index: 1001;
}

/* Grid Section */
.grid-section
{
    display: grid;
    grid-template-columns: repeat(3, 165px);
    grid-template-rows: repeat(3, 165px);
    gap: 23px;
    background-color: #000000;
    padding: 0;
    box-sizing: content-box;
    width: 564px;
    height: 540px;
    position: relative;
    z-index: 10; /* Lower than navbar */
    overflow: visible;
    margin: 0 0 0 23px;
}

/* Thumbnail container */
.thumb-container
{
    position: relative;
    width: 165px;
    height: 165px;
    overflow: visible;
    background-color: #000000;
    transform: translateZ(0);
    will-change: transform;
}

/* Border overlay */
.border-overlay
{
    position: absolute;
    top: -23px;
    left: -23px;
    right: -23px;
    bottom: -23px;
    pointer-events: none;
    z-index: 1; /* Base */
    border: 23px solid transparent;
    box-sizing: border-box;
    display: none;
    backface-visibility: hidden;
}

/* Apply clipping only to top/bottom */
.thumb-container.top-row .border-overlay { clip-path: inset(23px 0 0 0); }

.thumb-container.bottom-row .border-overlay
{
    clip-path: inset(0 0 23px 0);
    bottom: -22px; /* Fine-tune positioning */
}

/* Middle rows - no clipping */
.thumb-container:not(.top-row):not(.bottom-row) .border-overlay { clip-path: inset(0); }

.border-overlay.border-hover
{
    display: block;
    border-color: #ff0000 !important;
    z-index: 3;
}

.border-overlay.border-selected
{
    display: block;
    border-color: #ffff00;
    z-index: 2;
}

.grid-section img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    position: relative;
    z-index: 5;
    /* Chrome-specific crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Prevent blurring during transforms */
    backface-visibility: hidden;
    transform: translateZ(0);
}



/* Link Section */
.link-section
{
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #000000;
    height: 540px; /* Match grid section */
    overflow: hidden;
    position: relative;
}

/* Button container */
.link-section > .w-container
{
    width: 100% !important;
    height: 165px;
    margin: 0;
    padding: 0;
    border: none !important;
}

/* First button - align with top grid row */
.link-section > .w-container:first-child { margin-top: 0px; }

/* Link button common styles */
.link-button
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 165px;
    font-size: 64px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    color: inherit !important;
}

.link-button-text
{
    position: relative;
    z-index: 2; /* Higher than button's z-index */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-button-text-inner
{
    background-color: rgba(0);
    padding: 0px;
    margin-top: 0px;
}

.home-button .link-button
{
    background-color: #111111;
    color: #ffff00 !important;
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 74px 82px;
    position: relative; /* Needed for z-index */
    z-index: 1; /* Ensure text appears above background */
}

.download-button .link-button
{
    background-color: #330099;
    color: #ffff00 !important;
}

.play-button .link-button
{
    background-color: #ffff00;
    color: #000000 !important;
}

.link-button:hover
{
    background-color: #ff0000 !important;
    color: #ffffff !important;
}

/* Vertical borders between buttons */
.link-section > .w-container:not(:last-child)::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 23px; /* Match grid gap */
    background-color: #000000;
    z-index: 5;
    bottom: -11px; /* Position between buttons */
}

.header-container
{
    display: flex;
    height: 540px;
    width: 100%;
    background-color: #000000;
    gap: 0;
    padding: 0;
    margin: 0;
}



@media (max-width: 1679px)
{
    .header-container
	{
        flex-direction: column;
        height: 1080px !important;
        width: 960px;
        margin: 0 auto;
        z-index: 1000;
        position: relative;
    }
    
    .img-section
	{
        height: 540px;
        width: 100%;
        z-index: 1002;
    }
    
    .grid-section
	{
        height: 100%;
        width: 564px;
        margin: 0;
    }
    
    .link-section
	{
        height: 100%;
        width: 396px; /* 960px - 564px = 396px */
        display: flex;
        flex-direction: column;
    }
    
    .link-section > .w-container
	{
        height: 165px;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Remove vertical borders between buttons */
    .link-section > .w-container:not(:last-child)::after { display: none; }    
    /* Adjust vertical spacing */
    .link-section > .w-container:not(:first-child) { margin-top: 23px !important; }
}