@font-face {
    font-family: 'League Spartan';
    src: url('LeagueSpartan-Bold.woff2') format('woff2'),
        url('LeagueSpartan-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* BEGIN HEADER/NAV */
/* BEGIN HEADER/NAV */
header {
    background: transparent;
    padding: 1rem 0;
    position: relative;
}

#header img {
    border: none;
    text-shadow: none;
    box-shadow: none;
    height: auto; /* let the height scale with width */
    max-width: 725px;
    width: 100%; /* allow shrinkage inside container */
}

/* Header content: logo + nav */
.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Logo/banner container */
.header-content > a {
    display: flex;
    align-items: center;
    min-width: 0;
}

header img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#header .header-banner {
    max-width: 725px;
    width: auto;
    height: auto;
}

/* responsive logo swap - show banner for large screens, logo for small screens */
#header .header-logo {
    display: block !important;
    max-height: 60px; /* cap logo height on smaller screens */
    width: auto;
    height: auto;
}

#header .header-banner {
    display: none !important;
}

@media (min-width: 850px) {
    #header .header-banner {
        display: block !important;
    }
    
    #header .header-logo {
        display: none !important;
    }
    
    /* allow banner to scale dynamically - prevent wrapping */
    .header-content {
        flex-wrap: nowrap;
    }

    /* banner container can shrink to make room for nav, but never exceeds original size */
    .header-content > a {
        flex: 1 1 0;
        min-width: 0;
        max-width: 725px; /* original size of logo file */
    }

    #header .header-banner {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    /* nav maintains its size - priority over banner shrinking */
    #site-nav {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    #header .header-logo {
        max-height: 50px;
    }
}

/* Shared nav links */
#site-nav a,
#site-nav a:link,
#site-nav a:visited,
#site-nav a:hover,
#site-nav a:active {
    color: white;
    text-decoration: none;
}

/* Nav always visible, horizontal layout */
#site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1; /* take remaining space next to logo */
    justify-content: flex-end; /* push links to the right */
    background: transparent;
    padding: 0;
    width: auto;
    margin-top: 0;
}

/* Nav links */
#site-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: bold;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}

    #site-nav a:hover {
        background: rgba(255, 255, 255, 0.1);
    }

/* Header content layout */
.header-content {
    justify-content: space-between; /* logo left, nav right */
    max-width: 1200px; /* match main content width */
    margin: 0 auto; /* center within the page */
    width: 100%; /* stretch across header */
}

/* Desktop breakpoint */
@media (min-width: 768px) {
    #site-nav {
        gap: 1rem;
    }

    #site-nav a {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 768px) {
    /* keep logo and nav inline, prevent wrapping */
    .header-content {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    
    .header-content > a {
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* Ensure logo doesn't take too much space (only applies to logo, not banner) */
    #header .header-logo {
        max-width: 80px;
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    header img {
        max-width: 55%;
        max-height: 50px;
    }

    #menu-btn {
        font-size: 1.5rem;
    }

    #site-nav {
        flex-shrink: 1;
        min-width: 0;
        gap: 0.25rem;
    }
    
    #site-nav a {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
}


@media (max-width: 360px) {
    header img {
        max-width: 40%;
        max-height: 40px;
    }

    #menu-btn {
        font-size: 1rem;
    }

    #site-nav {
        flex-shrink: 1;
        min-width: 0;
        gap: 0.125rem;
    }
    
    #site-nav a {
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }
}

/* END NAV MENU */
/* END NAV MENU */

body {
    margin: 0;
    background-color: #001866;
    background-image: repeating-linear-gradient(45deg, #001866 0px, #001866 15px, #31338D 15px, #31338D 30px);
    color: #000;
    font-family: Roboto, sans-serif;
    font-size: 1.12rem;
}

h1 {
    font: 2.0rem League Spartan, Roboto, sans-serif;
    margin: 0;
    color: #FFF;
    padding: 15px 5px;
    background-color: firebrick;
    text-align: center;
    border-bottom: solid 3px black;
    -webkit-border-radius: 10px 10px 0px 0px; 
    border-radius: 10px 10px 0px 0px;
}

h2 {
    font: 2.0rem League Spartan, Roboto, sans-serif;
    margin: 0;
    padding: 10px;
    color: firebrick;
}

h3 {
    font: 1.7rem League Spartan, Roboto, sans-serif;
    margin: 0;
    padding: 10px;
    color: firebrick
}

h4 {
    font: 1.3rem League Spartan, Roboto, sans-serif;
    margin: 0;
    padding: 10px;
    color: firebrick;
}

p {
    margin: 0;
    padding-bottom: .5rem;
    padding: 10px;
}

#left > p {
    padding: .5rem 1.5rem;
}

a:link {
    color: #001866;
    text-decoration: none;
}

a:visited {
    color: #001866;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: #D5D814;
}

