* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*transition: all 0.3s ease-in-out;*/
}
/* Two fonts, multiple weights — the fix */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700|family=Roboto+Condensed:wght@200;400;700&display=swap');

:root {

	/* Original Site Colors */
	--dialog-bg-color: #ededf5;	/* hsl(240, 29%, 95%) light grey */
	--std-orange-text: #fdae42;	/* hsl(35, 96%, 62%) */
	--std-blue: #444794; 		/* hsl(238, 37%, 42%) */
	--grey-text: #666669;		/* hsl(240, 2%, 41%) dark grey */
	--std-yellow: #ffffe8;		/* hsl(60, 100%, 95%) light yellow */
	
  /* Hues */
  --hue-violet: 245;
  --hue-green: 150;
  --hue-orange: 36;
  --hue-red: 355;
  --hue-blue: 208;  /* Base brand color */
  --hue-yellow: 60;
  
  /*** grayscale ***/
  --gray-100: hsl(0, 0%, 100%);
  --gray-095: hsl(0, 0%, 95%);
  --gray-090: hsl(0, 0%, 90%);
  --gray-080: hsl(0, 0%, 80%);
  --gray-070: hsl(0, 0%, 70%);
  --gray-060: hsl(0, 0%, 60%);
  --gray-050: hsl(0, 0%, 50%);
  --gray-040: hsl(0, 0%, 40%);
  --gray-030: hsl(0, 0%, 30%);
  --gray-020: hsl(0, 0%, 20%);
  --gray-010: hsl(0, 0%, 10%);
  --gray-000: hsl(0, 0%, 0%);
 

  /* System colors */
  --violet-005: hsl(var(--hue-violet), 80%, 5%);
  --violet-020: hsl(var(--hue-violet), 80%, 20%);
  --violet-030: hsl(var(--hue-violet), 80%, 30%);
  --violet-040: hsl(var(--hue-violet), 80%, 40%);
  --violet-060: hsl(var(--hue-violet), 80%, 60%);
  --violet-065: hsl(var(--hue-violet), 80%, 65%);
  --violet-070: hsl(var(--hue-violet), 80%, 70%);
  --violet-080: hsl(var(--hue-violet), 80%, 80%);
  --violet-095: hsl(var(--hue-violet), 80%, 95%);
  
  --green-005: hsl(var(--hue-green), 100%, 5%);
  --green-020: hsl(var(--hue-green), 100%, 20%);
  --green-030: hsl(var(--hue-green), 80%, 30%);
  --green-040: hsl(var(--hue-green), 80%, 40%);
  --green-060: hsl(var(--hue-green), 80%, 60%);
  --green-080: hsl(var(--hue-green), 90%, 80%);
  --green-095: hsl(var(--hue-green), 100%, 95%);

  --orange-005: hsl(var(--hue-orange), 100%, 10%);  /* #331e00 */
  --orange-020: hsl(var(--hue-orange), 100%, 20%);  /* #663c00 */
  --orange-030: hsl(var(--hue-orange), 100%, 30%);  /* #995900 */
  --orange-040: hsl(var(--hue-orange), 100%, 40%);  /* #cc7700 */
  --orange-060: hsl(var(--hue-orange), 100%, 60%);  /* #ffaa33 */
  --orange-080: hsl(var(--hue-orange), 100%, 80%);  /* #ffd599 */
  --orange-095: hsl(var(--hue-orange), 100%, 95%);  /* #fff4e5 */

  --red-005: hsl(var(--hue-red), 100%, 5%);
  --red-020: hsl(var(--hue-red), 100%, 20%);
  --red-040: hsl(var(--hue-red), 100%, 40%);
  --red-060: hsl(var(--hue-red), 100%, 60%);
  --red-080: hsl(var(--hue-red), 100%, 80%);
  --red-095: hsl(var(--hue-red), 100%, 95%); 
  	
  /*** blue ***/ 
  --blue-095: hsl(var(--hue-blue), 100%, 95%);  /* #e5f0ff */ /*lighter */
  --blue-090: hsl(var(--hue-blue), 70%, 90%);  /* #cce7ff */
  --blue-085: hsl(var(--hue-blue), 100%, 85%);  /* #b3dcff */
  --blue-080: hsl(var(--hue-blue), 50%, 80%);  /* #99cfff */
  --blue-070: hsl(var(--hue-blue), 50%, 70%);  /* #66b8ff */ 
  --blue-060: hsl(var(--hue-blue), 50%, 60%);  /* #33a0ff */
  --blue-050: hsl(var(--hue-blue), 100%, 50%);  /* #0088ff */
  --blue-040: hsl(var(--hue-blue), 40%, 40%);   /* #3d698f */ 
  --blue-030: hsl(var(--hue-blue), 100%, 30%);  /* #005299 */ 
  --blue-020: hsl(var(--hue-blue), 100%, 21%);  /* #00396b */
  --blue-010: hsl(var(--hue-blue), 100%, 10%);	/* #001b33 */
  
  --yellow-095: hsl(var(--hue-yellow), 100%, 95%);
  --yellow-090: hsl(var(--hue-yellow), 100%, 90%);
  --yellow-080: hsl(var(--hue-yellow), 100%, 80%);
  --yellow-070: hsl(var(--hue-yellow), 100%, 70%);
  --yellow-060: hsl(var(--hue-yellow), 100%, 60%);
  --yellow-050: hsl(var(--hue-yellow), 100%, 50%); 
  --yellow-040: hsl(var(--hue-yellow), 100%, 40%); 
  --yellow-030: hsl(var(--hue-yellow), 100%, 30%); 
  --yellow-020: hsl(var(--hue-yellow), 100%, 21%); 
  --yellow-010: hsl(var(--hue-yellow), 100%, 10%);  
  
  /********* SEMANTIC COLOR DECLARATIONS *********/  
  /*** base foreground ***/ 
  --fg-base: var(--gray-030);
  
  /*** base background ***/ 
  --bg-base: var(--blue-090);
  
  /*** base border ***/ 
  --border-base: var(--gray-030);
  
  /*** header background ***/
  --hdr-base: var(--gray-040);

  /*** body text color ***/
  --bodytext: var(--blue-020);
  --bodytext-lt: var(--blue-090);
  --hdrtext: var(--blue-040);
  

  /* Static colors don't invert in dark mode */
  /*** static foreground ***/ 
  --fg-black-static: var(--gray-000);
  --fg-white-static: var(--gray-100);
  
  /*** static background ***/ 
  --bg-white-static: var(--gray-100);
  --bg-black-static: var(--gray-000);
  
  /*** static border ***/ 
  --border-black-static: var(--gray-000);
  --border-white-static: var(--gray-100);
  
	
  /*** Semantics - Alerts ***/
  --bg-neutral: var(--violet-095);
  --border-neutral: var(--violet-080);
  --fg-neutral: var(--violet-060);
  
  --bg-positive: var(--green-095);
  --border-positive: var(--green-080);
  --fg-positive: var(--green-030);

  --bg-info: var(--green-095);
  --border-info: var(--green-080);
  --fg-info: var(--green-030);
  
  --bg-warning: var(--orange-095);
  --border-warning: var(--orange-080);
  --fg-warning: var(--orange-040);

  --bg-negative: var(--red-095);
  --border-negative: var(--red-080);
  --fg-negative: var(--red-040); 

  /*** Default input styles ***/
  --input-border: var(--gray-070);
  
  /*** brand primary ***/
  --fg-brand-primary: var(--blue-040);			/* #3d3d8f */
  --bg-brand-primary: var(--blue-090);			/* #ccd5ff */
  --border-brand-primary: var(--blue-020);
  --color-brand: var(--blue-020);		        /* #001166 */

  /*** dialog backgrounds ***/
  --color-bg-lt: hsl(var(--hue-blue),37%,97%);
  --color-bg-md: hsl(var(--hue-blue), 50%, 90%);
  --color-border: hsl(var(--hue-blue), 33%, 40%);
  
  /*** brand secondary ***/
  --text-brand-secondary: var(--orange-040);	/* #cc7700 */
  --fg-brand-secondary: var(--orange-060);		/* #ffae34 */
  --bg-brand-secondary: var(--orange-080);		/* #ffd599 */
  --border-brand-secondary: var(--orange-020);	/* #663c00 */

  /*** brand accent ***/
  --text-brand-accent: var(--yellow-080);		/* #ffff99 */
  --bg-brand-accent: var(--yellow-095);			/* #ffffe5 */
	
  --navbar-bg: var(--blue-020);        /* #07365f */
  --navbar-button-bg: var(--blue-070);
  --dialog-bg: var(--gray-095);
  --text-lt: var(--blue-090);

  --orange-button-text: var(--orange-020);
  
  /* Universal Breakpoints */
  --break-sm: 480px;
  --break-md: 768px;
  --break-lg: 1024px;
  --break-xl: 1280px;

  /* Box Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-lg: 10px 10px 7px 0px rgba(0, 0, 0, 0.2), 3px 3px 5px 0px rgba(0, 0, 0, 0.23);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-top: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --new-box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 2px 4px rgba(0,0,0,0.02),
    0 4px 8px rgba(0,0,0,0.02),
    0 8px 16px rgba(0,0,0,0.02),
    0 16px 32px rgba(0,0,0,0.02);

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 100vw; /* pill shape */

  /* Font Sizes */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.5rem; /* 24px */

  /* Standard spacing */  
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

  /* Gradients */
    --std-page-gradient: linear-gradient(var(--blue-080), var(--blue-030));
    --gradient-blue: linear-gradient(var(--blue-060),var(--bg-base)); /* blue-090 */
    --short-gradient-blue: linear-gradient(var(--blue-070), var(--color-bg-md)); /* (--hue-blue), 50%, 90%); */

  /* Standard spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

  /* Standard Fonts */
    --font-sans: 'Inter', Verdana, sans-serif;
    --font-hdr: "Space Grotesk", sans-serif;
    --font-narrow: 'Roboto Condensed', sans-serif;
}

