:root {
    /* color-scheme: only light !important; */
    color-scheme: light dark;
    /* Theme Colors */
    --theme-color-1: #000 !important;
    --theme-color-2: #fff !important;
    --theme-color-3: #820000 !important;
    --theme-color-4: #444 !important;
    --theme-color-5: #b00 !important;
    --theme-color-6: #ffaa00 !important; /* #ffcc00; */
    --theme-color-7: #ffcc00 !important; /* #ffee00; */

    /* Text */
    --text-color-1: var(--theme-color-2) !important; /* Header 1 */
    --text-color-2: var(--theme-color-2) !important; /* Normal Text */

    /* Links */
    --link-color-1: var(--theme-color-7) !important; /* Link Color */
    --link-color-2: var(--theme-color-7) !important; /* Link Hover Color */

    /* Navigation */
    --nav-text-color: var(--theme-color-2) !important;
    --nav-decoration-color: var(--theme-color-3) !important;
    --nav-text-color-hover: var(--theme-color-6) !important;
    --nav-decoration-color-hover: var(--theme-color-3) !important;

    /* Transparents */
    --transparent-full: rgba(0,0,0,0) !important;

    --transparent-white-01 : rgba(255,255,255,0.1) !important;
    --transparent-white-02 : rgba(255,255,255,0.2) !important;
    --transparent-white-04 : rgba(255,255,255,0.4) !important;
    --transparent-white-05 : rgba(255,255,255,0.5) !important;
    --transparent-white-06 : rgba(255,255,255,0.6) !important;
    --transparent-white-08 : rgba(255,255,255,0.8) !important;

    --transparent-black-01 : rgba(0,0,0,0.1) !important;
    --transparent-black-02 : rgba(0,0,0,0.2) !important;
    --transparent-black-06 : rgba(0,0,0,0.8) !important;
    --transparent-black-08 : rgba(0,0,0,0.8) !important;

    /* Snake */
    --snake-color-1: rgb(10, 173, 10) !important;
    --snake-color-2: #000080 !important;
    --snake-color-3: rgb(182, 11, 11) !important;
    --snake-color-4: rgb(245, 238, 220) !important;
    --snake-color-5: #0000A8 !important;

    /* Melody Of Life */
    --mol-color-1: #000 !important; /* Borders */
    --mol-color-2: #555 !important; /* Mol Cell dead */
    --mol-color-3: #666 !important; /* Mol Cell dead highlighted (every 5th row) */
    --mol-color-alive: #aaa !important; /* Cell Alive (normal, white) */
    --mol-color-alive-current: #fff !important;
    --mol-color-permanent-1: #a00 !important;
    --mol-color-permanent-2: #f00 !important;
    --mol-color-progress-1: #320000 !important;
    --mol-color-progress-2: #820000 !important;


}

@media (prefers-color-scheme: dark) {
    /* Reset default browser styles */
    html, body, nav, section, :root {
        /* color-scheme: only dark !important; */
        color-scheme: light dark;
    }
}



/* Reset default browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ul, li, nav {
    appearance: none !important;
    margin: 0  !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}

.Mobile-bar.Mobile-bar--top {
    background-color: transparent!important;
}

/* Header styles */
header {
    color: var(--text-color-1);
    text-align: center;
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    padding: 0;
    margin-bottom: 10px;
    font-size: 1.0rem;
}

/* The font size of the headers h1-h6 and <p> will be scaled depending on window size: */
h1 {
    font-size: 1.2rem;
}

.header-content-stack {
    position: relative;
    z-index: 3;
}

.header-content-stack h1 {
    position: relative;
    top: -10px;
}




/* Global styles */
body {
    line-height: 1.4;
    background-color: var(--theme-color-1);
    color: var(--text-color-2);
    padding: 0;
}

body, p, a, li, .event-date, .event-date-inner, .event-date-text, .event-name, .event-time, .event-location {
    font-family: "Space Grotesk", sans-serif;
    font-weight: bold;
}

.website-design-by {
    text-align: center;
    margin: 5px 0;
}

.learn-more {
    text-align: center;
    font-size: 1.3rem;
}

/* RCBR Logo on Top */
#RCBR_Logo {
    z-index: 2;
    width: auto;
    height: auto;
    max-height: 300px;
    max-width: 90vw;
    margin: 2px auto 10px;
    display: block;
}

#main_background {
    width: auto;
    min-height: 100%;
    z-index: -1;
    background-color: #13001c;
    background-image: url('images/main/bg.svg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#RCBR_Background_Container_Div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 clamp(12px, 5vw, 50px) 20px;
}