/* todo colors here */
hr {
    height: 2px;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(rgba(253, 255, 114, 1)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(253, 255, 114, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(253, 255, 114, 1), rgba(0, 0, 0, 0));
    padding: 0;
    border-top: 1px solid #2A9995;
    border-bottom: 1px solid #2A9995;
    border-left: 0;
    border-right: 0;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

blockquote {
    font-style: italic;
    font-size: 1.2em;
    border: 2px dotted #000;
    padding-left: 15px;
    padding-right: 15px;
    font-family: Calibri;
    font-size: medium;
    background: #FFF;
}
/*
table {
    margin: 1rem;
    border-collapse: collapse;
}

th {
    background-color: #185151;
    color: #ecfefd;
    text-shadow: 1px 1px #000;
}

th, td {
    padding: .3rem;
    border: 1px solid #55CEC9;
    border-left: 1px dashed #55CEC9;
    border-right: 1px dashed #55CEC9;
    -webkit-box-shadow: 4px 4px 2px #0C403E;
            box-shadow: 4px 4px 2px #0C403E;
}

td {
    background-color: #CBFBF9;
}
*/
img {
    border: none;
    outline: 0;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 1px 1px 2px #000;
    box-shadow: 1px 1px 2px #000;
    border: 1px solid #000;
    max-width: 98%;
    height: auto;
}

.guide-sprite {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

/*Hide Mobile DIV By Default*/
#mobile {
    display: none;
}

#Articles, #Sections, #Users, #Redirects, #Pages, #Comments, #Tags {
    display: none;
}

    #Articles:target,
    #Sections:target,
    #Users:target, #Redirects:target, #Pages:target, #Comments:target, #Tags:target {
        display: block;
    }

    #Articles a,
    #Sections a, #Users a, #Redirects a, #Pages a, #Comments a, #Tags a {
        text-shadow: black 1px 1px 1px;
        font-weight: bold;
        background-color: #00F;
        color: #FFF;
        padding: 5px;
        text-decoration: none;
        border: 1px solid #000;
    }

        #Articles a:hover,
        #Sections a:hover,
        #Users a:hover, #Redirects a:hover, #Pages a:hover, #Comments a:hover, #Tags a:hover {
            text-shadow: black 1px 1px 1px;
            font-weight: bold;
            background-color: black;
            color: aliceblue;
            padding: 5px;
            text-decoration: none;
            border: 1px solid #000;
        }

#categories a {
    text-shadow: black 1px 1px 1px;
    font-weight: bold;
    background-color: #2B6B13;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
    border: 1px solid #000;
}

    #categories a:hover {
        text-shadow: black 1px 1px 1px;
        font-weight: bold;
        background-color: black;
        color: aliceblue;
        padding: 5px;
        text-decoration: none;
        border: 1px solid #000;
    }

#cHead {
    margin: 0px;
    margin-top: 40px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    text-shadow: black 1px 1px 1px;
    text-align: center;
}

#hText {
    font-size: 85px;
    font-family: Triforce;
}

    #hText a:link, #hText a:visited, #hText a:hover, #hText a:active {
        text-decoration: none;
        color: #b50000 /*#f44336*/ /*#F00*/;
    }

#sText {
    font-size: 20px;
    color: rgba(255, 235, 59, 0.87) /*rgba(255, 235, 59, 0.96)*/ /*#FF0*/;
    font-weight: bold;
}

div#wrapper {
    background-color: #FAF9F6 /* off white */;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid black;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 90%;
    max-width: 1300px;
    height: auto;
    overflow: hidden;
}

strong a {
    text-decoration: none;
    color: #000;
}

#editform {
    margin: 0 auto;
    max-width: /*90%*/ 825px;
}

#Leditform {
    float: left;
    width: /*15%*/ 175.5px;
    min-width: 100px;
    margin-left: 5%;
}

#editform input,
#editform label,
#editform textarea,
#editform select {
    display: block;
    margin-bottom: 15px;
}

#editform textarea {
    height: 400px;
}

#editform select {
    padding: 1.4px;
}

#editform input {
    padding: 0.8px;
    margin-top: 3px;
}


#ctl00_Content_SaveButton {
    display: block;
    margin-top: 10px;
}

#Teditform {
    float: right;
    width: /*80%*/ 605.6px;
}

    #Teditform input,
    #Teditform textarea {
        width: 95%;
        max-width: 600px;
    }

    #Teditform #ctl00_Content_RequiredFieldValidator1 {
        float: right;
    }

#ctl00_Content_TPageComments {
    height: 21.6px;
    margin-top: 8px;
}

#flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#left {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    width: 80%;
}

#ctl00_Content_archives {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2
}

#pContent {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}

#ctl00_Content_slideshowwrapper {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1
}

#ctl00_Content_CPS {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
}

#ctl00_Content_cPanel {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
}