/* Box-sizing: Border-box for all elements */

*, *::before, *::after {
    box-sizing: border-box;
}


/* Prevent font size inflation on mobile */

html {
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    /* Standard for Firefox and Modern Chrome/Edge */
    scrollbar-width: none; 
  
    /* Legacy IE and Edge */
    -ms-overflow-style: none; 
}

/* Chrome, Safari, and Opera (Webkit-based) */
html::-webkit-scrollbar {
    display: none;
}

body {
    color: var(--bodytext);
    background-color: var(--gray-020);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    min-height: 100svh; /* Small viewport height for full coverage */
    overflow-y: scroll; /* Ensures the element remains scrollable */
    scrollbar-width: none; /* Hides scrollbar for Firefox */
    -ms-overflow-style: none; /* Hides scrollbar for IE 10+ and older Edge */
}

/* Hides scrollbar for Chrome, Safari, and Opera */
body::-webkit-scrollbar {
  display: none;
}

strong {
    display: inline !important;
}

/* Highlighting style for <mark> elements */
mark {
  background-color: lightblue;
  padding: 0.5rem; /* Add some padding for better appearance */
  border-radius: 0.5em 0; /* Add custom shapes */
}

.container {
    max-width: 1920px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-hdr);
}
h1 { 
    font-size: clamp(32px, 4vw, 48px); 
    font-weight: 700;
    line-height: 1.1;
}

h2 { 
    font-size: clamp(24px, 3vw, 32px); 
    font-weight: 700;
    line-height: 1.2;

}
/* TBD: Fix this */
h3 { 
    font-size: clamp(20px, 3vw, 24px); 
    font-weight: 700;
    line-height: 1.3;
}

h4 { 
    font-size: clamp(16px, 1.953vw, 22px); 
    width: 100%;
    text-align: center;
    font-weight: 700;
    padding-bottom: 20px;
    max-width: 800px;
    margin-inline: auto;
}

/* Overflow wrapping for long words */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1 {
    padding-bottom: 20px;
}
h2 {
    padding-bottom: 10px;
}

p {
  /* padding: var(--space-three); */
  font-weight: 400;
  line-height: 1.4;
}

.stdtext > p {
    font-family: var(--font-sans);
    font-size: 1.0rem;
    color: var(--blue-020);
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

img {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block
}
.nodisp {
	display: none;
}
/*
a {
    text-underline-offset: 0.25rem;
}
    */
label {
    font-size: 1.0rem;
    color: var(--blue-020);
}
hr {
  border: none; /* Removes the default border */
  height: 1px; /* Sets a basic thickness */
  background-color: #333; /* Sets the color */
  margin: 20px auto; /* Adds spacing above and below */
  width: 80%;
  color: var(--gray-080);
}

/* Try this on .card */
.card-2 {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05),
              0 6px 20px rgba(0,0,0,0.08);
}

/* Default row style for manage reservation row */
.mg-row-stream {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 8px;
    color: var(--blue-020);
    border: 1px solid var(--blue-020);
    border-radius: 8px;
    background-color: var(--orange-095);
    margin: 10px 0;
}
.stream-title {
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: var(--blue-030);
}
.stream-text {
    font-size: 1.0rem;
    color: var(--blue-020);
    width: 100%;
}

.mg-row-grid {
    display: grid;
    grid-template-areas: 'title seats delete';
    width: 100%;
    padding: 16px 8px;
    color: var(--blue-020);
    grid-template-columns: repeat(3, 1fr);
    justify-content: flex-start;
    border: 1px solid var(--blue-020);
    border-radius: 8px;
    background-color: var(--color-bg-lt);
    margin: 10px 0;
    
   .col1 {
        width: 300px; 
        display: flex;
        flex-direction: column;
        grid-area: title;
        align-items: flex-start;

        & .film-venue {
            font-size: 0.9rem;
            color: var(--blue-040);
        }
    }
    .col2 {
        display: flex;
        justify-content: flex-start;
        grid-area: seats;
        align-items: center;
        gap: 26px;
    }
    .col3 {
        display: flex;
        grid-area: delete;
        justify-content: flex-end;
        align-items: center;
        font-size: 1.1rem;
        padding-right: 20px;

        & a:hover {
			font-weight: bold;
		}
    }
}
.mg-row-grid:hover{
    border: solid 2px var(--blue-020);
    cursor: pointer;
}
.mg-hdr {
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    color: var(--blue-020);
}
.res-change-link {
    font-size: 1.0rem;
    color: var(--orange-040);
    font-weight: 600;
    text-decoration: none;
}

.res-change-link a {
    text-decoration: none;
}

/* Row that contains text preceding info-dot */
.info-row {
    padding: 20px 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.membership-info {
    width: 100%;
    padding: 8px;
    color: var(--blue-030);
    margin-bottom: 20px;
    font-size: 1.1rem;
    background-color: white;
    border-radius: 8px;
}

.no-res-msg {
    font-size: 1.3em;
    color: var(--gray-030);
    text-align: center;
    padding: 20px;
}



.rsv-box {
    margin: 1dvh auto;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-radius: 6px;
    box-sizing:border-box;
    box-shadow: 4px 4px 5px 2px rgba(0,0,0,0.25);
    background: var(--color-bg-md);
    width: 100%;
    max-width: 700px;
    height: auto;
    padding: 2vw;
    margin-bottom: 120px;
}

.newres-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border-left: 1px solid var(--gray-095);
    border-top: 1px solid var(--gray-095);
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 4px 4px 5px 2px rgba(0,0,0,0.25);
    background: var(--color-bg-md);
    width: 100%;
    max-width: 1300px;
    height: auto;
    padding: 2vw;
}
@media (max-width: 1220px) {
    .newres-box {
        margin-inline: auto;
    }
  /*  form {
        margin-inline: auto;
    } */
}


.change-box {
    margin: 1dvh auto 100px;
    border: 2px solid var(--border-brand-primary);
    border-radius: 6px;
    box-sizing:border-box;
    box-shadow: 4px 4px 5px 2px rgba(0,0,0,0.25);
    background-color: var(--bg-base);
    width: 100%;
    max-width: 520px;
    height: auto;
    padding: 1vw;
}
.changeres {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.changeres .film-title {
    font-size: 1.0rem;
    font-weight: bold;
    color: var(--blue-020);
}

.changeres .film-date {
    font-size: 1rem;
    color: var(--blue-030);
}
.change-col1 {
    display: flex;
    flex-direction: column;
    width: 240px;
    gap: 10px;
    padding: 2px;
}

.pmt-box {
    margin: 1dvh auto;
    border: 2px solid var(--border-brand-primary);
    border-radius: 6px;
    box-sizing:border-box;
    box-shadow: 4px 4px 5px 2px rgba(0,0,0,0.25);
    background-color: var(--bg-base);
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 2.2vw;
    margin-bottom: 80px;
}
.pmt-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-bg-lt);
    border-radius: 8px;
    padding: 12px;
}
.pmt-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
@scope (.pmt-row) {
    .film-title {
        font-size: 1.0rem;
        font-weight: bold;
        color: var(--blue-020);
        width: 200px;
        text-align: left;
    }
    .seats {
        font-size: 1rem;
        color: var(--blue-030);
    }
    .amt-due {
        font-size: 1rem;
        color: var(--blue-030);
    }
}
.pmt-total-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    font-weight: bold;
    padding: 10px 12px;
    border: 1px solid var(--gray-060);
    border-radius: 6px;
    margin-top: 10px;
    background-color: var(--color-bg-lt);
    font-size: 1.0rem;
    color: var(--blue-030);
}

.std-dialog-box {
    border-left: 1px solid var(--gray-095);
    border-top: 1px solid var(--gray-095);
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
    background: var(--color-bg-md);
    text-align: center;
    width: 100%;

    &.pmt {
        max-width: 600px;
        padding: 2.2vw;
        margin: 1dvh auto 80px;
    }
    &.change {
        max-width: 560px;
        padding: 2vw;
        margin: 1dvh auto 100px;  
        height: auto; 
    }
    &.newres {
        max-width: 700px;
        padding: 2vw;
        margin: 1dvh auto 100px;
        height: auto;  
    }
    &.rsv {
        max-width: 700px;
        padding: 2vw; 
        margin: 1dvh auto 120px; 
    }
    &.profile {
        max-width: 600px;
        padding: 30px;
        margin: 40px auto 100px;
        height: auto;  

        & p {
            font-size: var(--font-size-sm);
            text-align: left;
            padding: 20px;
        }
    }
    &.appl {
        max-width: 650px;
        padding: 30px;
        margin: 40px auto 100px;
        height: auto;
    }
    & h3 {
        color: var(--blue-030);
        padding: 20px 0;
    }
    &.calendar {
        max-width: 600px;
         padding: 30px;
        margin: 40px auto 100px;
        height: auto;  
    }
    &.contact {
        max-width: 700px;
        height: auto;
        padding: 0;
        margin-top: 20px;
    }
    &.mission {
        max-width: 700px;
        height: auto;
        padding: 30px;
        margin: 40px auto;

        ul {
            list-style: none; /* Removes the default bullet entirely */
            padding: 0;
        }

        li {
            display: flex; /* Aligns bullet and text horizontally */
            align-items: flex-start; 
            text-align: left;
            padding: var(--space-2) 0; /* Adds vertical spacing between list items */
        }

        li::before {
            content: "\2022"; /* Inserts a custom bullet */
            margin-right: var(--space-2); /* Adds clean spacing before text */
            flex-shrink: 0; /* Prevents the bullet from squishing */
        }

        & p {
            text-align: left;
            font-size: 1.1rem;
            color: var(--blue-020); 
            padding: 0 0 var(--space-3);    
        }
        & h2 {
            text-align: center;
            color: var(--blue-020);
        }
    }
    &.sponsor {
        max-width: 800px;
        height: auto;
        padding: 30px;
        margin: 40px auto;

        & p {
            text-align: left;
            font-size: 1.1rem;
             color: var(--blue-020);    
        }
        & h2 {
            text-align: center;
            color: var(--blue-020);
        }
        & .stdtext {
            flex-direction: column;
        }
    }
    &.board {
        max-width: 800px;
        height: auto;
        padding: 30px;
        margin: 40px auto;

        & p {
            text-align: left;
            font-size: 1.1rem;
            color: var(--blue-020);    
        }
        & h3 {
            text-align: center;
            color: var(--blue-020);
            padding: 20px 0 10px 0;
        }
        & .innerbox {
            border: 1px solid var(--gray-060);
            border-radius: 8px;
            width: 100%;
            margin: 20px auto;
        }
    }
    &.films {
        max-width: 700px;
        height: auto;
        padding: 30px;
        margin: 40px auto;

        & h2 {
            color: var(--blue-020);
        }

        & p {
            background-color: var(--blue-090);
            color: var(--blue-020);
            font-size: 1.1rem;
            text-align: left;
            padding: 10px;
            border-radius: 8px;
            margin: 20px auto;
        }
        .innerbox {
            font-size: 1.1rem;
            background-color: var(--blue-090);
            width: 100%;
        }
        .film-entry {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    }
   
}
#box-title {
    width: 400px;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
}

