.card {
    position: relative; /* container for absolute children */
    width: 400px;
    max-width: 100%;
}

.body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: rgb(235, 236, 242);
}
.inner-border {
    box-shadow: inset 0 0 0 2px var(--grayBorder);
}


.center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.menu {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* <-- FIX */
    gap: 10px;
    background: rgb(10 , 10, 25);


}
.logo {
    width: fit-content;
    font-family: poppins;
    font-size: 22px;
    color: white;
    font-weight: 600;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(15, 15, 35);

    /* ✅ 3px INNER border */
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
    border-radius: 8px; /* optional but looks clean */
}
#menu {
    display: none;
}
.logo label {
    display: none;
}
.items {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;   /* ✅ prevents line breaks */
    gap: 20px;
    background: rgb(12 , 12, 40);


}
.item {
    padding: 9px 22px;
    box-sizing: border-box;
    display: inline-flex;   /* auto-size to content */
    align-items: center;
    justify-content: center;
    gap: 1px;              /* spacing between icon + text */
    border-radius: 3mm;
    background: rgb(50 , 50, 100);
    border: 1px solid var(--border);
    font-family: poppins;
    font-size: 19px;
    color: white;
    text-decoration: none;
    white-space: nowrap;    /* keeps text on one line */

}
.item span {
    margin-right: 8px;
    font-size: 24px;
}
.item img {
    height: 1.25em; /* matches the font size (16px) */
    width: auto; /* keeps aspect ratio */
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    object-fit: contain;
    border-radius: 4px; /* optional for rounded edges */
}

.item:hover {
    background: rgba(100, 100, 100, 0.5);
}
@media screen and (max-width: 650px) {
    .menu {
        flex-direction: column;
    }

    .menu .logo {
        width: 100%;
    }


    .menu .logo label {
        display: block;
        cursor: pointer;
        position: relative;
        width: 30px;
        height: 30px;
    }

    .menu .logo label::before {
        position: absolute;
        content: "menu";
        font-family: "Material Icons";
        top: 0;
        left: 0;
        font-size: 30px;
    }

    .menu .items {
        width: 100%;
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        transition: 0.5s ease-in-out;
    }

    .menu .item {
        width: 100%;
        padding: 15px;
        border-radius: 0;
        border-top: 0.5mm solid rgb(52, 53, 71);
    }

    #menu:checked ~ .items {
        max-height: 500px;
    }

    #menu:checked ~ .logo label::before {
        content: "close";
    }

}

@property
--tw-content {
    syntax: "*";
    inherits: false;
    initial-value: "";
}

@theme
{
    --spacing: .25rem;
}

.object-cover {
    object-fit: cover;
}
/* Site Rework Starting with Fonts*/
@font-face {
    font-family: 'LibreBaskerville';
    src: url('/Assets/Fonts/LibreBaskerville-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* variable font range */
    font-style: normal;
}
#root {
    margin: 0 auto;
    text-align: center;
    color: var(--text);
    font-family: KayakSans, Rascon, NationalPark, FuturaNowHeadline, sans-serif;
    --foreground: oklch(.985 0 0);
    --card: oklch(.145 0 0);
    --card-foreground: oklch(.985 0 0);
    --popover: oklch(.145 0 0);
    --popover-foreground: oklch(.985 0 0);
    --primary-foreground: oklch(.205 0 0);
    --secondary-foreground: oklch(.985 0 0);
    --muted: oklch(.269 0 0);
    --muted-foreground: oklch(.708 0 0);
    --accent-foreground: oklch(.985 0 0);
    --wine-red: oklch(.396 .141 25.723);
    --wine-foreground: oklch(.637 .237 25.331);
    --border: oklch(.269 0 0);
    --input: oklch(.269 0 0);
    --grayBorder: oklch(.439 0 0);
    --chart-1: oklch(.488 .243 264.376);
    --chart-2: oklch(.696 .17 162.48);
    --chart-3: oklch(.769 .188 70.08);
    --chart-4: oklch(.627 .265 303.9);
    --chart-5: oklch(.645 .246 16.439);
    --sidebar: oklch(.205 0 0);
    --sidebar-foreground: oklch(.985 0 0);
    --sidebar-primary: oklch(.488 .243 264.376);
    --sidebar-primary-foreground: oklch(.985 0 0);
    --sidebar-accent: oklch(.269 0 0);
    --sidebar-accent-foreground: oklch(.985 0 0);
    --sidebar-border: oklch(.269 0 0);
    --sidebar-ring: oklch(.439 0 0);
    --text: oklch(87.25% .0385 292.14);
    --background: oklch(18.76% .009 317.68);
    --primary: oklch(69.57% .1197 222);
    --secondary: oklch(22.05% .053 293.01);
    /* Success / Green */
    --success: oklch(65% .15 145);
    --success-foreground: oklch(.985 0 0);
    --accent: oklch(73.41% .155 139.56);

    /* Warning / Yellow */
    --warning: oklch(85% .18 95);
    --warning-foreground: oklch(20% .05 95);

    /* Info / Blue */
    --info: oklch(70% .20 240);
    --info-foreground: oklch(.985 0 0);

    /* Extra chart colors */
    --chart-6: oklch(72% .22 180);
    --chart-7: oklch(68% .20 30);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, oklch(69.57% .1197 222), oklch(73.41% .155 139.56));
    --gradient-secondary: linear-gradient(135deg, oklch(22.05% .053 293.01), oklch(50% .10 293.01));

    /* UI states */
    --hover-bg: oklch(25% .02 280);
    --active-bg: oklch(30% .03 280);
    --disabled-bg: oklch(20% .01 280);
    --disabled-text: oklch(50% .01 280);
}


    border-accent\/60 {
        border-color: color-mix(in oklab, var(--grayBorder) 60%, transparent);
    }