#CPS-Widget {
    height: 390px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 0 2px 0 #333;
    box-shadow: 0 0 2px 0 #333;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 95%;
    border: 1px solid #000;
}

    #CPS-Widget #LH-CPS-H2 {
        font-size: 20px;
        text-shadow: none;
        text-align: center;
        color: #FFF;
        background-color: #900 /*rgb(18,64,1)*/; /*#2B6B13;*/
        border-bottom: 1px solid #000;
        -webkit-border-radius: 8px 8px 0px 0px;
        border-radius: 8px 8px 0px 0px;
    }

#LH-CPS-H2 a {
    text-decoration: underline;
    color: #FFF;
}

#ctl00_Content_Author {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 0 2px 0 #333;
    box-shadow: 0 0 2px 0 #333;
    -webkit-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    width: 95%;
    border: 1px solid #000;
}

#pContent {
    line-height: 27px;
    letter-spacing: 0.5px;
}

#ctl00_Content_archives div:first-child {
    margin-top: 0;
}

/*AUTHOR BIO*/
#ctl00_Content_Author #AuthorH2 {
    font-size: 20px;
    text-shadow: none;
    text-align: center;
    color: #FFF;
    background-color: #900 /*rgb(18,64,1)*/ /*#2B6B13*/;
    border-bottom: 1px solid #000;
    -webkit-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
}

/*PORTAL*/
#ctl00_Content_portal {
    width: 95.5%;
    margin: .2% auto .8% auto;
    padding: 7px;
}

/* ARTICLE META DATA */
#articleMeta { /*background-color: wheat #CCC;*/ /* padding:3%;*/
    box-shadow: 0 0 1px 0 black; /* border-bottom:1px solid #000;*/
    width: 93.9%;
    height: auto;
    font-weight: 300;
    font-size: 12px;
    margin: 0 auto 5px auto;
}

/*ADS*/
#topADDesktop, #topADMobile {
    text-align: center;
    margin-bottom: 10px;
    display: none;
}

@media (min-width: 729px) {
    #topADDesktop {
        display: block;
    }

    #topADMobile {
        display: none;
    }
}

@media (min-width: 320px) and (max-width: 729px) {
    #topADDesktop {
        display: none;
    }

    #topADMobile {
        display: block;
    }
}

#RightAdDesktopATF {
    display: none;
}

#RightAdDesktopBTF {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    #RightAdDesktopATF img, #RightAdDesktopBTF img {
        border: none;
    }

@media (min-width: 749px) {
    #RightAdDesktopATF {
        display: block;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 10px;
    }
}

/* SECTION LINKS MENU 217px min-width */
#SectionMenu {
    z-index: 1500;
    margin: 5px auto 1px auto;
    border-top: 1px solid #000;
    width: 100%;
}

@media (min-width: 750px) {
    #SectionMenu {
        margin-top: 0;
        border-top: none;
    }
}

    #SectionMenu ul {
        margin: 0;
        padding: 0;
    }

        #SectionMenu ul li {
            list-style: none;
            margin: 0;
            padding: 0 0 0 10px;
            border-bottom: 1px solid #ddd;
        }

            #SectionMenu ul li:nth-child(odd) {
                background-color: #EFEFEF;
            }

            #SectionMenu ul li:nth-child(even) {
                background-color: #FAF9F6; /* off white */
            }

            #SectionMenu ul li a:link, #SectionMenu ul li a:visited {
                display: flex;
                align-items: center;
                gap: 8px;
                text-decoration: none;
                width: auto;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
                padding: 10px 0;
                text-align: left;
                color: firebrick; /* Changed to firebrick */
            }

            /* Alternating sprites for SectionMenu links */
            /* TODO this should be moved to Guide.ascx control override for NC */
            #SectionMenu ul li > a::before {
                content: "";
                width: 16px;
                height: 16px;
                flex: 0 0 16px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

            #SectionMenu ul li:nth-child(odd) > a::before {
                background-image: url("/assets/nintendocastle.com/images/layout/mushroom_sprite.png");
            }

            #SectionMenu ul li:nth-child(even) > a::before {
                background-image: url("/assets/nintendocastle.com/images/layout/1up_sprite.png");
            }

            #SectionMenu ul li:hover {
                background-color: #E0F2F7; /* Light blue for hover */
            }

            #SectionMenu ul li a:hover {
                text-decoration: none;
                color: firebrick; 
            }

    /* Styling for "Click to Load Comments" button */
    #getComments {
        background-color: firebrick; 
        color: #FFFFFF; /* White text */
        font: 1.4rem League Spartan, Roboto, sans-serif;
        padding: 10px 20px;
        border: 2px solid black;
        border-radius: 5px;
        cursor: pointer;
        width: auto; /* Allow button to size naturally */
        display: block; /* Make it a block element for margin auto */
        margin: 15px auto; /* Center the button and add vertical spacing */
        text-align: center;
    }

    #getComments:hover {
        background-color: #FF3333; /* Lighter red on hover */
    }

    #SectionMenu span {
        display: block;
        width: 100%;
        height: 30px;
        border: 1px solid #000;
        border-left: none;
        border-right: none;
        font-family: 'League Spartan', sans-serif;
        font-size: 20px;
        text-align: center;
        background: firebrick;
        color: #FFF;
        font-weight: bold;
        padding-top: 5px;
    }