#RCBR_Background_Static {
    width: min(90%, 400px);
    height: auto;
    display: block;
}


.page-frame {
    --frame-overlap: clamp(32px, 8vw, 64px);
    --frame-fill-underlap: var(--frame-overlap);
    --frame-opacity: 0.8;
    --frame-body-opacity: 0.8;
    --frame-middle-inset-left: 0.24%;
    --frame-middle-inset-right: 0.24%;
    position: relative;
    z-index: 1;
    width: min(100%, 800px);
    margin: clamp(-144px, -18vw, -104px) auto 0px;
}

.page-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frame-panel {
    position: relative;
}

.frame-panel-top,
.frame-panel-bottom {
    display: block;
    width: 100%;
    height: auto;
    opacity: var(--frame-opacity);
}

.frame-panel-top {
    position: relative;
    z-index: 1;
    margin-bottom: calc(var(--frame-overlap) * -1);
}

.frame-panel-middle {
    position: relative;
    padding: auto;
    overflow: hidden;
}

.frame-panel-middle::before {
    content: "";
    position: absolute;
    top: var(--frame-fill-underlap);
    right: var(--frame-middle-inset-right);
    bottom: var(--frame-fill-underlap);
    left: var(--frame-middle-inset-left);
    background-image: url('images/main/middle.svg');
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
    opacity: var(--frame-body-opacity);
    pointer-events: none;
}

.frame-panel-middle > * {
    position: relative;
    z-index: 2;
}

.frame-panel-bottom {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--frame-overlap) * -1);
}




.spacer {
    height: 30px;
    width: 100%;
}



/* Navigation List styles */

nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

nav ul {
    list-style-type: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: min(100%, 340px);
    padding: 12px 0;
    background: var(--transparent-black-06);
    border: 1px solid var(--transparent-white-04);
    border-radius: 18px;
    box-sizing: border-box;
}

nav.nav-open ul {
    display: flex;
}


nav ul li {
    display: inline;
    width: 100%;
    margin: 0;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;

}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 44px;
    padding: 0 2px;
    border: 1px solid var(--transparent-white-04);
    border-radius: 16px;
    background: var(--transparent-black-06);
    color: var(--nav-text-color);
    cursor: pointer;
}

.nav-toggle-text {
    display: inline-block;
    transform: rotate(90deg);
    font-family: "Bungee", sans-serif;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 1px;
}

nav ul li a,
nav ul li a:visited,
nav ul li a:active  {
    display: block;
    padding: 1px 12px;
    color: var(--nav-text-color);
    text-decoration: underline;
    text-decoration-color: var(--nav-decoration-color);
}

nav ul li a:hover {
    color: var(--nav-text-color-hover);
    text-decoration: underline;
    text-decoration-color: var(--nav-decoration-color-hover);
}

.home-page nav ul li a,
.home-page nav ul li a:visited,
.home-page nav ul li a:active {
    white-space: nowrap;
}

#social-media-icons-top {
    position: relative;
    top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 0px 20px;
    background: var(--transparent-black-06);
    border: 1px solid var(--transparent-white-04);
    border-radius: 18px;
    box-sizing: border-box;
}

#social-media-icons-top {
    height: auto;
    min-height: 40px;
}

/* Main content styles */
main {
    width: min(100%, 800px);
    margin: 0 auto;
    padding: 0 10px;
    background: transparent;
    border: 0;
    box-sizing: border-box;
}

section {
    margin: 10px 10px 50px 10px;
    text-align: center;
    padding: 0 clamp(12px, 5vw, 50px);
}

#events > a,
#events > a img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

#events img {
    width: 80%;
    height: auto;
}

#youtube-reports iframe {
    display: block;
    width: min(100%, 480px);
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 auto;
}


/* Link styles */
a {
    color: var(--link-color-1);
    text-decoration: none;
}

a:hover {
    color: var(--link-color-2);
    text-decoration: underline;
}

/* List styles */
.ul {
    list-style-type: none;
}

li {
    margin-bottom: 10px;
}




/* Table styles for Events */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
}

#events-tbody th, td {
    padding: 4px;
    text-align: left;
}

#events-tbody tr {
    border: 1px solid var(--transparent-full);
}

#events-tbody tr:nth-of-type(4n-1) {
    background: var(--transparent-white-02);
}

#events-tbody tr:nth-of-type(4n) {
    background: var(--transparent-white-02);
}

