body {
    background: #FFEAC5;
}
@media (max-width: 768px) {
   
    .swiper .p-3 {
        padding: 0.5rem !important;
    }

    .fudcol img {
        width: 150px !important;
        height: 150px !important;
    }
    .swiper-container {
        overflow: hidden;
    }

    .ingredient-item-card {
        padding: 0.75rem; /* Adjust padding when it's full width for better spacing */
        background: #6C4E31;
        border: 1px solid rgb(255, 219, 181, 0.25);
        align-content: center;
    }
    .logoo {
        max-height: 40px; /* Adjust max height for logo */
        width: auto;
    }

}

/* --- Specific Responsive Adjustment for VERY Small Screens (1 item per row) --- */
@media (max-width: 575.98px) {
    /* This rule targets the .col-3 classes (which apply to extra-small screens)
       within your .meals row and forces them to take up 100% width. */
    .meals .col-3 {
        width: 100%; /* Makes the column take the full width of the row */
        flex: 0 0 50%; /* Ensures proper flexbox behavior for 100% width */
        max-width: 100%; /* Prevents it from exceeding 100% */
    }

    /* You might also want these related adjustments for better appearance */
    .ingredient-item-card {
        padding: 0.75rem; /* Adjust padding when it's full width for better spacing */
        background: #6C4E31;
        border: 1px solid rgb(255, 219, 181, 0.25);
        align-content: center;
    }

        .ingredient-item-card img {
            max-height: 100px; /* Make images slightly smaller for full-width items if desired */
        }

    .tab-pane.p-4 {
        padding: 1rem !important; /* Reduce tab content padding for smaller screens */
    }
}
.logoo {
    max-height: 50px;
}

.pnbtn {
    background: #FFEAC5;
    border: 1px solid rgba(96, 63, 38, .54);
    color: #6C4E31 !important;
    font-family: "Press Start 2P", system-ui !important;
    transition: .2s;
}

    .pnbtn:hover {
        transform: scale(1.1);
        background: #FFEAC5;
        border: 1px solid rgba(96, 63, 38, .54);
        color: #6C4E31 !important;
    }

.pnav {
    background: #603F26;
}

.pnav-link {
    color: #FFEAC5;
    font-family: "Roboto Flex", sans-serif;
}

    .pnav-link:hover {
        background: rgba(255, 234, 197, 0.3);
        color: #FFEAC5;
    }

.pactive {
    background: rgba(255, 234, 197, 0.3);
    color: #FFEAC5;
}

.pw {
    background: #FFEAC5;
    border: 3px solid #6C4E31;
}

.pw1 {
    font-family: "Press Start 2P", system-ui;
    color: #6C4E31;
}

.pw2 {
    font-family: "VT323", monospace;
    color: #6C4E31;
}

.pwbtn {
    font-family: "VT323", monospace;
    color: #6C4E31;
    text-decoration: none;
    border: 2px solid rgba(108, 78, 49, .54);
    background: #FFDBB5;
    width: 45%;
    transition: .2s;
}

    .pwbtn:hover {
        transform: scale(1.1);
        color: #FFDBB5;
        background: rgba(108, 78, 49, 0.8);
        border: 2px solid rgba(108, 78, 49, .54);
    }

.pwactive {
    transform: scale(1.1);
    color: #FFDBB5;
    background: rgba(108, 78, 49, 0.8);
    border: 2px solid rgba(108, 78, 49, .54);
}