/* COMMENTS */
#ctl00_Content_Comments {
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px; /* Add some space above the comments section */
}

#ctl00_Content_Comments .comment {
    background-color: #FFFFFF; /* White background for individual comments */
    border: 2px solid black;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px; /* Space between comments */
}

#ctl00_Content_Comments .comment:last-child {
    margin-bottom: 0; /* No bottom margin for the last comment */
}

#ctl00_Content_Comments .comment p {
    margin: 0 0 5px 0;
    padding: 0;
    line-height: 1.5;
    color: #777; /* Set default color for the whole line to gray */
    font-size: 0.8em; /* Set default size for the whole line to smaller */
}

#ctl00_Content_Comments .commentUser {
    font-size: 1.5em; /* Larger font for Author Name relative to its parent p */
    font-weight: bold;
    color: firebrick; /* Retain firebrick color */
}

#ctl00_Content_Comments .commentText {
    color: black; /* Darker text for readability */
    display: block; /* Ensure it's on its own line */
    margin-top: 5px; /* Add some space above the comment text */
}

/* You might need to adjust existing #commentForm styles to fit */
#commentForm {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    padding-top: 20px; /* Add padding above the form */
}

#commentForm input[type="text"],
#commentForm textarea {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 8px;
    background-color: #FFF;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

#commentForm input[type="button"] {
    background-color: firebrick;
    color: #FFFFFF; /* White text */
    font: 1.0rem League Spartan, Roboto, sans-serif;
    padding: 8px 15px;
    border: 1px solid black;
    border-radius: 4px;
    cursor: pointer;
    width: auto;
    display: inline-block; /* Allow multiple buttons/elements side-by-side */
    margin: 10px 0;
    text-align: center;
}

#commentForm input[type="button"]:hover {
    background-color: #FF3333; /* Lighter red on hover */
}


    #commentForm label, #commentForm input, #commentForm textarea {
        float: left;
        width: 50%;
        margin-bottom: 5px;
        min-width: 270px;
    }

    #commentForm textarea {
        margin-bottom: 10px;
    }

#ctl00_Content_captcha {
    margin-bottom: 15px; /* Add space above the captcha */
    height: 383px;
}

/*HOMEPAGE WIDGET*/
#HOMEPAGE {
    width: 100%;
}

    #HOMEPAGE h2 {
        font-size: 20px;
        background-color: #009;
        color: #FFF;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom: 1px solid black;
        text-shadow: none;
        text-align: center;
        text-decoration: underline;
    }

        #HOMEPAGE h2:hover {
            background-color: #900;
        }

    #HOMEPAGE div span {
        margin-bottom: 8px;
    }

/*WALKTHROUGH*/
div#walkthrough {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 19px;
}

#walkthrough img {
    margin-right: 25px;
    border-right: solid 1px #000;
    margin: 0;
    padding: 0;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

div#walkthrough h2 {
    width: 90%;
    padding: 8px;
    text-shadow: #000 1px 1px 1px;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
    background-color: #900;
    margin: 10px auto;
    color: #FFF;
    display: block;
    border: 1px solid #000;
}

div#walkthrough h3 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 99%;
    max-width: 700px;
}

div#walkthrough div {
    height: auto;
    width: 99%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #000;
    background-color: #999;
}

    div#walkthrough div div {
        border: none;
        margin: 0px;
        padding: 0px;
    }

    div#walkthrough div a {
        color: #FFF;
        font-weight: bold;
        text-shadow: black 1px 1px 1px;
    }

        div#walkthrough div a:hover {
            color: #3CF;
            text-decoration: none;
        }

div#walkthrough li {
    margin-bottom: 5px;
    list-style: square;
}

#walkthrough p img {
    padding: 0px; /*border:1px solid #FFF;*/
    box-shadow: 0 0 8px 0 #000;
    border-radius: 2px 2px 2px 2px;
    margin: 10px;
    margin-left: 0px;
    margin-top: 0px;
}

div#walkthrough div.clear {
    height: 0;
}

@media (min-width: 1300px) {

    div#walkthrough div a {
        color: #FFF;
        font-weight: bold;
        text-shadow: black 1px 1px 1px;
    }

        div#walkthrough div a:hover {
            color: #3CF;
            text-decoration: none;
        }

    div#walkthrough div img {
        float: left;
        margin-right: 25px;
        border-right: solid 1px #000;
    }

    div#walkthrough li {
        margin-bottom: 5px;
    }
}

@media (min-width: 1150px) and (max-width: 1299px) {

    div#walkthrough div img {
        float: left;
        margin-right: 25px;
        border-right: solid 1px #000;
    }

    div#walkthrough li {
        margin-bottom: 5px;
    }
}