#events-tbody tr:nth-of-type(2n) {
    border-top: 1px solid var(--transparent-white-05);
    border-bottom: 1px solid var(--transparent-white-05);
}

#events-tbody tr:nth-of-type(2n-1):hover {
    border-left: 1px solid var(--transparent-white-05);
    border-right: 1px solid var(--transparent-white-05);
}

#events-tbody tr:nth-of-type(2n-1):hover + tr {
    border-left: 1px solid var(--transparent-white-05);
    border-right: 1px solid var(--transparent-white-05);
}




.event-location {
    font-size: 0.9rem;
    border-bottom: 10px;
}

.event-small-fontsize {
    font-size: 0.5rem;
}


/* Band styles */

.all-bands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.all-bands img {
    height: 150px;
    width: auto;
    border: 2px solid var(--transparent-full);
}

.all-bands img:hover {
    border: 2px solid var(--theme-color-6);
}


.all-bands a {
    color: var(--text-color-2);
    text-decoration: none;
}
.all-bands a:hover {
    color: var(--link-color-2);
    text-decoration: none;
}

.single-band {
    max-height: 180px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
}



/* About Us styles */

#about ul {
    list-style-position: inside;
    padding-left: 0;
    margin: 0 auto 16px;
    text-align: center;
}




/* Flyer styles */

.gallery-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.all-flyer-images {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
    gap: 10px;
    /* width: 80vh; */
    overflow-x: hidden;
}

.flyer-image {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 120px;
    width: auto;
    transition: opacity 0.5s ease;

}

.flyer-image img {
    height: 100px;
}

.flyer-prev-button {
    opacity: 0;
    visibility: hidden;
    display: none;
}

.flyer-next-button, .flyer-prev-button {
    font-size: 1.5rem;
    background-color: var(--transparent-white-02);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 30px;
    height: 50px;

    border: 1px solid var(--theme-color-2);
    border-radius: 4px;
    cursor: pointer;
    color: var(--theme-color-2);
    margin: auto 10px;
}


.flyer-next-button:hover , .flyer-prev-button:hover {
    background-color: var(--transparent-white-05);
}




/* Contact CTA */
.contact-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.contact-cta-title {
    font-family: "Bungee", sans-serif;
    font-size: 1.1rem;
    text-align: center;
}

.contact-cta-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: min(100%, 440px);
}

.contact-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 180px;
    min-height: 72px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 2px solid var(--theme-color-1);
    background-color: var(--theme-color-3);
    color: var(--theme-color-2);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-cta-link:hover {
    background-color: var(--theme-color-5);
    transform: translateY(-2px);
}

.contact-cta-link:active {
    transform: translateY(0);
}

.contact-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.contact-cta-icon img {
    width: auto;
    height: 30px;
}

.contact-cta-icon-email {
    border-radius: 999px;
    border: 2px solid var(--theme-color-2);
    font-family: "Bungee", sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.contact-cta-label {
    font-family: "Bungee", sans-serif;
    font-size: 1.05rem;
    line-height: 1.2;
}




/* General CSS Sytles for Collections*/
.collections {
    display: flex;
}

.collection-all-letters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.collection-item-single-letter {
    font-size: 1.4rem;
}

.collection-item {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.collection-images-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 50px;
}

.collection-format-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

.collection-format-subtitle {
    font-size: 1rem;
    margin: 10px 0 5px 0;
}

.collection-letters-button {
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
}






/* General CSS Sytles for Games*/
.game-author-credits {
    margin-top: 10px;
    visibility: visible;
}

#games_overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#games_overview div {
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--theme-color-3);
}

#games_overview div a img {
    width: 100%;
    height: auto;
}



/* CSS styles for snake game canvas */
.snake-game {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}



#game-area {
	margin:10px;
	padding: 0 0 5px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--theme-color-3);
}

#game-area:focus { outline: none; }


.snake-panel-component {
    position: absolute;
    font-family: Verdana, arial, helvetica, sans-serif;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px;
    margin: 0px;
}

#snake-score-board {
    justify-content: center;
    align-items: end;
    bottom: -3px;
    left: 3px;

}

#snake-highscore-div {
    justify-content: center;
    align-items: end;
    bottom: -3px;
    right: 3px;
}

#snake-snakehead-alive {
    background-image: url('./images/snake_images/green-head-snakeblock.png');
    margin: 0px;
    padding: 0px;
    background-color: var(--snake-color-1);
    position: absolute;
    border: 0px solid var(--snake-color-2);
    background-repeat: no-repeat;
    border-radius: 4px;
}