/* Calendar Styles */
/* Container for the calendar */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 days a week */
    grid-auto-flow: row;
    max-width: 1200px;
    margin: 0 auto; /* center the calendar */
}

/* Base style for days (Desktop - Grid) */

.stdtext {
    display: flex;
    justify-content: center;
    max-width: 720px;
    margin: 20px auto;
    background-color: var(--color-bg-md);
    color: var(--gray-010);
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1rem;

    & .sponsor {
        flex-direction: column;
    }
}	
	
#calendarTitle {
    font-family: var(--font-hdr);
    margin: 10px auto;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.125vw, 2.25rem);
    text-align: center;
}
/* Calendar Styles */
.calendar		{ 
    border-left:1px solid #999; 
}

.calendar-day	{
    font-size: 0.875rem;
    color: #03C;
    background-color: var(--color-bg-md);
    position:relative; 
    line-height: 1.0rem;
    z-index: 0;

    & a {
        text-decoration: none;
    }
} 
.calendar-day > .sold-out {
    color: red;
    font-weight: bold;
}

/*
.calendar-day .calendar-day-head {
    max-width: 200px;
}
*/
.calendar-day:hover	{ 
    background:#eceff5; 
}
.calendar-day-np	{ 
    background: var(--color-bg-lt);
    min-height:80px; 
} 
* html div.calendar-day-np { 
    height:80px; 
}
.calendar-day-head { 
    background:#ccc; 
    font-family: var(--font-hdr);
    font-weight:bold; 
    text-align:center; 
    padding:5px; 
    border-bottom:1px solid #999; 
    border-top:1px solid #999; 
    border-right:1px solid #999; 
}
div.day-number		{
    position: absolute;
    top: 0;
    right: 0; 
    background:#999; 
    padding: 2px 0; 
    color:#fff; 
    font-weight:bold; 
    margin: 0; 
    width:19px; 
    text-align:center; 
}
div.event {
    font-weight: 600;
    font-size: clamp(0.8rem, 1.27vw, 1.3rem);
    padding: 0;
    line-height: 1.0rem;
    text-decoration: none;
}
div.event-stream {
    font-weight: 700;
    font-size: clamp(0.7rem, 1.27vw, 1.3rem);
    padding: 0;
    line-height: 1.0rem;
    color: var(--orange-030);
}
/* shared */
.calendar-day, .calendar-day-np { 
    padding: 16px 4px 0; 
    border: 1px solid #ccc;
    position: relative;
    height: 120px;
    min-height: 90px;
    text-align: center;
}

.time {
    font-size: 0.9rem;
    color: #666;
    padding-top: 2px;
}
    
.seats {
    font-weight: bold;
    padding: 2px 0 0;
    font-size: 1.0 rem;
}

.mobile-day-header {
    display: none; /* Hidden on desktop, shown on mobile */
    font-weight: bold;
    text-align: center;
    padding: 5px;
    background-color: var(--blue-080);
    color: var(--blue-020);
}
#navblock {
    max-width: 720px;
    padding: 10px 0px;
    display: block;
    overflow: hidden;
    margin: 0px auto;
}
/* Mobile View: Calendar collapses to a vertical column */
@media (max-width: 600px) {
    .calendar {
        grid-template-columns: 1fr; /* 1 column only */
        grid-auto-flow: row;
        max-width: 400px;
        width: 100%;
        border: none;
    }

    .calendar-day {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Optional: Date on left, event on right */
        gap: 4px;
        border: none;
        padding-top: 0;
        max-width: 400px; 
        width: 100%;
    }
    /* CSS ignore */
    .calendar-day:not(:has(.event)) {
        display: none;
    }

    /* Alternative CSS ignore for older browsers that don't support :has() */
    .calendar-day.no-event {
        display: none;
    }

    .calendar-day-np {
        display: none; /* Hide non-day cells on mobile */
    }
    .day-number {
        display: none; /* Hide day numbers on mobile */
    }
    .calendar-day-head {
        display: none; /* Hide day headers on mobile */
    }
    .mobile-day-header {
        display: block; /* Show mobile day headers */
        font-size: clamp(0.8rem, 2.5vw, 1.2rem);
    }
}	

@media (max-width: 600px) {
     .sign-in-box{
        width: 90% !important;
        margin-top: 30px;
    }
    .mg-row-grid {
        display: grid;
        grid-template-areas:
        'title title'
        'seats delete';
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }
    .mg-row-grid .col1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        grid-area: title;
    }
    .mg-row-grid .col2 {
        grid-area: seats;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 30px;
        padding-left: 20px;
    }
   .mg-row-stream {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .col3 {
        grid-area: delete;
    }

    .mg-row-grid.ftr {
        width: 90%;
    }
    #box-title {
        padding: 0;
    }
}

/* Board of Directors page */
.bold-underline {
	font-weight: bold;
	text-decoration: underline;
}
.dir-block {
	width: 90%;
	display: inline-block;
	font-style: normal;
	font-size: 0.9em;
	margin: 30px 10px;
}

.dir-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.dir-pic {
	display: inline-block;
    
}
.dir-name {
    display: inline-block;
    text-align: center;
    color: var(--blue-020);
    width: 100%;
}
.dir-info {
	overflow: auto;
	font-size: 0.9em;
	margin-left: 20px;
	padding: 20px 10px;
	vertical-align: text-top;
}
.dir-title {
	font-size: 1.3em;
	font-weight: bold;
	padding-bottom: 0px;
}

p.more {
	display:none;
}
a.readmorebtn {
    cursor:pointer;
}
a.readmorebtn:hover {
    border-bottom:1px black solid;
}
.wrap {
    border-bottom: 1px solid #ccc;
}

#volbox {
	overflow:hidden;
}
.volphoto {
	margin: 10px;
	float: left;
}

/* Style for FAQ page */
.faq-container {
  max-width: 600px;
  margin: 20px auto;

  & p {
    color: var(--blue-020);
  }
}
.faq-title {

  font-weight: bold;
  color: var(--bodytext);
  padding-bottom: 20px;
}
.faq-content {
    font-size: 1.0rem;
    color: var(--bodytext);  
}

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  text-align: left;
  max-width: 90%;
}

summary {
  padding: 15px;
  cursor: pointer;
  border-radius: var(--border-radius-md);
  background-color: #f7f7f7;
  font-weight: bold;
  /* Removes the default triangle/arrow marker in most browsers */
  list-style: none; 
  text-align: left;
}

/* Re-adds a custom marker using pseudo-elements */
summary::before {
  content: "+";
  margin-right: 10px;
}

details[open] summary::before {
  content: "-";
}

/* Simple transition for smooth opening/closing (requires max-height trick for smooth animation) */
details p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

details[open] p {
  max-height: 500px; /* Needs a large enough value to accommodate all content */
  padding: 10px 0;
}

/* Styles for Contact Form */

.contact-section {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

.contact-intro > * + * {
  margin-top: 1rem;
}

.contact-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}
h2.contact-title {
    color: var(--blue-020);
    padding: 0;
}

.contact-description {
  color: var(--blue-030);
}

/* Profile Styles */
.profile-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
    padding: 4px 0;
}
.profile-label {
    color: var(--blue-020);
    width: 220px;
    display: flex;
    justify-content: flex-end;
    font-size: 1.1rem;
    font-weight: 700;
}
.profile-data {
    font-size: 1.0rem;
    color: var(--blue-030);
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

@media (max-width: 500px) {
    .profile-row {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        justify-content: center;
        gap: 0;
        margin-left: 30px;
    }
    .profile-label {
        justify-content: flex-start;
        width: 100%;
    }
    .profile-data {
        justify-content: flex-start;
        width: 100%;
    }
    .std-dialog-box.profile {
        margin: 0;
    }
}

/* Contact Form styles */
.form-group-container {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  width: 80%;
  margin-inline: auto;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: var(--space-1);
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.form-input,
.form-textarea {
  padding: 0.5rem;
  display: flex;
  height: 2.5rem;
  border-radius: 0.375rem;
  font-size: 1.0rem;
  line-height: 1.25rem;
}

.form-input {
    width: 100%;
    max-width: 400px;
}

.form-input::placeholder,
.form-textarea:focus-visible {
  color: #6b7280;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.form-textarea {
  min-height: 120px;
  width: 100%;
}

.form-submit {
  width: 100%;
  margin-top: 1.2rem;
  background-color: #3124ca;
  color: #fff;
  padding: 13px 5px;
  border-radius: 0.375rem;
}


/* Form group for label and input alignment */
.form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lg-dialog-box {
    border-left: 1px solid var(--gray-095);
    border-top: 1px solid var(--gray-095);
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
    max-width: 600px;
    margin: 40px auto;
    background: var(--color-bg-md);
    color: var(--bodytext);
    text-align: center;
    padding: 20px;

    h3 {
        padding: 40px 0 20px 0;
        color: var(--blue-020);
    }
    &.faq {
        text-align: left;
        font-size: 1.1rem;
    }
    & form {
        width: 100%;
    }
}
.renew-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
}

@scope (.renew-row) {
    .col1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        width: 190px;
    }
    .col2 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
}