@media (min-width: 1045px) and (max-width: 1149px) {

    div#walkthrough div img {
        float: left;
        margin-right: 25px;
        border-right: solid 1px #000;
    }

    div#walkthrough li {
        margin-bottom: 5px;
    }
}

@media (min-width: 500px) and (max-width: 1044px) {
    div#walkthrough div {
        width: 400px;
    }

    div#walkthrough h3 {
        max-width: 400px;
    }

    div#walkthrough ul {
        padding: 20px
    }

    div#walkthrough div img {
        float: none;
        max-width: 100%;
        margin-right: 0px;
        border-bottom: 1px solid #000;
        border-right: none;
    }

    div#walkthrough li {
        margin-bottom: 5px;
    }
}

@media (min-width: 321px) and (max-width: 499px) {

    div#walkthrough div {
        width: 272px;
    }

    div#walkthrough h3 {
        max-width: 272px;
    }

    div#walkthrough ul {
        padding: 20px
    }

    div#walkthrough div img {
        float: none;
        max-width: 100%;
        border-bottom: 1px solid #000;
        border-right: none;
    }

    div#walkthrough li {
        margin-bottom: 10px;
        margin-top: 10px;
    }
}

@media (max-width: 320px) {

    div#walkthrough div {
        width: 272px;
    }

    div#walkthrough h3 {
        max-width: 272px;
    }

    div#walkthrough ul {
        padding: 20px
    }

    div#walkthrough div img {
        float: none;
        max-width: 100%;
        border-bottom: 1px solid #000;
        border-right: none;
    }

    div#walkthrough ul {
        margin-left: 5px;
    }

    div#walkthrough li {
        margin-bottom: 10px;
        margin-top: 10px;
        text-indent: -5px;
    }
}







#right {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    font-size: 1rem;
    background-color: #FAF9F6; /* off white */ /*
    background-color: beige;*/
    vertical-align: top;
    border-left: 1px solid #000;
    -webkit-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    width: 20%;
    min-width: 221px;
    padding-bottom: 10px;
}

    #right h4 {
        border-bottom: 1px dashed #2A9995;
        font-family: 'League Spartan', sans-serif;
        font-size: 1.3em;
    }

    #right a {
        font-weight: bold;
    }

#socialLink a#FB, #socialLink a#Twitter, #socialLink a#YouTube, #socialLink a#GooglePlus {
    display: block;
    border: 1px solid #000;
    text-align: center;
    font-size: 20px;
    height: 25px;
    padding: 5px;
    width: 90%;
    margin: 5px auto;
    color: aliceblue;
}

#FB {
    background-color: #3b5998;
}

#Twitter {
    background-color: #00aced;
}

#YouTube {
    background-color: #cd201f;
}

#GooglePlus {
    background-color: #d34836;
}

.clear {
    clear: both;
    height: 0;
}

fieldset {
    margin: 1rem 5%;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px dashed #2A9995;
}

    fieldset legend {
        font-style: italic;
        font-size: 1rem;
    }

    fieldset div {
        padding: .25rem;
    }

        fieldset div label {
            display: block;
            width: 9.9rem;
            float: left;
            text-align: right;
            padding-right: 1rem;
        }

        fieldset div input,
        fieldset div textarea,
        fieldset div select {
            width: 45%;
            max-width: 20rem;
            margin: 0;
        }

        fieldset div textarea {
            -ms-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

        fieldset div #submitButton {
            width: 5rem;
        }

        fieldset div span {
            display: block;
            clear: left;
            font-size: .8rem;
            padding-left: 10.9rem;
            color: red;
            font-style: italic;
        }

        fieldset div #count {
            color: black;
            font-style: normal;
        }

/* Slideshow container */

#ctl00_Content_slideshowwrapper * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.slideshow-container {
    position: relative;
    margin: 1.5rem auto;
    padding: 0;
}

    .slideshow-container img {
        padding: 0;
        margin: 0;
    }

.mySlides {
    display: none;
}

    /*#ctl00_Content_slideshowwrapper .slideshow-container .mySlides p img{max-height:325px; max-width:700px;}*/
    .mySlides p {
        text-align: center;
        padding: 0;
    }

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

/* Position the "next button" to the right */
.next {
    right: 6px;
    color: #fff;
}