.snake-snakebody-block {
    margin: 0px;
    padding: 0px;
    background-color: var(--red);
    position: absolute;
    border: 0px solid ;
    background-repeat: no-repeat;
}

.snake-snakebody-alive {
   background-image: url('./images/snake_images/green-body-snakeblock.png'), url('./images/snake_images/green-body-snakeblock.png');
}
.snake-snakebody-dead {
   background-image: url('./images/snake_images/deadblock.png'), url('./images/snake_images/deadblock.png');
}

.snake-food-block {
    margin: 0px;
    padding: 0px;
    background-color: var(--snake-color-3);
    border: 0px solid var(--snake-color-2);
    position: absolute;
    border-radius: 6px;
}

.snake-playing-field {
    margin: 0px;
    padding: 0px;
    position: absolute;
    background-color: var(--snake-color-4);
    border: 0px solid var(--snake-color-5);
}

.snake-game-container {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    border-style: none;
    zoom: 1;
    position: relative;
}

.snake-pause-screen, .snake-try-again-dialog, .snake-win-dialog, .snake-welcome-dialog {
    font-family: Verdana, arial, helvetica, sans-serif;
    font-size: 0.9rem;
    text-align: center;
    position: absolute;
    background-color: var(--theme-color-1);
    color: var(--theme-color-2);

    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: auto;
    max-width:300px;
    min-height: 80px;

}

.snake-try-again-dialog, .snake-win-dialog, .snake-pause-screen {
    display: none;
}



/* Footer styles */
footer {
    background-color: var(--theme-color-1);
    height: 40px;
    display: flex;
    flex-direction: row;
    z-index: 1500;
    /* text-align: center; */
    align-items: center;
    justify-content: center;

    position: fixed;
    width: 100%; /* Adjust footer width to account for border */
    bottom: 0px;
    border-top: 1px solid var(--theme-color-4);
    padding-right: 56px;
    box-sizing: border-box;
    position: fixed;
}


.social-media-icons {
    display: flex;
    visibility: visible;
    height: 40px;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.social-media-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-media-icons img {
    width: auto; /* Adjust the size of the social media icons */
    height: 30px; /* Maintain aspect ratio */
}

.social-media-icons img:hover {
    width: auto; /* Adjust the size of the social media icons */
    height: 35px; /* Maintain aspect ratio */
}

#backToTopDiv {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

#backToTopButton {
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    cursor: pointer;
    background-color: var(--transparent-full);
    background-image: url('./images/main/arrow-up-filled-white.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
    width: 30px;
    height: 30px;
    display: block;
    visibility: visible;

    /* Mobile Settings, will be displayed if screen wide enough: */
    /* See Script header_and_footer.js */

    /* display: none;
    visibility: hidden;
    width: 0px;
    height: 0px;
    background-size: 0px; */

}

#backToTopButton:hover {
    background-size: 35px;
}





/* Space Invaders CSS */


.space-invader-game {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#space-invader-game-canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 80%;
    width: 80%;
    border: 1px solid var(--theme-color-3);
}


#space-invader-game-canvas canvas {
    display: block;
    margin: auto;
    position :absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

#space-invader-shoot-button {
    width: max(70%,50px);
    height: 50px;
    margin: 10px 0;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    color: var(--theme-color-2);
    background-color: var(--theme-color-3);

}


#space-invader-shoot-button:active {
    background-color: var(--theme-color-5);
}








/* Melody Of Life */
/* keep the empty css styles in here */

.mol-content {
    text-align: center;
    flex: 1;
    padding: 10px;
    border: 1px solid var(--theme-color-3);
}

.mol-button {
    margin: 0.8em;
    min-width: 100px;
    padding: 0.5em 1.0em;
}

.mol-container {
    margin: 0;
    height: 100%;
    /* background: #17191c; */
    display: flex;
    flex-direction: column;
}

.mol-grid {
    margin: auto;
    border-spacing: 0;
}

.mol-cell {
    margin: 0;
    padding: 0;
    border: solid 1px var(--mol-color-1);
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--mol-color-2);
    border-radius: 3px;
}

.mol-cell-progress {
    margin: 0;
    padding: 0;
    border: solid 1px var(--mol-color-1);
    width: auto;
    height: 10px;
    transition: all 0.25s;
    background: var(--mol-color-progress-1);
    border-radius: 1px;
}

.mol-cell-progress.active {
    background: var(--mol-color-progress-2);
}

.mol-row {
    /* keep the empty css styles in here */
}