/* Membership Application Form */
.appl-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 650px;
    margin: 40px auto;
    background: var(--color-bg-md);
    color: var(--bodytext);
    text-align: center;
    padding: var(--space-6); /* clamp? */

    & p {
        text-align: left;
        padding: var(--space-3);
    }

    & input[type=tel] {
        
        padding: 2px;
        height: 240px;
        max-width: 240px;
        width: 100%;
        font-size: 1.1rem;
        background-color: var(--gray-095);
    }
    
    & input[type=text] {
        padding: 4px 8px;
     
        background-color: var(--gray-095);   
    }
    & input[type="email"] {
        max-width: 360px;
        width: 100%;
        background-color: var(--gray-095);   
    }
	
}

.mem-price {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--blue-040);
        display: inline-block;
}

/*
.col2 {
    display: flex;
    grid-area: seats;
    flex-direction: row;
    gap: 10px;
    padding: 2px;
    align-items: center;

    & .option {
        font-size: 1.0rem;
    }
}
*/


.innerbox {
    padding: 12px;
    background-color: var(--color-bg-lt);
    margin-inline: auto auto;
    width: 85%;
    border: 1 px solid var(--gray-080);
    border-radius: var(--border-radius-md);
}

.sign-in-box {
    font-size: 1.1em;
    border: 1px solid var(--border-brand-primary);
    box-shadow: 0px 7px 11px -7px var(--gray-040);
    border-radius: 10px;
    max-width: 500px;
    width: 100%;
    height: auto;
    margin-inline: auto;
    margin-top: 30px;
    background-color: var(--blue-020);
    color: var(--gray-095);
    padding: 20px;

    & h3 {
        color: var(--blue-095);
        padding-block: 20px;
        text-align: center;
    }
    & a {
        color: var(--blue-095);
    }
    & form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
    }
    & input[type="tel"] {
        width: 50%;
        padding: 0 2px;
        border-radius: 4px;
        
    }
    & .signin-help {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
    }
    & img {
        display: inline-block;
        width: 24px;
        height: 24px;
    }
    & p {
        width: 95%;
        font-size: 1.0rem;
        color: var(--bodytext-lt);
        margin-inline: auto;
    }
}

.msg-box {
    border: 1px solid var(--border-brand-primary);
    box-shadow: var(--shadow-md);
    border-radius: 6px;
    max-width: 500px;
    width: 100%;
    padding: 20px;
    margin: 40px auto 100px;
    
    & h2 {
        padding: 10px 0;
        text-align: center;
    }
    & h3 {
        padding: 10px 0;
        text-align: center;
    }
    & .msg-text {
        padding: 10px 0;
        color: var(--bodytext);
        text-align: left;
    }
    & p {
        padding: 10px 0;
        font-size: 1.1rem;
        text-align: center;
    }
}

.box-header {
    font-size: 1.0rem;
    padding: 0 0 20px;
    color: var(--bodytext);
}


main {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
    background-image: var(--std-page-gradient); 

    & h1, h2, h3 {
        padding: 20px 0;
        text-align: center;
        color: var(--blue-030);   
    }
}
.msg-style-confirm {
    background-color: var(--green-095);
    color: var(--green-020);
    border: 1px solid var(--green-030);
} 
.msg-style-error {
    background-color: var(--red-095);
    color: var(--red-040);
    border: 1px solid var(--red-080);
}   
.msg-style-info {
    background-color: var(--gray-095);
    color: var(--blue-040);
}
.msg-style-question {

    background-color: var(--violet-095);
    color: var(--violet-060);
    border: 1px solid var(--violet-080);
    margin-bottom: 20px;
}
.msg-style-warning {
    background-color: var(--orange-095);
    color: var(--orange-040);
    border: 1px solid var(--orange-080);
    margin-bottom: 20px;
}
.msg-format-panel {
    display: flex;
    flex-direction: row;
    font-size: 1.0rem;
    gap: 10px;
    width: 90%;
    padding: 10px;
    margin: 8px auto 40px;
    border-radius: 8px;
    border-left: 12px solid;
    align-items: center;
    box-shadow: var(--shadow-md);

    & p {
        padding: 0 10px;
    }
}
.msg-format-box {
    width: 500px;
    padding: 20px;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    font-size: 1.2em;
    margin-top: var(--space-16);
    & h3 {
        padding: 10px 0;
        text-align: center;
        color: var(--blue-040);
        font-size: 1.4rem;
    }
    p {
        font-size: 1.1rem;
    }
}

.text-with-icon::before {
  content: '\f05a';         /* Or use a character code like '\2605' for a star */
  display: inline-block;    /* Allows setting width/height and vertical alignment */
  width: 16px;              /* Adjust as needed */
  height: 16px;             /* Adjust as needed */
  margin-right: 8px;        /* Spacing between icon and text */
  vertical-align: middle;   /* Aligns the icon vertically with the text */
}
.delete-icon >i {
    color: var(--orange-040);
    font-size: 1.8em;
}
.delete-icon i:hover {
    color: var(--orange-060);
    transform: scale(1.2);
    transition: transform 0.3s ease-in-out;
}   
.responsive {
    margin: 0;
    padding: 0;
    min-height: 60px;
    object-fit: cover;
}

#banner {
    width: 100%;
    background-color: var(--navbar-bg);
    margin: 0;
    padding: 0;
    height: auto;
}

.film-title {
    grid-area: title;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: var(--blue-030);
}
/*border: 1px solid var(--gray-020); */

input,
textarea,
button,
select {
    font: inherit;
}
input {
    font-size: 1.1rem;
    color: var(--blue-020);
    border: 1px solid var(--input-border);
}

input[type=text] {
    border-radius: 4px;
    padding: 4px 8px;
   
    background-color: var(--gray-095);   
}
input[type=tel] {
    
    border-radius: 4px;
    padding: 2px;
    height: 30px;
    width: 240px;
    font-size: 1.1rem;
    background-color: var(--gray-095);
}
input[type="email"] {
	
	border-radius: 4px;
	padding: 2px;
    background-color: var(--gray-095);   
	
}
input[type="radio"] {
    transform: scale(1.5);
    margin: 0 10px;
}
input[type="checkbox"] {
    transform: scale(1.3);
    margin: 0 10px;
}
.pwd-input {
    width: 100%;
    padding-block: 20px;
    margin-inline: auto;
    text-align: center;
}
select {
	width: 180px;
	border: none;
	height: 36px;
	border-radius: 8px;
    font-size: 1.0rem;
}
.news-popup {
    background-color: var(--gray-095);
}

.now-playing {
    width: 400px;
    background-color: var(--navbar-bg);
    color: var(--orange-080);
    font-family: 'Bangers', sans-serif;
    font-size: 3.5em;
    text-align: center;
    padding: 10px;
    margin: 60px auto 20px auto;
    border-top: 2px double var(--orange-040);
    border-bottom: 2px double var(--orange-040);
}
.event-type {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.change-link, .cancel-link {
    border: 1px solid var(--border-base);
    padding: 4px;
    border-radius: 10px;
    width: 220px;
}
.cancel-link {
    color: var(--orange-040);
    background-color: var(--orange-095);
    border: 1px solid var(--orange-040);

    &:hover {
        font-weight: bold;
        border: 2px solid var(--orange-040);
    }
    &:active {
        color: var(--orange-080);
    }   
    & a {
        color: var(--orange-040);
    }
}
.change-link {
    background-color: var(--blue-095);
    margin-bottom: 7px;
    &:hover {
        font-weight: bold;
        border: 2px solid var(--blue-040);
    }
}

/* Tooltip Styles */

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
	font-size: 0.9em;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--blue-040);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
	font-size: 1.0em;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--blue-040) transparent transparent transparent;
}

/* Button Styles */
/*
button {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 12px 56px;
}
    
button:active {
	position:relative;
	top:1px;
    box-shadow: none;
    font-weight:bold;
}
*/
/* Home Page Tab Buttons */
.event-button {
    background-color: var(--blue-020);
    width: 200px;
    border-radius: 10px 10px 0 0;
    padding: 8px;
    font-size: 1.2em;
    font-weight: bold;
    margin: 8px 10px 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    border-top: 1px solid var(--blue-080);
    border-left: 1px solid var(--blue-080);
    border-right: 1px solid var(--blue-080);
    border-bottom:none;
    transform: translateY(1px);
    color: var(--blue-080);

   /*
    &.theatrical {
        color: var(--blue-080);
    }
    &.streaming {
        color: var(--blue-080);
    } */
}