.prev {
    left: 6px;
    color: #fff;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

/*
    Archive CSS
*/
.archiveEntry {
    width: 97%;
    margin-bottom: 15px;
    margin-top: 10px;
    border: 1px solid #000;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    -webkit-box-shadow: 0 0 3px 0 #333;
    box-shadow: 0 0 3px 0 #333;
    -webkit-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}

    .archiveEntry h2, blockquote h2 {
        border-bottom: 1px solid #000;
        font-size: 1.8em;
        display: normal;
        padding: 0;
        background-color: #900 /*rgb(18,64,1)*/ /*#2B6B13*/;
        margin: 0;
        height: auto;
        -webkit-border-radius: 4px 4px 0px 0px;
        border-radius: 4px 4px 0px 0px;
    }

        .archiveEntry h2 a {
            color: #FFF;
            text-shadow: #000 1px 1px 1px;
            padding: 8px;
            display: block;
            text-decoration: none;
        }

            .archiveEntry h2 a:hover, .archiveEntry h2:hover {
                background-color: #009;
                text-decoration: none;
            }

        .archiveEntry blockquote h2, .archiveEntry blockquote h2:hover, blockquote h2, blockquote h2 a {
            background-color: #FFF;
            color: #000;
            text-shadow: none;
            border: none;
            -webkit-border-top-left-radius: 0;
            border-top-left-radius: 0;
            -webkit-border-top-right-radius: 0;
            border-top-right-radius: 0;
            text-decoration: none;
        }

    .archiveEntry img {
        max-width: 300px;
        max-height: 167px;
        float: left;
        margin: 5px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-top: 0px;
        padding: 0px; /*border:1px solid #FFF;*/
        -webkit-box-shadow: 1px 1px 2px 0 #000;
        box-shadow: 1px 1px 2px 0 #000;
        -webkit-border-radius: 2px 2px 2px 2px;
        border-radius: 2px 2px 2px 2px;
    }

    .archiveEntry .date {
        margin: 10px;
    }

    .archiveEntry p {
        margin: 0;
        padding: 0;
    }

        .archiveEntry p:last-of-type {
            margin: 5px;
        }

div#ctl00_Content_archives p#archiveLinks {
    text-align: center;
    border-top: 1px solid black;
    background-color: #009;
    color: white;
}

    div#ctl00_Content_archives p#archiveLinks a {
        color: white;
    }

        div#ctl00_Content_archives p#archiveLinks a:hover {
            color: lightgray;
        }

/*
div#ctl00_Content_archives{
    width:90%;
    border:1px solid black;
    border-top:none;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
	border-radius: 5px;
}

div#ctl00_Content_archives h2:first-child {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

div#ctl00_Content_archives h2 a {
	display:block; 
	width:100%; 
	text-decoration:none; 
	color:#b3ffff;
	font-size: 2rem;
	}
div#ctl00_Content_archives h2 a:hover, 
div#ctl00_Content_archives h2:hover a {
	color:#00661b;
	}
div#ctl00_Content_archives h2 {
	background-color:#00661b;
	border-top:1px solid black; 
	border-bottom:1px solid black;
	}
div#ctl00_Content_archives h2:hover {
	background-color:aliceblue;
	}
*/

#ctl00_Content_tLogin {
    margin: 1rem auto;
}


#footer {
    width: 100%;
    min-height: 2rem;
    background-color: #001866;
    margin-top: 1rem;
    border-top: 3px solid #31338D;
    color: #FFF;
}

    #footer ul {
        display: block;
        margin: 0 auto;
        padding: 0;
        padding-bottom: 1.5rem;
        padding-top: 1rem;
        list-style: none;
        text-align: center;
    }

    #footer li {
        display: inline-block;
        padding: 0 .5rem;
    }

    #footer a {
        color: #FFF;
    }

        #footer a:hover {
            color: #FECC09;
        }


    #footer p {
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: .8rem;
        padding-bottom: .5rem;
    }

/* Footer links and social media */
.footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 0.25rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-nav a {
    color: #FFF;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #FECC09;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.social-link {
    color: #FFF;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    background-color: #31338D;
    transform: scale(1.1);
}

.social-link i {
    width: 1.5rem;
    height: 1.5rem;
}

/* Responsive footer */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-nav {
        justify-content: center;
        gap: 1rem;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-nav a {
        font-size: 0.8rem;
    }

    .footer-social {
        gap: 0.75rem;
    }

    .social-link {
        padding: 0.375rem;
    }

    .social-link i {
        width: 1.25rem;
        height: 1.25rem;
    }
}


/*
    Media Queries
*/

@media (min-width: 1650px) {

    .slideshow-container {
        width: 800px;
        height: 600px;
    }

        .slideshow-container img {
            max-width: 800px;
            max-height: 600px;
        }

    .next {
        right: -50px;
        color: #000;
    }

    .prev {
        left: -50px;
        color: #000;
    }


    #headerLogo {
        width: 250px;
        height: 250px;
    }

    #headerText {
        font-size: 100px;
        padding-top: 60px;
    }

    #subtitleText {
        font-size: 40px;
        padding-left: 250px;
    }
}


@media (min-width: 1300px) and (max-width: 1649px) {

    .slideshow-container {
        width: 776px;
        height: 582px;
    }

        .slideshow-container img {
            max-width: 776px;
            max-height: 582px;
        }

    .next {
        right: -50px;
        color: #000;
    }

    .prev {
        left: -50px;
        color: #000;
    }
}