.mol-cell:hover {
    /* keep the empty css styles in here */
}

.mol-cell.current {
    /* keep the empty css styles in here */
}

.mol-cell.alive {
    background: var(--mol-color-alive);
}

.mol-cell.permanent, .mol-cell.alive.permanent {
    background: var(--mol-color-permanent-1);
}

.mol-cell.alive.current {
    background: var(--mol-color-alive-current);
    box-shadow: 0px 0px 100px var(--mol-color-alive-current);
    z-index: 1;
}

.mol-cell.current.alive.permanent {
    background: var(--mol-color-permanent-2);
}


/* every 5-th note is an octave (pentatonic) (0, 5, 10, 15, ...) */
.mol-row:nth-of-type(5n+1) .mol-cell {
    background: var(--mol-color-3);
}

.mol-row:nth-of-type(5n+1) .mol-cell:hover {
    /* keep the empty css styles in here */
}

.mol-row:nth-of-type(5n+1) .mol-cell.alive {
    background: var(--mol-color-alive);
}

.mol-row:nth-of-type(5n+1) .mol-cell.current {
    /* keep the empty css styles in here */
}

.mol-row:nth-of-type(5n+1) .mol-cell.alive.permanent {
    background:  var(--mol-color-permanent-1);
}

.mol-row:nth-of-type(5n+1) .mol-cell.alive.current {
    background:  var( --mol-color-alive-current);
    box-shadow: 0px 0px 100px var( --mol-color-alive-current);
    z-index: 1;
}

.mol-row:nth-of-type(5n+1) .mol-cell.alive.current.permanent {
    background:  var(--mol-color-permanent-2);
    box-shadow: 0px 0px 100px var( --mol-color-alive-current);
    z-index: 1;
}




/* Media / Smartphone / Tablet Section */

/* References : Idea is to start with mobile version, and then use min-width to add items if screen gets bigger.*/
@media screen and (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media screen and (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media screen and (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media screen and (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media screen and (min-width:1281px) { /* hi-res laptops and desktops */ }
@media screen and (orientation:portrait) { /* vertical */ }
@media screen and (orientation:landscape) { /* horizontal */ }

@media screen and (max-device-width:480px) {
/* This code would apply if the max-device-width is 480px (eg. iPhone display).
Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
See: https://webdesignerwall.com/tutorials/css3-media-queries
And: https://blisk.io/devices/details/galaxy-s22
*/
}

@media screen and (max-width: 960px) {
    .home-page .page-frame {
        margin-top: -30px; /* This ensures some gap at the top of the page */
    }
}

@media screen and (max-width: 480px) {
}

@media screen and (min-width: 320px) {
    h1 {
        font-size: 1.6rem  !important;
    }
    h2 {
        font-size: 1.4rem;
    }
    p {
        font-size: 1rem;
    }

    .home-page nav {
        margin-bottom: 32px;
    }
}

@media screen and (min-width: 481px) {
    h1 {
        font-size: 1.9rem  !important;
    }
    h2 {
        font-size: 1.6rem;
    }
    h3, h4, h5, h6, p {
        font-size: 1.1rem;
    }

    .flyer-image {
        height: 200px;
    }

    .flyer-image img {
        height: 180px;
    }


}
@media screen and (min-width: 641px) {
    h1 {
        font-size: 2.2rem  !important;
    }
    h2 {
        font-size: 1.8rem;
    }
    h3, h4, h5, h6, p {
        font-size: 1.2rem;
    }

    .mol-cell {
        width: 25px;
        height: 25px;
    }
}

@media screen and (min-width: 961px) {
    .nav-toggle {
        display: none;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        width: auto;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    nav ul li {
        width: auto;
    }

    nav ul li a,
    nav ul li a:visited,
    nav ul li a:active {
        padding: 0;
    }

    .home-page nav ul {
        gap: 12px;
    }

    .home-page nav ul li a,
    .home-page nav ul li a:visited,
    .home-page nav ul li a:active,
    .home-page nav ul li a:hover {
        text-decoration: none;
    }

    h1 {
        font-size: 2.5rem  !important;
    }
    h2 {
        font-size: 2rem;
    }
    h3, h4, h5, h6, p {
        font-size: 1.3rem;
    }
    nav ul li {
        font-size: 1rem;
    }

    .mol-cell {
        width: 30px;
        height: 30px;
    }
}

@media screen and (min-width: 1281px) {
    .home-page nav ul {
        gap: 12px;
    }

    .home-page nav ul li {
        font-size: 1rem;
    }
}