.event-button:hover {
    transform: scale(1.1);
    background-color: var(--orange-060);
    color: var(--blue-020) !important;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.event-tab-selected {
    border-top: 3px solid var(--orange-060);
    border-left: 3px solid var(--orange-060);
    border-right: 3px solid var(--orange-060);
    border-bottom:none;
    color: var(--blue-090);
}

.blueButton {
	background:linear-gradient(to bottom, var(--blue-060) 5%, var(--blue-030) 100%);
	border:1px solid #337fed;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-decoration: none;
	cursor:pointer;
	color:#ffffff;
	padding: var(--space-2) var(--space-8);
	text-shadow:0px 1px 0px #1570cd;
    width: auto;
    height: 44px;
    font-size: 1.1rem;
    font-weight: 500;
}
.blueButton:hover {
	background:linear-gradient(to bottom, var(--blue-030) 5%, var(--blue-060) 100%);
	background-color:#005299;
}

.orangeButton {
	box-shadow: 0px 7px 11px -7px #6b6327;
	background:linear-gradient(to bottom, var(--orange-080) 5%, var(--orange-060) 100%);
	background-color:#ffec64;
	border-radius: var(--border-radius-lg);
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color: var(--orange-button-text);
	font-family:Arial;
	font-weight:bold;
	padding:6px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.orangeButton:hover {
    background:linear-gradient(to bottom, var(--orange-060) 5%, var(--orange-080) 100%);
	background-color:#ffab23;
}
.orangeButton:active {
	position:relative;
	top:1px;
}
.greyButton {
	box-shadow: 0px 7px 11px -7px #5c5c5c;
	background:linear-gradient(to bottom, var(--gray-095) 5%, var(--gray-070) 100%);
	border-radius: var(--border-radius-lg);
	border:1px solid #949494;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 10px 26px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7a7a7a;
    height: 44px;
}
.greyButton:hover {
	background:linear-gradient(to bottom, var(--gray-070) 5%, var(--gray-095) 100%);
	background-color:#adadad;
}
.greyButton:active {
	position:relative;
	top:1px;
}

.cancelButton {
	box-shadow: var(--shadow-md);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:19px;
	border:1px solid #a1a1a1;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:1.1rem;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.cancelButton:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.cancelButton:active {
	position:relative;
	top:1px;
}
.disabledButton {
    box-shadow: 0px 7px 11px -7px #5c5c5c;
    background: linear-gradient(to bottom, #d6d6d6 5%, #919191 100%);
    background-color: #d6d6d6;
    border-radius: 19px;
    border: 1px solid #949494;
    display: inline-block;
    cursor: not-allowed;
    color: var(--gray-040);
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px 36px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #7a7a7a;
}

.nextButton, .prevButton {
    background-color: var(--blue-040);
    color: var(--text-lt);
    padding: 4px 16px;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 1.0rem;
    text-decoration: none;
}

input::file-selector-button {
  /* Basic styling */
  background-color: var(--gray-050);
  color: white; /* White text */
  padding: 10px 15px; /* Spacing inside the button */
  border: none; /* Remove default border */
  border-radius: var(--border-radius-md); /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-family: Inter, sans-serif; /* Set font */
  font-size: 1.1rem; /* Set font size */
}

/* Hover effect */
input::file-selector-button:hover {
  background-color: #0056b3;
}

/* Rotating Border */
.rotating-border {
    --offset: 3px;
    background: transparent;
    border-radius: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

/* Conic gradient */
.rotating-border::before { 
    content: '';
    background: conic-gradient(transparent 270deg, white, transparent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    width: 100%;
    animation: rotate 2s linear infinite;
    
}

/* Overlay */
.rotating-border::after {
    content: '';
    background: inherit;
    border-radius: inherit;
    position: absolute;
    inset: var(--offset);
    height: calc(100% - 2 * var(--offset));
    width: calc(100% - 2 * var(--offset));
    
}

.rotating-border button,
.rotating-border input[type="submit"] {
    background: transparent;
    color: white;
    font-size: 1.5rem;
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 1.5rem;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
    }

    to {
        transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
    }
}

/* Pulsating Button */
.pulsating-button {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 8px;
    background-color: var(--orange-040);
    color: white;
    padding: 0px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: glow-pulse 2s infinite alternate;
}

@keyframes glow-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); /* Initial shadow (transparent) */
      }
      50% {
        box-shadow: 0 0 20px 10px rgba(0, 123, 255, 0.9); /* Full glow */
      }
      100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); /* Back to transparent */
      }
    }

/* Modal Dialog */
.modalDialog {
	border: 1px solid #273c5e;
	border-radius: 6px;
	font-size: 1.0rem;
    box-shadow: var(--shadow-lg);
    background-color: var(--blue-090);
    color: var(--bodytext);
	padding: 28px;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);	
	  
	  & p {
        font-size: 1.0rem;
        color: var(--bodytext);
        text-align: left;
      }
      &.w400 {
		width: 400px;
	  }
	  &.w600 {
		width: 600px;
	  }
      & h3 {
        padding-top: 20px;
        text-align: center;
      }
      & h2 {
        color: var(--gray-040);
      }
      & select {
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        background-color: var(--gray-095);
        font-size: 1.0rem;
        height: 36px;
    }

}
.modalDialog h2 {
    text-align: center; 
}

.align-right {
    display: flex;
    justify-content: flex-end;
}


.dlg-btn {	
	color: #ffffff;
	background-color: #789de3;
	font-size: 14px;
	border: 1px solid #2d63c8;
	border-radius: 4px;
	padding: 8px 10px;
	cursor: pointer
}
.dlg-btnx {	
	color: var(--blue-020);
	font-size: 14px;
	border: none;
	padding: 8px 10px;
	cursor: pointer
}
.dlg-btn:hover {
	color: #2d63c8;
	background-color: #ffffff;
}
section {
    margin: 0;
    padding: 0;
}

/* Grid Styles - Reserve Events Page */

.res-panels-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
}
.reservationpanel {
    display:flex;
    flex-direction: row;
    margin-bottom: 10px;
    align-items: center;
    border: 1px solid var(--gray-060);
    border-radius: 8px;
    background-color: var(--color-bg-lt);
    margin: 10px 0;
    max-width: 600px;
    width: 100%;

    &.top {
        vertical-align: top;
    }
}
	.highlight {
		background-color: var(--blue-080);
		border-width: 1px;
		border-color: var(--color-border);
        box-shadow: var(--shadow-sm);
	}


/* Grid Layout - Membership Plans */

.plan-container {
    display: grid;
    grid-template-columns: 240px 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, auto);
    gap: 8px;
    border: 1px solid var(--gray-040);
}
/* Column Style */
.membership-feature {
   border: 1px solid var(--gray-040);
    background-color: var(--blue-080);
    padding: 10px;
    border-radius: 8px;
    color: var(--gray-020);
    font-family: inherit;
    font-weight: bold;
    &.hdr {
        font-weight: bold;
        margin-bottom: 10px;
        color: white;
        background-color: var(--blue-020);
    }
}

.membership-chk {
    background-color: var(--blue-030);
    padding: 10px;
    width: 140px;
    border-radius: 8px;
    color: var(--gray-090);
    text-align: center;
    &.hdr {
        font-weight: bold;
        margin-bottom: 10px;
        background-color: var(--blue-020);
        & a img {
            margin: auto;
            display:block;
            text-align: center;
        }
    }
        
    &.txt {
        font-weight: normal;
        font-size: 0.8em;
        font-weight: bold;
        background-color: var(--gray-090);
        color: var(--blue-030);
        border: 1px solid var(--gray-040);
    }
   
}

/* Style check marks */
.image-container {
    display: flex;
    container-type: inline-size;
    justify-content: center;
    align-items: center;
}
.image-container img {
    width: 40%; /* Image fills the container 40% */
    height: auto;
}
@container (min-width: 768px) {
  .image-container img {
    width: 80%; /* Image fills the container 80% when min-width is met */
    height: auto;
  }
}

/* Q&A Showcase Styles */
.qa-pg-header {
    max-width: 800px;
    background-color: var(--color-bg-lt);
    margin: 20px auto 10px;
    padding: 10px;
    border-radius: 8px;
    color: var(--blue-020);
    font-size: 1.0rem;
}

.sort-search-container {
    display: flex !important;
    flex-direction: row;
    justify-content: center; /* Centers the group */
    align-items: flex-end;   /* Aligns the bottom of the dropdown with the search button */
    gap: 15px;               /* Space between the two forms */
    background-color: var(--blue-090);
    padding: 10px;
    border-radius: 8px;
    margin: 8px 0;          /* Space above and below the bars */
    flex-wrap: wrap;         /* Allows stacking only on very small mobile screens */
    max-width: 800px;
    width: 100%;

    & hr {
        display: none;
    }
    & br {
        display: none;
    }
}
.sortbox {
    font-size: 1.0rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-left: 10px;
}
@scope (.sortbox) {
    label {
        display: block;
        margin-bottom: 4px;
        color: var(--blue-020);
        font-weight: 700;
    }
}
.searchbox {
    display: inline-block;
    margin-right: 10px;
}
@scope (.searchbox) {
    .greyButton {
        display: block;
        margin: 4px 0 6px 0;
    }
}
input[type="search"] {
    height: 36px;
    padding-inline: 6px;
    border: none;
    border-radius: 8px;
    background-color: var(--gray-095);
    color: var(--blue-020);
    font-size: 1.0rem;
    width: 200px;
}
/* Q&A grid panels */
.qa-panel {
    display: grid;
    grid-template-columns: 170px 1fr;
    grid-template-rows: auto;
    grid:
    'poster title'
    'poster date'
    'poster info'
    'poster watch-button'
    'poster qa-password';
    grid-gap: 6px;
    max-width: 800px;
    border: 1px solid var(--gray-040);
    border-radius: 8px;
    padding: 10px;
    margin-inline: auto;
    background-color: var(--blue-030);
}
.qa-poster{ 
    grid-area: poster;
    width: 165px;
}