@media (min-width: 1000px) and (max-width: 1299px) {
    .slideshow-container {
        width: 640px;
        height: 480px;
    }

        .slideshow-container img {
            max-width: 640px;
            max-height: 480px;
        }
}

@media (min-width: 750px) and (max-width: 999px) {


    .slideshow-container {
        width: 516px;
        height: 387px;
    }

        .slideshow-container img {
            max-width: 516px;
            max-height: 387px;
        }

    #Teditform {
        max-width: 510px;
    }
}

/*Edit Form Media Query*/
@media (min-width: 850px) and (max-width: 999px) {
    #Teditform {
        max-width: 610px;
    }
}

@media (min-width: 500px) and (max-width: 749px) {


    h1 {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    .slideshow-container {
        width: 461px;
        height: 346px;
    }

        .slideshow-container img {
            max-width: 461px;
            max-height: 346px;
        }

    #nav a,
    #nav a:hover {
        padding: 2px;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    div#wrapper {
        width: 100%;
        border-left-style: none;
        border-right-style: none;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    #flexbox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #left {
        width: 100%;
        display: block;
    }

    #right {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        border-top: 1px solid black;
        border-left: 0px solid black;
        padding-bottom: .2rem;
    }

        #right hr {
            display: none;
        }

        #right h4 {
            width: 100%;
            margin-left: .1rem;
            margin-right: .1rem;
        }

        #right .sidebarEntry {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            text-align: center;
            width: 40%;
            margin-left: .1rem;
            margin-right: .1rem;
            padding: .2rem;
            border-left: 1px dashed #2A9995;
            border-right: 1px dashed #2A9995;
            border-bottom: 1px dashed #2A9995;
        }

    #categories,
    #Articles,
    #Sections,
    #Users, #Redirects, #Pages, #Comments, #Tags,
    #editform {
        display: none;
    }


    #footer {
        margin: 0;
        border-style: none;
    }
}

@media (min-width: 321px) and (max-width: 499px) {

    #hText {
        font-size: 45px;
    }

    #sText {
        font-size: 20px;
    }

    #header {
        margin-top: 63px;
        width: 100%;
    }

    #cHead {
        margin-bottom: 10px;
    }

    h1 {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    div#ctl00_Content_archives h2 a {
        font-size: 1.8rem;
    }

    .archiveEntry p:last-of-type {
        padding: 10px;
    }

    .archiveEntry img {
        max-width: 280px;
        text-align: center;
        float: none;
        display: block;
        margin: 5px auto 0 auto;
    }

    #left > p {
        padding: .5rem 1rem;
    }

    #nav ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        #nav ul li {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            border-left-style: none;
            width: 30%;
        }

    #nav li:last-child {
        border-right-style: none;
    }

    #nav a,
    #nav a:hover {
        padding: 2px;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    div#wrapper {
        width: 100%;
        border-left-style: none;
        border-right-style: none;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    #flexbox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #left {
        width: 100%;
        display: block;
    }

    #right {
        display: block;
        width: 100%;
        border-left-style: none;
        border-top: 1px solid black;
    }

    #CPS-Widget {
        height: 440px;
    }

    #categories,
    #Articles,
    #Sections,
    #Users, #Redirects, #Pages, #Comments, #Tags,
    #editform {
        display: none;
    }

    fieldset div label {
        width: auto;
        text-align: left;
        font-size: .9rem;
        padding-right: 0rem;
    }

    fieldset div input,
    fieldset div textarea,
    fieldset div select {
        float: right;
    }

    fieldset div span {
        clear: both;
        padding-left: 0rem;
        font-size: .7rem;
    }

    fieldset div #count {
        width: 100%;
        text-align: right;
    }

    .slideshow-container {
        width: 100%;
        height: auto;
        margin: 0 auto;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

        .slideshow-container img {
            max-width: 100%;
            border-style: none;
            border-bottom: 1px solid black;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

    #footer {
        margin: 0;
        border-style: none;
    }
}