.pwbtncont {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cont1 {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont1-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.4;
}

.pwrow {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.pwdl {
    background: #6C4E31;
    text-align: center;
    color: #FFDBB5;
    font-family: "VT323", monospace;
}

.meowww {
    max-height: 150px;
}

.cont2 {
    background: #FFDBB5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.steptxt {
    color: #6C4E31;
}

.sectitle {
    font-family: "Press Start 2P", system-ui;
    color: #6C4E31;
    text-shadow: -4px 4px #D0B8A8;
}

.steptitle {
    font-family: "Press Start 2P", system-ui;
    background: rgba(108, 78, 49, 0.3);
}

.stepdesc {
    font-family: "VT323", monospace;
    border: 2px solid rgb(108, 78, 49, 0.5);
}

.howbtn {
    background: #FFEAC5;
}

.recenttabs {
    font-family: "VT323", monospace;
    color: #6C4E31;
    background: rgba(108, 78, 49, 0.54) !important;
    border-radius: 0 !important;
    border: none !important;
    min-width: 160px;
}

    .recenttabs:hover {
        color: #FFEAC5;
    }

    .recenttabs.active {
        background-color: #603F26 !important;
        color: #FFEAC5 !important;
        border-bottom: 1px solid #6C4E31 !important;
    }



.tabcont {
    background-color: #603F26;
}

.titletabb {
    color: #FFEAC5;
    font-family: "VT323", monospace;
}

.fudcol {
    background: #6C4E31;
    border: 1px solid rgb(255, 219, 181, 0.25);
    align-content: center;
}

    .fudcol:active {
        background: #FFEAC5;
    }

    .fudcol:hover {
        background: rgb(255, 234, 197, 0.5);
    }

.meals {
    display: flex;
    justify-content: center;
    align-items: center;
}
    /* Ensure the .meals row is set up correctly (Bootstrap default) */
    .meals.row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    /* Base styles for the column containing the item */
    .meals .col-3,
    .meals .col-sm-3,
    .meals .col-md-2 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

/* Styles for the .ingredient-item-card div */
.ingredient-item-card {
    width: 100%; /* Makes it take full width of its column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background: #6C4E31; /* Your chosen background */
    border: 1px solid rgb(255, 219, 181, 0.25); /* Your chosen border */
    height: 100%;
    text-align: center;
    /* align-content is for multi-line flex containers, often not needed here */
    /* If you still want content centered within the card, justify-content and align-items handle that */
}

    /* Styles for the image inside .ingredient-item-card */
    .ingredient-item-card img {
        max-width: 100%;
        height: auto; /* Maintain aspect ratio */
        display: block;
        border: none;
        object-fit: contain;
        max-height: 90px; /* Default max-height for images */
    }


/*.fudcol:focus {
        box-shadow: 0 !important;
        outline: none !important;
    }*/
:root {
    --bs-focus-ring-color: rgba(96, 63, 38, 0) !important;
    --bs-focus-ring-width: 0.25rem;
}

.fudpiccont {
    background: #D0B8A8;
    border: 2px solid #6C4E31;
}

.fudpic {
    min-height: 150px;
}

.fudname {
    background: #603F26;
    color: #FFDBB5;
    font-family: "VT323", monospace;
}

.fuddesc {
    border: 2px solid #603F26;
    color: #603F26;
    font-family: "VT323", monospace;
}

.promofooter {
    background: #603F26 !important;
    color: #FFDBB5;
    font-family: "Press Start 2P", system-ui;
}

.abtcont {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.abtpic {
    position: absolute;
    right: 0;
    width: 40%;
    z-index: -1;
    mask-image: linear-gradient(to left, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 20%, transparent 100%);
}

.abttitle {
    color: #6C4E31;
    font-family: "Press Start 2P", system-ui;
    text-shadow: -4px 4px #D0B8A8;
    z-index: 0;
}

.abtdescrip {
    color: #5D4037;
    font-family: "VT323", monospace;
    z-index: 1;
}

.jointitle {
    color: #6C4E31;
    font-family: "Press Start 2P", system-ui;
}

.joindescrip {
    color: #5D4037;
    font-family: "VT323", monospace;
}

.joinbtn {
    font-family: "Press Start 2P", system-ui;
    color: #FFFFFF;
    background: rgba(96, 63, 38,0.85);
    transition: .2s;
}

    .joinbtn:hover {
        transform: scale(1.1);
        background: #603F26;
        color: #FFFFFF;
    }

.joincont {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.joinpic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

    .joinpic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 20%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 20%, transparent 100%);
    }

.bgbb {
    background: rgb(255, 234, 197,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 20%, transparent 100%);
}

.gameplaytab {
    width: 40%;
}

    .gameplaytab .nav-link {
        font-family: "VT323", monospace;
        color: #6C4E31;
        background: rgba(108, 78, 49, 0.54) !important;
        border-radius: 0 !important;
        border-bottom: 2px solid rgba(255, 234, 197, .2) !important;
        min-width: 160px;
        text-align: start;
    }

        .gameplaytab .nav-link:hover {
            color: #FFEAC5;
        }

        .gameplaytab .nav-link.active {
            background-color: #603F26 !important;
            color: #FFEAC5 !important;
            border-bottom: 2px solid #6C4E31 !important;
        }

.gptabcontent {
    background-color: #603F26;
    width: 100%;
    height: 100%;
}

.gppic {
    max-height: 500px;
}

.gppiccont {
    border: 5px solid rgba(108, 78, 49, 0.54);
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffeac5b4;
    font-family: "VT323", monospace;
}

.gpoink {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gptxt {
    font-family: "VT323", monospace;
    color: #FFDBB5;
}

.learnmorebtn {
    font-family: "Press Start 2P", system-ui;
    color: #5D4037;
    background: #F8EDE3;
    transition: .2s;
}

    .learnmorebtn:hover {
        transform: scale(1.1);
        background: #FFD2A9;
    }

.vidbtn {
    text-decoration: none;
    background: none;
    border: none;
    transition: .2s;
}

    .vidbtn:hover {
        transform: scale(1.1);
    }

.vidtitle {
    background: #603F26;
    color: #D0B8A8;
    font-family: "Press Start 2P", system-ui;
    font-size: small;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vidpic {
    max-height: 220px;
}

.vid-thumbnail {
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 2;
    pointer-events: none;
}

.vidimgrow {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.vidtitletxt {
    text-align: start;
    word-wrap: break-word;
}

.medcar {
    height: 500px !important;
}

.locpic {
    object-fit: cover;
    image-rendering: pixelated;
    object-position: center;
    width: 100% !important;
}

.medpic {
    min-height: 350px;
    object-fit: cover;
    image-rendering: pixelated;
}

.oinkk {
    position: relative;
    border: 5px solid #6C4E31;
    background: rgba(108, 78, 49, 0.3);
}

.chartypee {
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(108, 78, 49, 0.3);
    color: #FFEAC5;
    font-family: "Press Start 2P", system-ui;
    text-transform: uppercase;
}

.ccmed {
    background: rgba(108, 78, 49,0.5);
}

.charname {
    font-family: "Press Start 2P", system-ui;
}

.chartype, .chardescrip {
    font-family: "VT323", monospace;
}

.fcaritem {
    max-height: 500px;
}

    .fcaritem img {
        object-fit: cover;
        object-position: center;
    }

.newscont {
    height: 200px;
    position: relative;
    margin: 10px;
}

.news-thumbnail {
    height: 100%;
    position: relative;
}

.newsimg {
    height: 100%;
    object-fit: cover;
}

.newstxt {
    display: flex;
    bottom: 0;
    width: 100%;
    background: rgba(108, 78, 49, 0.7);
    color: white;
    z-index: 2;
}

.newstitle {
    background: #FFEAC5;
    color: #603F26;
    font-family: "Press Start 2P", system-ui;
    font-size: 0.65rem;
    border-radius: 4px;
}

.newsdescrip {
    font-size: 0.8rem;
    font-family: "VT323", monospace;
}

.news-thumbnail img {
    transition: transform 0.4s ease;
}

.newscont:hover .news-thumbnail img {
    transform: scale(1.05);
}

.upcont {
    background: #603F26;
    color: #FFEAC5;
    height: 100%;
}

.uptitle {
    font-family: "Press Start 2P", system-ui;
    text-align: center;
}

.uptype, .updesc {
    font-family: "VT323", monospace;
}

.patchtitle {
    font-family: "Press Start 2P", system-ui;
    color: #FFEAC5;
}

.patchdate {
    font-family: "VT323", monospace;
    color: rgba(255, 234, 197, 0.6);
}

.patchpic {
    max-height: 200px;
}

.patchdescrip {
    font-family: "VT323", monospace;
    color: #FFEAC5;
}

.outercont {
    background: #6C4E31;
}

.innercont {
    background: #603F26;
    box-shadow: 0px 0px 10px inset rgb(0, 0, 0, 0.3)
}

.nidhelp {
    font-family: "Press Start 2P", system-ui;
    color: #FFEAC5;
}

.nidhelpinput {
    background: #FFEAC5;
    border: none;
}

.btnneed i:hover {
    color: #ffffff !important;
}

.ffftitle {
    font-family: "Press Start 2P", system-ui;
    color: #5D4037;
}

.fffdescrip {
    font-family: "VT323", monospace;
    color: #5D4037;
}

.vabtn {
    background: #5D4037;
    color: #FFEAC5;
    text-decoration: none;
    font-family: "VT323", monospace;
    transition: .2s;
}

    .vabtn:hover {
        transform: scale(1.1);
        background: #5D4037 !important;
        color: #FFEAC5;
    }

.bc {
    border: 2px solid rgba(108, 78, 49, 0.5);
    margin: 10px;
}

.accordion-button {
    font-family: "VT323", monospace;
    color: #5D4037;
    background: #FFEAC5 !important;
    border: 2px solid rgba(108, 78, 49, 0.2);
}

.accordion {
    background: none !important;
    border: none;
}

.accordion-collapse {
    font-family: "VT323", monospace;
    color: #5D4037;
    background: #FFEAC5 !important;
    box-shadow: 0px 0px 10px inset rgba(0,0,0,.3)
}

.sampurl {
    color: #5D4037;
}

.anss {
    background: rgba(108, 78, 49, 0.2);
}

.bugbtn {
    background: #FFEAC5;
    font-family: "VT323", monospace;
    transition: .2s;
}

    .bugbtn:hover {
        transform: scale(1.1);
        background: #FFEAC5;
        font-family: "VT323", monospace;
        color: #5D4037;
    }

.fcbug {
    background: #FFEAC5;
}

.tttitle {
    font-family: "Press Start 2P", system-ui;
    color: #6C4E31;
}

.membername {
    font-family: "Press Start 2P", system-ui;
    color: #6C4E31;
    display: block;
}

.memberrole {
    font-family: "VT323", monospace;
    color: #6C4E31;
}

.bg-img {
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

.credits-container {
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    min-height: 100vh;
}

.tuttabtitle {
    font-family: "Press Start 2P", system-ui;
    color: #FFDBB5;
}

.tutimg {
    max-height: 300px;
}

.tuttitle {
    font-family: "Press Start 2P", system-ui;
    color: #FFDBB5;
}

.tutdescrip {
    font-family: "VT323", monospace;
    color: #FFDBB5;
}

.tutcontt {
    display: flex;
    justify-content: start;
    align-items: center;
    background: #6C4E31;
}

.ggtitle {
    font-family: "Press Start 2P", system-ui;
    color: #FFDBB5;
}

.ggdescrip {
    font-family: "VT323", monospace;
    color: #6C4E31;
}

.ggrow {
    display: flex;
    justify-content: space-evenly;
    align-items: start;
}

.tipscontt {
    background: #6C4E31;
    margin-top: 1rem;
}

.tipsimgcont {
    background: rgba(108, 78, 49, .9);
}

    .tipsimgcont img {
        max-height: 150px;
    }

.tipstxtcont {
    color: #FFEAC5;
    text-align: left;
    background: rgb(96, 63, 38);
}

.tipstitle {
    font-family: "Press Start 2P", system-ui;
}

.tipsdescrip {
    font-family: "VT323", monospace;
    color: rgba(255, 234, 197, .7);
    font-size: 1.3rem;
}

.playnowbtn {
    background: #FFDBB5;
    border: 2px solid #603F26;
    font-family: "Press Start 2P", system-ui;
    color: #603F26;
    transition: .2s;
}

    .playnowbtn:hover {
        transform: scale(1.1);
        background: #FFDBB5;
        border: 2px solid #603F26;
        color: #603F26;
    }

.review-card {
    background-color: #6C4E31;
    color: #FFEAC5;
    border-radius: 1.5rem;
    padding: 1rem;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #FFEAC5;
}

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.review-tag {
    font-family: "Press Start 2P", system-ui;
    font-size: 0.75rem;
}

.review-text {
    font-family: "VT323", monospace;
    font-size: 1.2rem;
}

.stars i {
    color: #FFEAC5;
}

iframe {
    width: 100% !important;
    height: 100% !important;
}

.newsheadlinee {
    font-family: "Press Start 2P", system-ui;
    color: #603F26;
}   

.mainart {
    height: 350px;
}

.artcont {
    border: 2px solid #603F26;
}