.title, .date, .info {
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: var(--navbar-bg);
    color: var(--gray-090);
    text-align: left;
    overflow: hidden;
    grid-gap: 6px;
}
.title {
    grid-area: title;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--blue-080);
}
.date {
    grid-area: date;
    font-size: 1.0rem;
    color: var(--gray-080);
}
.info {
    grid-area: info;
    font-size: 1.0rem;
    color: var(--gray-070);
}
.qa-password {
    grid-area: qa-password;
    font-size: 0.9em;
    color: var(--gray-070);
}
.watch-button,
.qa-buttonrow {
    grid-area: watch-button;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sponsor Table */
.sponsor-table {
    display: grid;
    grid-template-columns: 280px 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 2px;
    border: 1px solid var(--gray-040);
    border-radius: 8px;
    padding: 10px;
    margin: 20px auto;
    background-color: var(--blue-030);
}


/* Grid Layout - Quad Panel */

.quad-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0; 
}
.quad-panel {
    display: grid;
    grid:
    'image title-section'
    'image info-section'
    'image buttons';
    
    grid-gap: 6px;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto;
    border-bottom: 2px solid #3b3c40;
    margin-bottom: 20px;
}

.quad-panel-str {
    display: grid;
    grid:
    'image title-section'
    'image info-section'
    'image buttons';
    
    grid-gap: 6px;
    grid-template-columns: 300px 1fr;
    border-bottom: 2px solid #3b3c40;
    margin-bottom: 20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.panel-title, .panel-filminfo {
    padding: 6px;
    width: 100%;
    border: none;
    border-radius: 8px;
    background-color: var(--navbar-bg);
    color: var(--gray-090);
    min-width: 0;
    text-align: left;
    overflow: hidden;
    grid-gap: 6px;
}
.quad-image {
    grid-area: image;
    width: 300px;
    border-top: 1px solid var(--gray-040);
    box-sizing: border-box;

}
.quad-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.panel-title {
    grid-area: title-section;
    color: var(--blue-080);
    background-color: var(--blue-030);
    border-top: 1px solid var(--orange-040);
    border-bottom: 1px solid var(--orange-040);

    & h2 {
        color: var(--blue-080);
        text-transform: uppercase;
        padding: 4px 6px;
        margin: 0;
    } 
}
.panel-title-stream {
    grid-area: title-section;
    color: var(--blue-080);
    background-color: var(--blue-030);
    border-top: 1px solid var(--orange-040);
    border-bottom: 1px solid var(--orange-040);
    display: flex;
    flex-direction: column;
    justify-content: center;

    & h2 {
        color: var(--orange-040);
        text-transform: uppercase;
        padding: 4px 6px;
        margin: 0;
    } 
}

.panel-datetime {
    font-size: 1.0rem;
    color: var(--gray-080);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.panel-venue {
    text-align: center;
    color: white;
    padding: var(--space-1) var(--space-3);
    font-size: 1.0rem;
}

.panel-filminfo {
    grid-area: info-section;
    font-size: 1.0rem;
    margin-block: 0;
   background-color: var(--blue-010);
}
.panel-info {
    background-color: var(--blue-010);
    font-size: 1.0rem;
    height: 200px;
    overflow-y: auto;
    padding: 6px;

}
.panel-secondlook {
    width: 100%;
    height: auto;
    text-align: center;
    color: var(--orange-060);
    font-weight: bold;
}

.panel-buttons {
    display: flex;
    grid-area: buttons;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 60px
}

.panels-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0 20px;
    margin: 0 auto;
    max-width: 980px;
    border: 1px  solid var(--orange-060);
    border-radius: 4px;
    background-color: var(--blue-010);
    overflow-y: auto;
    width: 100%;
}

.reserve-button {
    background-color: var(--blue-050);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.9em;
    font-weight: bold;
    margin: 8px 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    &:hover {
        transform: scale(1.1);
    }
}
.trailer-button {
    background-color: var(--orange-040);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    &:hover {
        transform: scale(1.1);
    }
}
.mfs-logo {
    grid-area: logo;
    width: 100%;
    height: auto;
    max-width: 260px;
    margin: 0 auto;
    display: inline-block;

    & img {
        width: 100%;
        height: auto;
        margin-left: 19px;
    }
}
.topmenu {
    display: contents;
    width: 100%;
}


.pagetop-grid {
    display: grid;
     grid:
    'logo top-buttons'
    'logo navbar';
    grid-gap: 6px;
    grid-template-columns: 260px 1fr;
}

.email-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 20px;

    & .col1, .col2 {
        display: flex;
        flex-direction: column; 
        gap: 4px;
    }
    & label {
        font-size: 1.0rem;
        color: var(--blue-020);
        width: 100%;
        padding: 2px 0;
        text-align: left;
    }
    & .col1-2 {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 80%;
    }
}



/* New Res Styles */
.newres-col1 {
    width: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.newres-col1a {
    width: 84px;
}
.newres-col2 {
    display: flex;
    flex-direction: column;
    padding-left: 10px;

    & .film-venue {
        font-size: 0.9rem;
        color: var(--blue-040);
    }
    & .film-date {
        font-size: 0.9rem;
        color: var(--blue-040);
    }
}
.counterstack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 20px;
}
.newres-col3 {
    flex-direction: row;
    display: none;
    transition: all 0.5s;
    gap: 6px;
    margin-left: auto;
}
.show {
    display: flex;
    transition: all 0.5s;
    margin-right: 10px;
}
.newres-col3-visible {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: all 0.5s;
    font-size: 1.5rem;
    color: red;
    font-weight: 700;
    margin-left: 30px;
}


/* Membership Application Styles */

.appl-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-2) 0;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
    height: auto;
}

.appl-form {
    display: flex;
	flex-direction: column;
	align-content: flex-start;
	align-items: flex-start;
}
.appl-label {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: 140px;
    font-size: 1.0rem;
    color: var(--blue-020);
}

.appl-phototext {
    font-size: 1.0rem;
    border: 2px solid var(--border-warning);
    border-radius: var(--border-radius-md);
    padding: 0 0 var(--space-3);
    margin: 0 0 var(--space-3) 0;
    color: var(--fg-warning);
    background-color: var(--bg-warning);
    text-align: left;
}

.appl-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 60px;
    margin: var(--space-3) 0;
}
.appl-innerbox {
    padding: 12px;
    margin-inline: auto auto;
    margin-block: 10px 20px;
    width: 100%;
    border: none;
    border-radius: var(--border-radius-sm);
}
.appl-guildbox {
    display: flex;
    flex-direction: column;
    background-color: var(--blue-090);
    padding: 20px;
    width: 100%;max-width: 600px;
    margin: 10px auto;
    height: auto;
    border: 1px solid var(--gray-040);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
}
.appl-flexrow {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding: 20px 0 0;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    height: auto;
    font-size: 1.1rem;
}
.appl-flexcol {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    width: 100%;
    font-size: 1.1rem;
}
.appl-text {
    font-size: 1.0rem;
    padding: 6px;
    margin: 10px 0;
    color: var(--fg-base);
    background-color: var(--bg-base);
    text-align: left;
}
.buttonRow {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top:20px;
    gap: 20px;
    height: 60px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    align-items:end;
    gap: 10px;
    height: 40px;
}

#top-buttons {
    grid-area: top-buttons;
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding: 10px;
    background-color: var(--blue-020);
    /* border-bottom: 1px solid var(--orange-080); */
    box-sizing: border-box;
    gap: 10px;
}
.top-button {
    background-color: var(--orange-040);
    color: var(--text-lt);
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 1.0rem;
    font-weight: bold;
    margin: 8px 10px;
    cursor: pointer;
    height: 48px;

    &:hover {
        transform: scale(1.1);
    }
}

/* New Main Navigation from W3 Schools */

.navbar {
  grid-area: navbar;
  background-color: var(--navbar-bg);
  position: sticky;
  /* border-bottom: 1px solid var(--blue-090); */
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(0.625rem, -3.997rem + 8.589vi, 1.5rem);

   & ul {
            display: flex;
            flex-direction: row;
        }
}

/* Navigation links */
.navbar a {
  display: flex;
  flex-direction: row;
  font-size: 16px;
  color:var(--orange-080);
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  height: 44px;
}

/* The subnavigation menu */
.subnav {
    position: relative;
/*  justify-content: center;
  overflow: hidden; */
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color:var(--orange-080);
  padding: 14px 16px 0;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

/* Add a background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: var(--navbar-bg);
  color: var(--orange-080);
  text-decoration: none;
  font-weight: 700;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: auto;
  width: auto;
    background-color: var(--blue-040);
  z-index: 1001;
  overflow: hidden;
  border-radius: 4px;
  transform: translateY(10px) translateX(12px);
  white-space: nowrap;
 /* border-top: 1px solid var(--blue-090);
   border-bottom: 1px solid var(--blue-090); */
}
.subnav-content a:not(:last-child) {
    border-bottom: 1px solid var(--blue-090);
}

/* Style the subnav links */
.subnav-content a {
  color: var(--gray-090);
  text-decoration: none;
  gap: 20px;
  display: block;
}


/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: inherit;
  color: var(--orange-095);
  font-weight: bold;
}

/* Show subnav content when .active is toggled by JS (click-based, desktop & mobile) */
.subnav-content.active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;
  background-color: var(--blue-040);
  width: auto;
}

/* Hidden by default; revealed inside media queries below */
.resp-banner  {
    display: none;
    color: var(--orange-080);
    position: relative;
}
#icon-banner {
    display: none;
}

/** Home page carousel styles **/
/* CAROUSEL STYLES */
.carousel-container {
    position: relative;
    max-width: 100%;
    margin: 20px auto;
    overflow: hidden;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: auto; /* Adjust based on your quad panel height */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 20px 0;
    box-sizing: border-box;
	max-width: 100%;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    padding: 8px 6px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    z-index: 10;
}

.carousel-nav:hover {
    background: rgba(0,0,0,0.9);
}

.carousel-prev {
    left: -6px;
	font-size: 1.9em;
}

.carousel-next {
    right: -2px;
	font-size: 1.9em; 
}

.nav-color {
	color: var(--orange-060);
}

.carousel-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-dot.active {
    background: var(--orange-060);
}

/* Make sure navigation shows even with one slide for debugging */
.carousel-container .carousel-nav,
.carousel-container {
    display: block !important;
}