@media (max-width: 320px) {

    #hText {
        font-size: 45px;
    }

    #sText {
        font-size: 20px;
    }

    #header {
        margin-top: 63px;
        width: 100%;
    }

    #cHead {
        margin-bottom: 10px;
    }

    h1 {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    div#ctl00_Content_archives h2 a {
        font-size: 1.8rem;
    }

    .archiveEntry p:last-of-type {
        padding: 10px;
    }

    .archiveEntry img {
        max-width: 280px;
        text-align: center;
        float: none;
        display: block;
        margin: 5px auto 0 auto;
    }

    #left > p {
        padding: .5rem .75rem;
    }

    #nav ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        #nav ul li {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            border-left-style: none;
            width: 30%;
        }

    #nav li:last-child {
        border-right-style: none;
    }

    #nav a,
    #nav a:hover {
        padding: 2px;
        font-size: 1rem;
        line-height: 1.4rem;
    }

    div#wrapper {
        width: 100%;
        border-left-style: none;
        border-right-style: none;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

    #flexbox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #left {
        width: 100%;
        display: block;
    }

    #right {
        display: block;
        width: 100%;
        border-left-style: none;
        border-top: 1px solid black;
    }

    #CPS-Widget {
        height: 440px;
    }

    #categories,
    #Articles,
    #Sections,
    #Users, #Redirects, #Pages, #Comments, #Tags,
    #editform {
        display: none;
    }

    fieldset div label {
        width: auto;
        text-align: left;
        font-size: .8rem;
        padding-right: 0rem;
    }

    fieldset div input,
    fieldset div textarea,
    fieldset div select {
        float: right;
    }

    fieldset div span {
        clear: both;
        padding-left: 0rem;
        font-size: .6rem;
    }

    fieldset div #count {
        width: 100%;
        text-align: right;
    }

    .slideshow-container {
        width: 100%;
        height: auto;
        margin: 0 auto;
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }

        .slideshow-container img {
            max-width: 100%;
            border-style: none;
            border-bottom: 1px solid black;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

    #footer {
        margin: 0;
        border-style: none;
    }
}



/*TABULAR DATA*/

div.tabular table {
    border-collapse: collapse;
    border: 1px solid #000;
    vertical-align: top;
    max-width: 95%;
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 5px auto;
}

div.tabular th {
    background-color: #2B6B13;
    font-weight: bold;
    color: #FFF;
    text-shadow: #000 1px 1px 1px;
}

div.tabular td, div.tabular th {
    padding: 5px;
}

#content #left #guide table img {
    margin: 0px;
    padding: 0px;
    box-shadow: none;
}

@media (max-width: 749px) {
    div.tabular tbody {
        -webkit-overflow-scrolling: touch;
        background: -webkit-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, -webkit-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
        background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
        background-size: 10px 100%, 10px 100%;
        background-attachment: scroll, scroll;
        background-repeat: no-repeat;
    }

        div.tabular tbody tr:first-child {
            background-image: -webkit-linear-gradient(left, #CCC 50%, rgba(255, 255, 255, 0) 100%);
            background-image: linear-gradient(to right, #CCC 50%, rgba(255, 255, 255, 0) 100%);
            background-repeat: no-repeat;
            background-size: 20px 100%;
        }

        div.tabular tbody tr:last-child {
            background-image: -webkit-linear-gradient(right, #CCC 50%, rgba(255, 255, 255, 0) 100%);
            background-image: linear-gradient(to left, #CCC 50%, rgba(255, 255, 255, 0) 100%);
            background-repeat: no-repeat;
            background-position: 100% 0;
            background-size: 20px 100%;
        }

    div.tabular table {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        background: none;
        border: none;
    }

    div.tabular thead {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
    }

    div.tabular tbody {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
    }

    div.tabular tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    div.tabular td, div.tabular th {
        display: block;
        border: 1px solid #000;
        height: 20px;
    }

    div.tabular td {
        background-image: none !important;
        border-left: 0;
    }

    div.tabular th:not(:last-child), td:not(:last-child) {
        border-bottom: 0 !important;
    }
}

/* GAME CARDS */
.desktop-img {
    display: block;
}

.mobile-img {
    display: none;
}

.game-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 24px auto;
    max-width: 1000px;
    padding: 0 16px;
}

.game-card {
    flex: 1 1 calc(50% - 24px); /* max 2 per row with gap */
    max-width: calc(50% - 24px);
    display: flex;
    align-items: stretch;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin: 24px auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
    font-family: sans-serif;
    border: 3px solid #000;
}

.game-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.game-title {
    font-size: 1.2em;
    font-weight: bold;
    color: firebrick;
    text-decoration: none;
}

.game-subheader {
    margin-top: 4px;
    font-size: 0.9em;
    color: #555;
}

.game-guides {
    margin-top: 12px;
    padding-left: 20px;
    list-style: disc;
}

    .game-guides li {
        margin-bottom: 3px;
    }

    .game-guides a {
        text-decoration: none;
    }

        .game-guides a:hover {
            text-decoration: underline;
        }

.game-image {
    width: 200px; /* fixed desktop width */
    flex-shrink: 0;
    display: flex; /* enables flexbox centering */
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center (optional) */
    background: #FAF9F6; /* off white */
}

    .game-image img {
        object-fit: cover; /* show entire image */
        height: auto; /* keep aspect ratio */
        max-height: 100%; /* prevent overflow */
        width: 100%; /* scale to fit width */
        border: none;
        outline: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0;
        box-shadow: 0;
        border: 0;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

@media (max-width: 999px) {
    .desktop-img {
        display: none !important;
    }

    .mobile-img {
        display: block !important;
    }

    .game-card {
        flex-direction: column;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .game-image {
        order: -1;
        width: 100%;
        height: 200px;
        overflow: hidden; /* clips anything overflowing */
        position: relative;
    }

        .game-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
}
/* END GAME CARDS */