/* Only hide if explicitly one slide AND you want to hide them */
.carousel-container[data-slides="1"].hide-single-nav .carousel-nav,
	.carousel-container[data-slides="1"].hide-single-nav .carousel-indicators {
    display: none !important;
}

/* Event type specific carousel containers */
.theater-carousel, .stream-carousel, .dinner-carousel, .drvin-carousel {
    display: none;
}

.theater-carousel.active, .stream-carousel.active, 
.dinner-carousel.active, .drvin-carousel.active {
    display: block;
}

/* Responsive Nav — collapses to hamburger at 861px */
@media screen and (max-width: 1000px) {

    /* Show mobile banner image, hide desktop banner */
    .resp-banner {
        grid-area: logo;
        display: block;
        width: 100%;

        & img {
            width: 200px;
            height: auto;
            margin-left: 20px;
        }
    }
    #banner img {
        display: none;
    }
    .mfs-logo {
        display: none;
    }
    .pagetop-grid {
        display: grid;
        grid:
        'logo top-buttons'
        'logo icon-banner'
        'navbar navbar';
        grid-gap: 6px;
       grid-template-columns: 240px 1fr;
    }


    /* Hamburger icon row — sits below resp-banner */
    #icon-banner {
        grid-area: icon-banner;
        display: flex;
        width: 100%;
        background-color: var(--navbar-bg);
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px 0;
        box-sizing: border-box;
        height: 56px;
    }
    #resp-title {
        display: flex;
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1.2em;
        align-items: center;
        margin-left: 10px;
        flex: 1;
    }
    #icon-banner a.icon {
        cursor: pointer;
        color: #ccc;
        text-decoration: none;
    }
    #icon {
        color: #ccc;
        display: flex;
        font-size: 2.0em;
        align-items: center;
        z-index: 99;
    }

    /* Hide navbar by default; reveal as column when .open is set by JS */
    .navbar {
        display: none;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .navbar a {
        display: flex;
        justify-content: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--blue-040);
        width: 100%;
        text-align: center;
    }
    .navbar.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .subnav {
        width: 100%;
        overflow: visible;
        border-bottom: 1px solid var(--blue-040);
        text-align: center;
    }
    .subnav .subnavbtn {
        max-width: 200px;
        text-align: center;
        padding: 12px 16px !important;  
    }
    .subnav-content.active {
        width: 100%;
        transform: translateY(10px) translateX(0px);
    }

    /* Top-level nav links
    .navbar > a {
        display: flex;
        justify-content: flex-start;
        padding: 12px 16px;
        border-bottom: 1px solid var(--blue-040);
    }

    /* Subnav container fills full width */
/*    .subnav {
        width: 100%;
        overflow: visible;
    }
    .subnav .subnavbtn {
        width: 100%;
        text-align: left;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--blue-040);
        display: block;
    }

    .subnavbtn {
        text-align: left;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--blue-040);
        display: block;
    }
    /* Subnav content — static position, column layout, hidden until .active 
    .subnav-content {
        display: flex;
        flex-direction: column;
        background-color: var(--blue-010);
        display: none;
    }
    .subnav-content.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }
    .subnav-content a {
        padding: 10px 32px;
        border-bottom: 1px solid var(--blue-040);
        justify-content: flex-start;
        display:
    }

    */
    .panels-container {
        height: auto;
    }
}
/* Media Queries for home page */
@media screen and (max-width: 768px) {   
    #dialog1 {
        width: 80%;
    }
   
    /* #icon-banner styles are now handled in the max-width: 861px block above */
    .quad-panel {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-areas: 
        'title-section title-section'
        'image info-section'
        'buttons buttons';
        height: auto;
    }
    .quad-panel-str {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-areas: 
        'title-section title-section'
        'image info-section'
        'buttons buttons';
        height: auto;
    }
    .quad-container {
        width: 100%;
        overflow: hidden;
    }
    
    .carousel-indicators {
        height: 8px;
    }
    .quad-image img {
        width:200px;
        height: auto;
    }

     #icon-banner {
        grid-area: icon-banner;
        display: flex;
        width: 100%;
        background-color: var(--navbar-bg);
        justify-content: flex-end;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        height: 56px;
    }
    .header-text p {
        font-size: 1.5em;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #000;
        padding: 10px;
    }
    .item1 {
        grid-area: image;
        align-items: center;
        border-top: 4px solid var(--gray-010);
        box-sizing: border-box;
        margin: 0px auto;
    }
   
    #resp-top-buttons {
        display: flex;
        height: 40px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px;
        margin: 0;
        column-gap: 1px;
        background-color: var(--navbar-bg);
        border-bottom: 1px solid var(--orange-080);
        display: none;
        overflow: hidden;
        
    }
    .top-button {
        background-color: var(--orange-040);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 8px;
        font-size: 0.9em;
        font-weight: bold;
        margin: 0;
        cursor: pointer;
        line-height: 1.0;
       
        & :hover {
            transform: scale(1.1);
        }
    }
    .now-playing {
        width: 300px;
        background-color: var(--navbar-bg);
        color: var(--orange-080);
        font-family: 'Bangers', sans-serif;
        font-size: 3.0em;
        text-align: center;
        padding: 10px;
        margin: 60px auto 20px auto;
        border-top: 2px double var(--orange-040);
        border-bottom: 2px double var(--orange-040);
    }
    .slide {
        animation: none;
    }
    .event-type {
        margin-top: 20px;
    }
    .event-button {
        width: 160px;
    }
    .panel-info {
        height: auto;
    }
    .panel-buttons {
        align-items: flex-end;
        padding: 10px 0;
        height: auto;
    }
    .pagetop-grid {
        display: grid;
        grid:
        'logo top-buttons'
        'logo icon-banner'
        'navbar navbar';
        grid-gap: 6px;
        grid-template-columns: 240px 1fr;
    }

}
@media screen and (min-width: 501px) {
    .main-nav li:hover .sub-menu > li {
        display: block;
        top: 0px;
    }
    .sub-menu li:hover  li {
        display: block;
    }
    
}
@media screen and (max-width: 500px) {
    .innerbox {
        width: 100%;
        border: none;
        margin: 0;
    }
    .lg-dialog-box {
        padding: 0;
    }
    .modalDialog {
        top: 34%;
    }
    .std-dialog-box.sponsor, .std-dialog-box.films {
        padding: 0;
    }
    .stdtext {
        border-radius: 0;
    }
}
@media screen and (max-width: 470px) {
     .quad-panel {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        'title-section'
        'image'
        'info-section'
        'buttons';
        height: auto;
    }
    .quad-panel-str {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        'title-section'
        'image'
        'info-section'
        'buttons';
        height: auto;
    }
    .top-button.donate {
        display: none;  
    }
    .quad-image {
        grid-area: image;
        width: 100%;
        height: auto;
        display:flex;
        justify-content: center;
    }
    .top-button {
        height: 52px; 
    }
    .blueButton {
        padding: 8px 20px;
    }
    .disabledButton {
        padding: 8px 20px;
        font-size: 1.0rem;
    }
    .footer-section  {
       &.about {
        width: 90%;
        margin: 10px auto;
       }
    }
    .qa-panel {
        display: grid;
        grid:
        'title'
        'date'
        'info'
        'watch-button'
        'qa-password'
        / 1fr;
    }
    .qa-poster {
        display: none;
    }

    /* Q&A Showcase styles */
    .sort-search-container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;  

        & form {
            flex-direction:column;
        }
        & .searchbox {
            margin-top: 20px;
        }
    }
   
}

@media screen and (max-width: 390px) {
    .panel-buttons {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}

/* Media Queries for New Reservations page */
@media screen and (max-width: 768px) {
    .newres-col1a {
        display: none;
    }
    .reservationpanel {
        padding: 10px 0;
    }
    .newres-col2 {
        text-align: center;
        padding-bottom: 8px;
        font-size: clamp(1.0rem, 2vw, 1.5rem);
	}
    .newres-col3 {
        margin: 0 10px 0;
        padding: 10px 0;
        gap: 10px;
    }
    .highlight {
        justify-content: space-between;
    }
    .counterstack {
        gap: 16px;
    }
}


#resp-top-buttons {
    display: none;
}

.slide {
    -webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: slide-in-blurred-left 1.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2025-2-1 17:5:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-blurred-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-left {
    0% {
        -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}
@keyframes slide-in-blurred-left {
    0% {
        -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}


.mfs-sponsors {
    display: block;
    width: 760px;
}
.sponsors {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    align-items: center;
    margin: 10px auto 20px;
    border: none;
    border-radius: 8px;
    padding: 4px;
    background-color: white;
}
.sponsors-title {
    max-width: 760px;
    width: 100%;
    margin: 4px auto;
   
    & h3{
        text-align: center;
        color: var(--blue-090);

    }
}
/* Sponsor Options Table Styles */


.sp-toprow {
    background-color: var(--blue-030);
    color: var(--gray-090);
    font-size: 1.0rem;
}

.sp-titlerow {
    background-color: var(--blue-050);
    color: var(--gray-090);
    font-size: 1.0rem;
    grid-column: span 4;
}
.sp-row {
    background-color: var(--blue-080);
    color: var(--blue-020);
    font-size: 0.9rem;
    text-align: center;
    padding: 6px;

    & div  {
        padding: 6px;
    }

    &.hdr {
        background-color: var(--blue-050);
        color: var(--gray-090);
        font-size: 1.0rem;
        font-weight: bold;
        text-align: left;
    }
}


.card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px;
    max-width: 1400px;
    margin-inline: auto;
}
@media (max-width: 1060px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}
.card {
    flex: 22%;
    container-type: inline-size;
    padding: var(--space-4);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    background-color: var(--color-bg-md);
    position: relative;
    display: flex;
    flex-direction: column;
    vertical-align: top;
    box-sizing: border-box;
    gap: var(--space-3);
			
    & .descr {
        width: 90%;  
        margin-inline: auto;
        margin-top: 10px;
        font-size: 0.9rem;
        padding-bottom: 10px;
    }
        
    & .memtype {
        padding: 10px;
        width: 86%;
        text-align: center;
        margin-inline: auto auto;
        color: var(--text-lt);
        background-color: var(--std-blue);
        border-radius: 6px;
        font-size: clamp(0.875rem, 1.1rem, 1.2rem);
        font-weight: bold;
    }

    & .price {
        width: 80%;
        text-align: center;
        margin-inline: auto auto;
        height: 74px;
        padding: 6px 0;
        color: var(--blue-030);
        border: 1px solid var(--border-brand-primary);
        border-radius: 6px;
        background-color: var(--color-bg-lt);
        font-size: clamp(0.9rem,6.0cqi,1.3rem);
    }
    
    & .descr p {
        width: 100%;
        margin-top: 0;
        font-size: 0.9em;
    }
    
    & .buttonbox {
        display: flex;
        width: 80%;
        justify-content: center;
        padding: 4px 0 10px;
        margin-inline: auto auto;
        margin-top: auto;
        position: relative;
        bottom: 10px;
        height: 44px;
        margin-top: auto;
    }
    & .top-content {
        background-color: #fff;
        margin: 4px;
        border-radius: 4px;
        height: 120px;
    }
    & .bottom-content {
        display: flex;
        flex-direction: column;
        margin-top: auto;
    }
    & .info-link{
        width: 100%;
        margin: 16px auto;
        text-align: center;
        font-size: 1.0rem;
        color: var(--std-blue);
        font-style: italic;
        cursor: pointer;
    }
}
.info-link a {
    anchor-name: --info-anchor;
}

.card.annual {
    border: 4px solid var(--std-orange-text);  /* annual card only — overrides the 1px above */
}

.badge {
    position: absolute;
    text-align: center;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--orange-060);
    color: var(--blue-020);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: var(--font-size-md);
    font-weight: bold;
    width: 200px;
}

.card:hover {
    transform: translateY(-2px); 
    box-shadow: var(--shadow-lg);
    
 }

 @media (max-width: 700px){
    .card-container {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .card {
        gap: 0;

        & info-link {
            margin: 0 0 16px;
        }
    }

}


/* Animations */
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            transform: translateX(-50%) translateY(-50%);
  }
}
.scale-up-ver-center {
	-webkit-animation: scale-up-ver-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
 * ----------------------------------------
 * animation scale-up-ver-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-ver-center {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes scale-up-ver-center {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
            transform: translateX(-50%) translateY(-50%);
  }
}

/* Membership Plans */
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .card {
        flex: 100%;
        max-width: 100%;
        row-gap: 2em;
    }
    /* Mailing list dialog */
    .email-row {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
    }
    /* Hide sponsor table */
    .sponsor-table {
        display: none;
    }

}



/* Footer Styles */
footer {
    background-color: black;
    width: 100%;
    color: var(--gray-060);
    font-family: inherit;
    padding-top: 60px;
}
.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 0 auto;
}
.footer-sections {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: center;
    align-items: top;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}
.footer-section {
    margin: 10px;
    &.about {
        max-width: 260px;
    }
    &.links {
        max-width: 160px;
    }
    &.contact {
        max-width: 260px;
    }
}
.footer-section h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}
.footer-section p, .footer-section ul, .footer-section a {
    color: #ddd;
    font-size: 14px;
}
.footer-section ul {
    list-style: none;
    padding: 0;
}
.footer-section ul li {
    margin-bottom: 8px;
}
.footer-section ul li a {
    color: #bbb;
    text-decoration: none;
}
.footer-section ul li a:hover {
    color: #fff;
}
.social-media a {
    color: #bbb;
    text-decoration: none;
    margin-right: 10px;
}
.social-media a:hover {
    color: #fff;
}
.footer-bottom {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #555;
    margin-top: 20px;
    font-size: 13px;
}


/* Styling for counters */
.quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: 10px;
    background-color: var(--gray-095);
    box-sizing: border-box;
}

.quantity:has(.quantity__minus:hover,
.quantity__plus:hover) {
    color: var(--blue--070);
}

#quantity1 {
    width: 26px;
    height: 26px;
    border: 1px solid #ccc;
}
.quantity__minus,
.quantity__plus {
    display: block;
    width: 22px;
    height: 23px;
    margin: 0;
    text-decoration: none;
    text-align: center;
    line-height: 23px;
}
.quantity__minus-disabled,
.quantity__plus-disabled {
    display: block;
    width: 22px;
    height: 23px;
    margin: 0;
    text-decoration: none;
    text-align: center;
    line-height: 23px;
}
.quantity__minus:hover,
.quantity__plus:hover {
    
    color: var(--blue-020);
    font-weight: bold;
    transform: scale(1.10);
    text-decoration: none;
} 

.quantity__plus {
        border-radius: 0 3px 3px 0;
}
.quantity__minus {
    border-radius: 3px 0 0 3px;
}

.quantity__input {
    width: 26px;
    height: 24px;
    margin: 0 2px;
    padding: 0;
    text-align: center;
    background: var(--gray-095);
    color: var(--fg-base);
    font-weight: bold;
    font-size: 1.1rem;
    border: none;
}
.quantity__minus:link,
.quantity__plus:link {
    color: var(--gray-050);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}
.quantity__minus-disabled:link,
.quantity__plus-disabled:link {
    color: var(--gray-080);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.quantity__minus:visited,
.quantity__plus:visited {
    color: #fff;
}
.quantity__minus:hover,
.quantity__plus:hover {
    color: var(--blue-020);
    font-weight: bold;
}
.ctrl-label {
    width: 100%;
    margin-left: 10px;
    text-align: left;
    font-size: 1.1rem;
}

/* ---------------------- */
/* Styling for Search Box */
/* ---------------------- */
.input {
    line-height: 1.0em;
    color: var(--blue--080);
    border: var(--input-border);
}

.search-bar {
	display: flex;
    background-color: var(--blue-020);
}
.search-bar input,
.search-btn, 
.search-btn:before, 
.search-btn:after {
	transition: all 0.25s ease-out;
}
.search-bar input,
.search-btn {
	width: 2.4em;
	height: 2.4em;
}
.search-bar input:invalid:not(:focus),
.search-btn {
	cursor: pointer;
}
.search-bar,
.search-bar input:focus,
.search-bar input:valid  {
	width: 100%;
}
.search-bar input:focus,
.search-bar input:not(:focus) + .search-btn:focus {
	outline: transparent;
}
.search-bar {
	margin-inline: auto;
	padding: 2px;
	justify-content: center;
	max-width: 30em;
}
.search-bar input {
	background: transparent;
	border-radius: 1.5em;
	box-shadow: 0 0 0 0.4em #171717 inset;
	padding: 0.75em;
	transform: translate(0.5em,0.5em) scale(0.5);
	transform-origin: 100% 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.search-bar input::-webkit-search-decoration {
	-webkit-appearance: none;
}
.search-bar input:focus,
.search-bar input:valid {
	background: #fff;
	border-radius: 0.375em 0 0 0.375em;
	box-shadow: 0 0 0 0.1em #d9d9d9 inset;
	transform: scale(1);
}
.search-btn {
	background: var(--blue-040);
	border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
	padding: 0.75em;
	position: relative;
	transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125);
	transform-origin: 0 50%;
}
.search-btn:before, 
.search-btn:after {
	content: "";
	display: block;
	opacity: 0;
	position: absolute;
}
.search-btn:before {
	border-radius: 50%;
	box-shadow: 0 0 0 0.2em #f1f1f1 inset;
	top: 0.4em;     /* changed from 0.75 */
	left: 0.4em;    /* changed from 0.75 */
	width: 1.2em;
	height: 1.2em;
}
.search-btn:after {
	background: #f1f1f1;
	border-radius: 0 0.25em 0.25em 0;
	top: 51%;
	left: 51%;
	width: 0.75em;
	height: 0.25em;
	transform: translate(0.2em,0) rotate(45deg);
	transform-origin: 0 50%;
}
.search-btn span {
	display: inline-block;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/* Active state */
.search-bar input:focus + .search-btn,
.search-bar input:valid + .search-btn {
	background: var(--blue-040);
	border-radius: 0 0.375em 0.375em 0;
	transform: scale(1.0);
}
.search-bar input:focus + .search-btn:before, 
.search-bar input:focus + .search-btn:after,
.search-bar input:valid + .search-btn:before, 
.search-bar input:valid + .search-btn:after {
	opacity: 1;
}
.search-bar input:focus + .search-btn:hover,
.search-bar input:valid + .search-btn:hover,
.search-bar input:valid:not(:focus) + .search-btn:focus {
	background: var(--blue-040);
}
.search-bar input:focus + .search-btn:active,
.search-bar input:valid + .search-btn:active {
	transform: translateY(1px);
}

/* Custom Checkbox */
/* The container */
.chkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
  }
  
  /* Hide the browser's default checkbox */
  .chkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid black;
    border-radius: 4px;
  }
  
  /* On mouse-over, add a grey background color */
  .chkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .chkbox input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .chkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .chkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
/*
@media screen and (prefers-color-scheme: dark) {
	body, input {
		color: #f1f1f1;
	}
	body {
		background: #171717;
	}
	.search-bar input {
		box-shadow: 0 0 0 0.4em #f1f1f1 inset;
	}
	.search-bar input:focus,
	.search-bar input:valid {
		background: #3d3d3d;
		box-shadow: 0 0 0 0.1em #3d3d3d inset;
	}
	.search-btn {
		background: #f1f1f1;
	}
}
*/
/* Media Queries */
@media screen and (max-width: 640px) {

    .sponsors {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: none;
    }
    .footer-section {
        width: 40%;
    }

}