@import url("https://assets.mlcdn.com/fonts.css?version=1761822");

/* ===== START - global variables and page-wide settings ===== */

:root {   /* GLOBAL VARIABLES - common colors plus text, borders, image, etc */
    --layout-container-max: 760px;
    /* theme colors shared by both color schemes */
    --color-bg1: #222; /* outer bg */
    --color-border: #DDDDDD;
    --color-border-2: #666666;
    --color-bg-marquee: transparent;
    --color-text-tagline: #FFFFFF;
    --color-text-marquee: #77FF00;
    --color-steam-widget-bg: #424c5c;   /* matches border of Steam Widget so we can put our own ugly border around it */
    --ml-button-bg: #e0e0e0;
    --ml-button-bg-hover: #d0d0d0;
    --ml-button-border: #000000;
    --ml-button-border-hover: #000000;
    /* colors for fake hit counter */
    --hc-digit-w: 1.5rem;
    --hc-digit-h: 2rem;
    --hc-gap: .125rem;
    --hc-bezel-light: #DDDDDD;
    --hc-bezel-mid: #9b9b9b;
    --hc-bezel-dark: #6a6a6a;
    --hc-well: #000;          /* digit bg */
    --hc-digit: #77FF00;      /* digit text */
    --hc-digit-dim: #afff6a;  /* glow color */
    --hc-radius: .25rem;
    --hc-bevel: inset 0 .08rem .12rem rgba(255, 255, 255, 0.35),
                inset 0 -.08rem .12rem rgba(0,0,0,.6),
                0 .04rem .08rem rgba(0,0,0,.35);
    --hc-glow: 0 0 1px var(--hc-digit),
            0 0 2px var(--hc-digit),
            0 0 4px var(--hc-digit-dim);
    /* font variables */
    --font-size-min: 1rem;
    --font-size-max: 1.0625rem;
    --font-size-fluid: calc(1rem + 0.15vw);
    --font-size-body: clamp(var(--font-size-min), var(--font-size-fluid), var(--font-size-max));
    --font-size-h1: clamp(1.6rem, calc(var(--font-size-body) * 1.8), 2.25rem);
    --font-size-h2: clamp(1.3rem, calc(var(--font-size-body) * 1.4), 1.75rem);
    --font-size-h3: clamp(1.1rem, calc(var(--font-size-body) * 1.2), 1.5rem);
    --font-bold: 700;
    --font-line-height: 1.5;
    --font-line-height-heading: 1.25;
    --font-face-body: "Times New Roman", Arial, system-ui, sans-serif;
    --font-face-body-alt: Arial, sans-serif;
    --font-face-heading: "Bungee Inline", Arial, system-ui, sans-serif;
    --font-face-mono: "Courier New", ui-monospace, monospace;
    --font-face-deco: "Black Ops One", Arial, sans-serif;
    /* border and spacing variables */
    --border-width: 0.3rem;
    --border-style: ridge;
    --button-border-radius: 0.175rem;
    --space-sm: 0.25rem;
    --space-md: 0.5rem;
    --space-lg: 0.75rem;
    --space-xl: 1rem;
    --space-xxl: 2rem;
    --radius-sm: 0.25rem;
    /* image size variables */
    --img-max-height: 4rem;
    --img-min-height: 2rem;
    --img-deco-max-size: 1.5rem;
    --img-deco-min-height: .75rem;
    --bwg-logo-size: clamp(8rem, 8vw, 10rem);
    --rm-logo-size: clamp(200px, 55vw, 400px);
    --branding-img-min-size: 29px;    /* matches minimum img size requirement for logo use */
    --branding-img-min-space: 15px;    /* matches minimum space required for IG and Reddit logo use */
    /* animation variables */
    --anim-speed-fast: 1s;
    --anim-speed-normal: 1.5s;
    --anim-speed-slow: 3s;
    --anim-speed-slower: 4s;
    --anim-ease: ease-in-out;
}
/* ===== END - global variables and page-wide settings ===== */


/* ===== START - color scheme variables ===== */

@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {    /* DARK COLOR SCHEME VARIABLES - light text on dark bg */
    :root {
        --color-bg2: #222;
        --color-bg-nav: var(--color-bg2);
        --color-text: #EEE;
        --color-link: #FFFF00;
        --color-link-visited: #FF99FF;
        --color-link-hover: #66FFFF;
        --color-link-active: #FF0000;
        --color-accent-fire: #FFBB00;
        --color-glow-fire: 0 0 0.5px #ffae00, 0 0 3px #ff6a00, 0 0 10px #ff3300, 0 0 20px #ff0000;
        --color-crt-mode: rgba(0,0,0,0.02);  /* available in case this needs to be set differently by color scheme */
        --color-steam-button-text: #1C1C1C;
        --color-steam-button-text-active: #424242;
        --color-steam-button: #8ed629;
        --color-steam-button-active: #D2EFA9;        
        --color-steam-button-border: #424242;
    }
}

@media (prefers-color-scheme: light) {    /* LIGHT COLOR SCHEME VARIABLES - dark text on light bg */
    :root {
        --color-bg2: #D6D6D6;
        --color-bg-nav: var(--color-bg2);
        --color-text: #222;
        --color-link: #0000CC;
        --color-link-visited: #660099;
        --color-link-hover: #004400;
        --color-link-active: #800033;
        --color-accent-fire: #800000;
        --color-glow-fire: 0 0 0.5px #cc0000, 0 0 3px #ff6a00, 0 0 10px #ff9966, 0 0 20px #ffcc99;
        --color-crt-mode: rgba(0,0,0,0.01); /* available in case this needs to be set differently by color scheme */
        --color-steam-button-text: #000000;
        --color-steam-button-text-active: #F2F2F2;
        --color-steam-button: #8AD62E;
        --color-steam-button-active: #3A5912;
        --color-steam-button-border: #F2F2F2;
    }
}

/* ===== END - page color scheme variables ===== */


html, body {    /* overall page appearance */
    max-width: 100%;
    overflow-x: hidden;
}

html {    /* overall page appearance */
    background-color: var(--color-bg1);
    background-image: url("maze-tile.gif");
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
    image-rendering: pixelated;        
    scroll-behavior: smooth;
}

body {
    padding: var(--space-md);
    line-height: var(--font-line-height);
    color: var(--color-text);
    font-family: var(--font-face-body);
    font-size: var(--font-size-body);
}

.container {    /* additional layout params for full page */
    max-width: var(--layout-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-xl);
}

header, section, footer {
    display: flex;
    flex-direction: column;
    margin: var(--space-md); 
}

aside {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--color-bg-marquee);
    text-align: center;
    align-items: center;
    padding: var(--space-sm) 0;
}

nav {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-nav);
    border-color: var(--color-border);
}

main {
    background-color: transparent;
    color: var(--color-text);
}

section, footer {
    padding: var(--space-xl);
    border: var(--border-width) var(--border-style) var(--color-border);
    background-color: var(--color-bg2);
}

footer {
    text-align: center;
    align-items: center;
    margin: var(--space-md); 
}

h1 { 
    font-size: var(--font-size-h1);
}

h2 { 
    font-size: var(--font-size-h2);
}

h3 { 
    font-size: var(--font-size-h3);
}

h1, h2 {
    color: var(--color-text);
    line-height: var(--font-line-height-heading);
    text-transform: uppercase;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
}

a { color: var(--color-link); }

a:visited { color: var(--color-link-visited); }

a:active { color: var(--color-link-active); }

ul { 
    padding-left: calc(var(--space-xl) * 1.5);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== END - global variables and page-wide settings ===== */


/* ===== START header section ===== */

.game-branding {
    text-align: center;
    align-items: center;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    border: var(--border-width) var(--border-style) var(--color-border);
    /* background-color: var(--color-bg2); */
    background: #00633A;
    background: radial-gradient(circle, rgba(0, 99, 58, 1) 0%, rgba(35, 31, 23, 1) 100%);
}

.game-branding img {
    width: var(--rm-logo-size);
    height: auto;
    image-rendering: auto;
    margin: clamp(0.75rem, 5%, 3rem); /* top and bottom spacing */
    margin-inline: var(--space-lg); /* side spacing */
}

.tagline {    
    font-size: calc(var(--font-size-body) * 1.05);
    line-height: var(--font-line-height-heading);
    font-weight: var(--font-bold);
    color: var(--color-text-tagline);
    font-style: italic;
    text-wrap: balance;
    margin-top: 0;
}

/* ----- marquee - start -> ----- */

    .marquee-container {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        flex-wrap: nowrap;
        font-weight: var(--font-bold);
        font-family: var(--font-face-mono);
        background-color: var(--color-bg-marquee);
    }

    .marquee-scroll {
        display: flex;
        width: calc(100% - 1rem);
        overflow: hidden;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .marquee-track {
        display: inline-flex;
        align-items: center;
        gap: var(--space-lg);
        flex-shrink: 0;
        color: var(--color-text-marquee);
        width: max-content;
        overflow-wrap: break-word;
        word-break: break-word; 
    }

    .marquee-track img {
        width: clamp( 2em, 5vw, 6em );
        height: auto;
        flex-shrink: 0;
        object-fit: contain;
        vertical-align: middle;
        padding: 0 var(--space-sm);
    }

/* ----- <- end - marquee ----- */

/* --- nav bar - start -> --- */

    .nav-bar {
        border: 0;
        padding: 0;
    }

    .nav-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-transform: uppercase;
        text-underline-offset: var(--space-sm);
        border: var(--border-width) var(--border-style) var(--color-border);
    }
        
    .nav-items li {
        flex: 1 0 auto;
        min-width: 0;
        text-align: center;
        align-content: center;
        margin: 0;
        padding: var(--space-md);
        border-right: var(--border-width) var(--border-style) var(--color-border);
        border-bottom: none;
        border-top: none;
        border-left: none;
        font-size: calc(var(--font-size-body)* 0.8);
        font-weight: var(--font-bold);
    }

    .nav-items li:last-child {
        border-right: none;
    }

/* --- <- end - nav bar --- */

/* ===== END header region ===== */


/* ===== START main region ===== */

.mirrored {
    transform: scaleX(-1);
}

.divider {
    border: none;
    border-top: var(--border-width) var(--border-style) var(--color-border);
    margin: calc(var(--space-xl) * 2) 0;
} 

.img-deco {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(var(--space-xl) * 1.5);
    overflow: hidden;
    margin: var(--space-xxl);
}

.img-deco img {
    flex: 1 1 80px; /* grow/shrink with min size */
    max-width: var(--img-deco-max-size);
}

.img-deco img:nth-child(odd) { /* alternates mirrored images */
    transform: scaleX(-1);
}

.hide-small, .hide-tiny {
    display: flex;
}

/* --- steam widget -> --- */

    .steam-widget {
        display: flex;
        justify-content: center;
        margin: var(--space-xxl) 0;
        padding: var(--space-lg);
        border: var(--border-width) var(--border-style) var(--color-border);
        background-color: var(--color-steam-widget-bg);
    }

    .steam-widget iframe {
        border: none;
        width: 700px;
        max-width: 100%;
        height: 190px;
        background-color: var(--color-steam-widget-bg);
    }

    .steam-button { display: none; }

/* --- <- end - steam widget --- */

/* --- bwg team info layout - start -> --- */

    #team {
        padding-left: 0;
        padding-right: 0;
        border: 0;
        background-color: transparent;
    }

    .team-grid {
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 0;
        margin: 0;
        padding: 0;
        line-height: calc(var(--font-line-height) * .9);
        background-color: var(--color-bg2);
        border: var(--border-width) var(--border-style) var(--color-border);
    }

    .team-grid > .header-card {
      border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .team-grid > .person-card, .team-grid > .empty-card {
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .team-grid > .person-card.first-col, .team-grid > .empty-card.first-col {
       border-right: var(--border-width) var(--border-style) var(--color-border);
    }
    .team-grid > .music-card {
       border-bottom: 0;
    }

    .header-card {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        flex-wrap: wrap;
        padding-top: var(--space-xl);
    }

    .header-card img {
        width: clamp(120px, 40vw, 200px);
        object-fit: contain;
        border: 0;
        vertical-align: middle;
        align-items: center;
    }

    .person-card {
        display: flex;
        align-items: flex-start;
        gap: var(--space-md);
        background-color: var(--color-bg2);
        padding: var(--space-md);
        margin: 0;
    }

    .person-card img {
        width: clamp(80px, 30%, 125px);
        max-width: 125px;
        height: auto;
        object-fit: cover;
        margin: var(--space-sm);
        border: 1px solid var(--color-border-2);
        vertical-align: top;
    }

    .person-card-info {
        flex: 1;
        vertical-align: top;
        padding: 0;
        margin-right: var(--space-sm);
    }

    .person-card h3 { 
        margin: 0;
    }
    
    .person-card p { 
        margin-top: var(--space-sm);
        margin-bottom: var(--space-md);
        padding-right: var(--space-sm);
    }

    .music-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        gap: calc(var(--space-sm) * .5);
        grid-column: 1 / -1;
    }

    .music-team {
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: var(--space-sm);
        flex-wrap: wrap;
        margin-bottom: var(--space-sm);
    }

    .music-card h3, .music-card p { 
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .music-card img {
        object-fit: cover;
        border: 1px solid var(--color-border-2);
    }

    .empty-card {
        display: flex;
    }

/* --- <- end - bwg team info layout --- */

.socials {
    list-style: none;
    padding: 0;
    margin: 0;
}

.socials li {
    padding: var(--space-md);
}

.socials img {
    width: var(--branding-img-min-size);
    vertical-align: middle;
    margin-right: var(--branding-img-min-space);
}

.retro-web {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxl); 
    margin-top: var(--space-xxl);
}

.guestbook-banner, .construction-banner, .visitor-banner, .noscript-message {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: min(90%, 40rem);
    margin-left: auto;
    margin-right: auto;
    gap: var(--branding-img-min-space);
    padding: var(--space-sm) 0;
    font-family: var(--font-face-body-alt);
}

.guestbook-banner > *, .construction-banner > *, .visitor-banner > * {
    margin: 0;
}

.guestbook-banner {
    font-size: calc(var(--font-size-body) * 1.2);
    font-weight: var(--font-bold);
}

.noscript-message {
    font-weight: normal;
}

.guestbook-banner img {
    max-height: calc(var(--branding-img-min-size) * 1.05); 
    min-height: var(--branding-img-min-size); 
    /* padding-inline: var(--branding-img-min-space); */
    height: auto;
    width: auto;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
}

.construction-banner img {
    max-height: var(--img-max-height);
    min-height: var(--img-min-height); 
    height: auto;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    padding-inline: calc(var(--space-sm) * 1.1);
}

.fire-effect {
    display: inline-block; /* shrink-wraps content */
    flex: 0 0 auto; 
    width: fit-content;
    white-space: normal;   /* allows wrapping */
    color: var(--color-accent-fire);
    font-family: var(--font-face-deco);
    text-transform: uppercase;
    text-shadow: var(--color-glow-fire);
    letter-spacing: 0.05em;
}

.visitor-banner {
    font-family: var(--font-face-body-alt);
    letter-spacing: 0.02em;
    font-size: calc(var(--font-size-body) * .975);
    font-weight: var(--font-bold);
}

/* --- hit counter - start -> --- */
    .hit-counter {
        display: inline-flex;
        gap: var(--hc-gap);
        padding: calc(var(--hc-gap) * 1.4);
        border-radius: var(--hc-radius);
        background:
            linear-gradient(180deg,
            var(--hc-bezel-light) 0%,
            var(--hc-bezel-mid) 40%,
            var(--hc-bezel-dark) 100%);
        border: 2px solid #666;
        box-shadow:
            inset 0 .12rem .18rem rgba(255, 255, 255, .35),
            inset 0 -.15rem .2rem rgba(0, 0, 0, .45),
            0 .2rem .6rem rgba(0, 0, 0, .4);
    }

    .hit-counter .digit {
        display: inline-grid;
        place-items: center;
        width: var(--hc-digit-w);
        height: var(--hc-digit-h);
        border-radius: .125rem;
        background:
            radial-gradient(120% 100% at 50% 15%, #0a0a0a 0%, #000 70%),
            #000;
        color: var(--hc-digit);
        font: 600 calc(var(--hc-digit-h) * .85) var(--font-face-mono);
        line-height: 1;
        letter-spacing: 0.02em;
        text-shadow: var(--hc-glow);
        box-shadow: var(--hc-bevel);
        border: 1px solid #333;
    }
/* --- <- end - hit counter --- */

/* ===== END main region ===== */


/* ===== START footer region ===== */

.developer, .dev-links {
    font-size: calc(var(--font-size-body) * 0.9);
    text-align: center;
    border: 0;
}

.developer img {
    width: var(--bwg-logo-size);
    height: auto;
    margin: var(--space-lg) 0 0 0;
    image-rendering: auto;
}

.developer p, .dev-links ul {
    margin: 0;
    padding: 0;
}

.dev-links ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.dev-links li {
    white-space: normal;
}

.dev-links li::after {
    content: "|";
    margin-left: var(--space-md);
}

.dev-links li:last-child::after {
    content: "";
}

.dev-links a {
    white-space: normal;
    word-break: break-word; 
    text-align: center; 
}

/* ===== END footer ===== */


/* ===== START responsive display behavior ===== */

@media (max-width: 768px) {    /* optimized for tablet layout */
    .img-deco {
    gap: var(--space-xl);
    margin: var(--space-xxl);
    }
    .hide-small { display: none; }
}

@media (max-width: 750px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-grid > * {
        border-top: 0;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        border-left: 0;
        border-right: 0;
    }
    .team-grid > .person-card.first-col, .team-grid > .empty-card.first-col {
        border-right: 0;
    }
    .person-card { 
        padding: calc(var(--space-md) * .08);
    }
    .empty-card {
        display: none;
    }
}

@media (max-width: 640px) and (min-width: 481px) { /* nav bar fix for 2 rows on narrower displays */
    .nav-items {
        flex-wrap: wrap;
        justify-content: center;
        border: var(--border-width) var(--border-style) var(--color-border);
    }
    .nav-items li {
        flex: 0 1 33.3333%;
        box-sizing: border-box;
        border-right: var(--border-width) var(--border-style) var(--color-border);
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
        border-top: none;
        border-left: none;
    }
    .nav-items li:nth-child(3), .nav-items li:nth-child(6) { border-right: none; }
    .nav-items li:nth-child(4), .nav-items li:nth-child(5), .nav-items li:nth-child(6) { border-bottom: none; }
}

@media (max-width: 480px) {    /* optimized for mobile layout */
    :root {
        --font-size-h1: clamp(
            calc(var(--font-size-body) * 1.4),
            calc(var(--font-size-body) * 1.6),
            calc(var(--font-size-body) * 1.9)
        );
        --font-size-h2: clamp(
            calc(var(--font-size-body) * 1.2),
            calc(var(--font-size-body) * 1.3),
            calc(var(--font-size-body) * 1.5)
        );
    }

    body { 
        padding: var(--space-sm); 
        line-height: calc(var(--font-size-body) * 1.6); /* adds spacing for readability on smaller screens */
    }

    .container {
        padding: var(--space-md);
    }

    header, section, footer  {
        margin: var(--space-sm);
    }

    section, footer {
        padding: var(--space-md);
        border-width: calc(var(--border-width) * .75); /* narrower ridge border */
    }

    aside {
        padding: calc(var(--space-sm) * .5) 0;
    }

    h1, h2 { 
        line-height: calc(var(--font-line-height-heading) * 1.1); 
    }

    .game-branding {
        padding-top: var(--space-md);
        padding-bottom: var(--space-sm);
        border-width: calc(var(--border-width) * .75);
    }

    .tagline { 
        font-size: calc(var(--font-size-body) * .9);
        line-height: calc(var(--font-line-height-heading) * 1.1);
    }

    .nav-items { /* switches to one column for narrow layouts */
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        border: var(--border-width) var(--border-style) var(--color-border);
    }

    .nav-items li {
        padding: var(--space-sm);
        border-width: calc(var(--border-width) * .75);
        font-size: calc(var(--font-size-body) * 0.85);
        border-right: none;
        border-bottom: var(--border-width) var(--border-style) var(--color-border);
    }

    .nav-items li:last-child { border-bottom: none; }
    
    .marquee-scroll img { width: clamp(3em, 10vw, 6em); }
    
    .hide-tiny { display: none; }
    
    .steam-widget { display: none; }    /* hides steam widget when display is too small for proper display */
    
    .steam-button {   /* adds a button when the steam widget is hidden */
        display: block;
        background-color: var(--color-steam-button);
        color: var(--color-steam-button-text);
        text-decoration: none;
        padding: calc(var(--space-sm) * .75) var(--space-xxl);
        border: var(--color-steam-button-text) 1px solid;
        border-radius: var(--button-border-radius);
        text-align: center;
        width: fit-content;
        margin: var(--space-xxl) auto;
        font-family: var(--font-face-body-alt);
    }
    
    .steam-button:hover,  .steam-button:focus-visible {
        background-color: var(--color-steam-button-active);
        color: var(--color-steam-button-text-active);
        outline: 2px solid var(--color-link); /* visibility on keyboard focus */
        outline-offset: 2px;
    }

    .header-card img { width: 120px; }
    
    /* .guestbook-banner, .construction-banner, .visitor-banner { flex-wrap: wrap; } */
}

@media (max-width: 360px) {    /* for accessibility per WCAG 2.2 - resize minimum of 1280px zoomed in 400% or 320px at 100% */
    :root {
    --font-size-body: 1rem;
    --font-size-h1: 1.3rem;
    --font-size-h2: 1.15rem;
    }

    html {
    background-image: none;
    }

    body {
    padding: 0; 
    }

    .container {
    padding: var(--space-sm);
    }

    section, footer {    /* less spacing */
    padding-inline: var(--space-md);
    }

    .img-deco {
    display: none;
    }

    .construction-banner, .visitor-banner {    /* smaller b/c these are purely stylistic */
    font-size: calc(var(--font-size-min) * 0.8);
    }

    .construction-banner img, .visitor-banner img {     /* smaller b/c these are purely stylistic */
    max-height: var(--img-min-height); 
    min-height: calc(var(--img-min-height) * 0.8); 
    }
}

/* ===== END responsive display behavior ===== */

/* ===== START visual effects and accessibility tweaks ===== */

.sr-only {    /* adds hidden text for screen readers only */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {    /* adds link to skip to main content for keyboard users */
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
    z-index: 100;
    transform: translateY(-200%);
    transition: transform 0.2s;
}

.skip-link:focus {
    transform: translateY(0);
}

@media (prefers-contrast: no-preference) and (prefers-reduced-transparency: no-preference) and (prefers-reduced-motion: no-preference) {    /* adds crt styling */
    body::after {
        content: "";
        pointer-events: none;
        position: fixed;
        inset: 0;
        background: repeating-linear-gradient(
            var(--color-crt-mode) 0 .15em,
            transparent .15em .25em
        );
        mix-blend-mode: multiply;
    }
}

@media (prefers-contrast: no-preference), (prefers-contrast: less) {    /* adds custom h1 and h2 font if contrast OK */
    h1, h2 { font-family: var(--font-face-heading); }
}

@media (prefers-reduced-motion: no-preference) {    /* adds text and image animations */
    .marquee-track {
        animation: marquee-move 20s linear infinite;
        will-change: transform;
    }
    @keyframes marquee-move {
        0%   { transform: translateX(100%); } 
        100% { transform: translateX(-100%); } 
    }
    .color-cycle { animation: hueflash var(--anim-speed-slow) linear infinite; }
    @keyframes hueflash {
        0% { filter: hue-rotate(0deg); }
        50% { filter: hue-rotate(180deg); }
        100% { filter: hue-rotate(360deg); }
    }
    
    .pulse { animation: pulse var(--anim-speed-normal) linear infinite both; }
    @keyframes pulse { 
        50% { opacity: 0.1; }
    }

    .img-deco img:nth-child(odd)  {  animation: bob var(--anim-speed-fast) linear infinite; }
    @keyframes bob {
        0%, 100% { transform: translateY(0.05rem) scaleX(-1); }
        50% { transform: translateY(-0.05rem) scaleX(-1); }
    }

    .img-deco img:nth-child(even) { animation: wiggle var(--anim-speed-slower) linear infinite; }
    @keyframes wiggle {
        0%, 100% { transform: rotate(0deg) scale(1); }
        25% { transform: rotate(-15deg) scale(1.03); }
        50% { transform: rotate(0deg) scale(1); }
        75% { transform: rotate(15deg) scale(.97); }
    }

    .fire-effect { animation: flame-flicker var(--anim-speed-normal) ease-in-out infinite alternate; }
    @keyframes flame-flicker {
        0% { transform: scale(1) rotate(0deg); opacity: 0.95; }
        50% { transform: scale(1.02) rotate(-1deg); opacity: 1; }
        100% { transform: scale(0.98) rotate(1deg); opacity: 0.8; }
    }

    .hit-counter .digit { animation: hc-flick 1.6s ease-in-out infinite alternate; }
    @keyframes hc-flick{
        0%   { filter: brightness(1);   opacity: 1; }
        50%  { filter: brightness(1.05);opacity: .98; }
        100% { filter: brightness(.95); opacity: .96; }
    }
}

@media (prefers-contrast: more) { /* skips custom h1 and h2 font, shadows, crt effect if high contrast */
    :root { 
    /* --font-face-body: Arial, system-ui, sans-serif;  */
        --color-bg-marquee: var(--color-bg1);
    }

    h1, h2 { font-family: var(--font-face-body); }
    
    .fire-effect { text-shadow: none; }
    
    body::after {  background: none; }
    
}

@media (prefers-reduced-transparency: reduce) { /* skips shadows, crt effect if reduced transparency to boost contrast */
    :root { 
        /* --font-face-body: Arial, system-ui, sans-serif;  */
        --color-bg-marquee: var(--color-bg1);
    }
    body::after {  background: none; }

    .fire-effect { text-shadow: none; }
}

@media (prefers-reduced-motion) { /* skips problem visuals for vestibular disorders */
    :root { 
    /* --font-face-body: Arial, system-ui, sans-serif;  */
        --color-bg-marquee: rgba(34, 34, 34, 0.5);
    }

    body { background-image: none; } 
    
    .marquee-track {    /* centers marquee content if no animations */
        animation: none;
        transform: none;
        justify-content: center;
        margin: 0 auto; 
    }

    .color-cycle, .img-deco img:nth-child(odd), .img-deco img:nth-child(even), .pulse, .fire-effect, .hit-counter .digit {  animation: none; }
}    

@media (prefers-reduced-motion) and (max-width: 640px) { /* additional change to marquee for small displays with animations off */
    .marquee-scroll {
        overflow: visible;
        width: calc(100% - 1rem);
    }

    .marquee-track {    
        gap: var(--space-md);
        white-space: normal;
        text-align: center;
        text-wrap: balance;
        max-width: 80vw;
        line-height: 1.3;
    }

    .marquee-track span {
        display: inline-block;
        white-space: normal; 
    }
}

@media (prefers-reduced-motion) and (max-width: 320px) {
    .marquee-track img.mirrored {
        display: none;  
    }
}

/* ===== END visual effects and accessibility tweaks ===== */

/* --- mailerlite form - start-> --- */

    .ml-form-embedWrapper button {
        min-width: clamp(6rem, 30%, 10rem);
        white-space: nowrap;
    }


    /* LOADER */
    .ml-form-embedSubmitLoad {
        display: inline-block;
        width: 20px;
        height: 20px;
    }
    
    .ml-form-embedSubmitLoad:after {
        content: " ";
        display: block;
        width: 11px;
        height: 11px;
        margin: 1px;
        border-radius: 50%;
        border: 4px solid #fff;
        border-color: #000000 #000000 #000000 transparent;
        animation: ml-form-embedSubmitLoad 1.2s linear infinite;
    }

    @keyframes ml-form-embedSubmitLoad {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    #mlb2-32742638.ml-form-embedContainer {
        box-sizing: border-box;
        display: table;
        margin: 0 auto;
        padding: var(--space-lg) 0;
        position: static;
        width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer h2, #mlb2-32742638.ml-form-embedContainer p, #mlb2-32742638.ml-form-embedContainer span, #mlb2-32742638.ml-form-embedContainer button {
        text-transform: none;
        letter-spacing: normal;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper {
        background-color: #E6E6E6;
        border: var(--border-width) var(--border-style) var(--color-border);
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        padding: 0;
        position: relative;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper.embedPopup, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 100%; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 100%; width: 100%; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-align-left { text-align: left; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-align-center { text-align: center; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-align-default { display: table-cell; vertical-align: middle; text-align: center; }
    
    #mlb2-32742638.ml-form-embedContainer .ml-form-align-right { text-align: right; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
        /* width: undefinedpx; */
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
        padding: 20px 20px 0 20px;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
        padding-bottom: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
        text-align: left;
        margin: 0 0 20px 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h2, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h2 {
        color: #222222;
        font-family: var(--font-face-body);
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 10px 0;
        text-align: left;
        word-break: break-word;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
        color: #000000;
        font-family: var(--font-face-body);
        font-size: var(--font-size-body);
        font-weight: 400;
        line-height: 22px;
        margin: 0 0 10px 0;
        text-align: left;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
        color: #000000;
        font-family: var(--font-face-body);
        font-size: var(--font-size-body);
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol {
        list-style-type: lower-alpha;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol ol ol, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol ol ol {
        list-style-type: lower-roman;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
        color: #0066ff;
        text-decoration: underline;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group {
        text-align: left!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
        margin-bottom: 5px;
        color: #333333;
        font-size: calc(var(--font-size-body) * .95);
        font-family: var(--font-face-body);
        font-weight: bold; font-style: normal; text-decoration: none;;
        display: inline-block;
        line-height: 20px;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
        margin: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
        margin: 0;
        width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        margin: 0 0 20px 0;
        width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
        float: left;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
        margin: 0;
        padding: 0 0 20px 0;
        width: 100%;
        height: auto;
        float: left;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
        margin: 0 0 10px 0;
        width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
        margin: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
        margin: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        background-color: #ffffff;
        color: #000000;
        border-color: #000000;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        font-family: var(--font-face-body-alt);
        font-size: calc(var(--font-size-body) * .95);
        height: auto;
        line-height: 21px;
        margin-bottom: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-webkit-input-placeholder { color: #000000; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::-moz-placeholder { color: #000000; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-ms-input-placeholder { color: #000000; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input:-moz-placeholder { color: #000000; }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea {
        background-color: #ffffff;
        color: #000000;
        border-color: #000000;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        font-family: var(--font-face-body-alt);
        font-size: calc(var(--font-size-body) * .95);
        height: auto;
        line-height: 21px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        border-color: #000000!important;
        background-color: #ffffff!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.custom-control-input[type="checkbox"]{
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        border-radius: 4px!important;
    }


    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input:checked~.custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input:checked~.custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox input[type=checkbox]:checked~.label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked~.label-description::before  {
        border-color: #000000!important;
        background-color: #000000!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label::after {
        top: 2px;
        box-sizing: border-box;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        top: 0px!important;
        box-sizing: border-box!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        top: 0px!important;
        box-sizing: border-box!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after {
            top: 0px!important;
            box-sizing: border-box!important;
            position: absolute;
            left: -1.5rem;
            display: block;
            width: 1rem;
            height: 1rem;
            content: "";
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before {
        top: 0px!important;
        box-sizing: border-box!important;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::before {
        position: absolute;
        top: 4px;
        left: -1.5rem;
        display: block;
        width: 16px;
        height: 16px;
        pointer-events: none;
        content: "";
        background-color: #ffffff;
        border: #adb5bd solid 1px;
        border-radius: 50%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-control-label::after {
        position: absolute;
        top: 2px!important;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::before, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before {
        position: absolute;
        top: 4px;
        left: -1.5rem;
        display: block;
        width: 16px;
        height: 16px;
        pointer-events: none;
        content: "";
        background-color: #ffffff;
        border: #adb5bd solid 1px;
        border-radius: 50%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
        position: absolute;
        top: 0px!important;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        position: absolute;
        top: 0px!important;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-radio .custom-control-label::after {
        background: no-repeat 50%/50% 50%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .custom-checkbox .custom-control-label::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-interestGroupsRow .ml-form-interestGroupsRowCheckbox .label-description::after, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
        background: no-repeat 50%/50% 50%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-control, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-control {
        position: relative;
        display: block;
        min-height: 1.5rem;
        padding-left: 1.5rem;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-input, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-input, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-input, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-input {
        position: absolute;
        z-index: -1;
        opacity: 0;
        box-sizing: border-box;
        padding: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-radio .custom-control-label, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-radio .custom-control-label, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-checkbox .custom-control-label, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-checkbox .custom-control-label {
        color: #000000;
        font-size: var(--font-size-min);
        font-family: var(--font-face-body);
        line-height: 22px;
        margin-bottom: 0;
        position: relative;
        vertical-align: top;
        font-style: normal;
        font-weight: 700;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .custom-select, #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow .custom-select {
        background-color: #ffffff;
        color: #000000;
        border-color: #000000;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        font-family: var(--font-face-body-alt);
        font-size: calc(var(--font-size-body) * .95);
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 28px 10px 12px;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        background: url('https://assets.mlcdn.com/ml/images/default/dropdown.svg') no-repeat right .75rem center/8px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
        height: auto;
        width: 100%;
        float: left;
    }
    .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 70%; float: left; }

    .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: 30%; float: left; }

    .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal.labelsOn { padding-top: 20px; }

    .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; padding-right: 10px;  }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
        background-color: #ffffff;
        color: #000000;
        border-color: #000000;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        font-family: var(--font-face-body-alt);
        font-size: calc(var(--font-size-body) * .95);
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 0;
        padding: 10px 10px;
        width: 100%;
        box-sizing: border-box;
        overflow-y: initial;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
        background-color: var(--ml-button-bg);
        border-color: var(--ml-button-border);
        border-style: solid;
        border-width: 1px;
        border-radius: var(--button-border-radius);
        box-shadow: none;
        color: #000000;
        cursor: pointer;
        font-family: var(--font-face-body-alt);
        font-size: var(--font-size-body);
        font-weight: 400;
        line-height: 20px;
        margin: 0;
        padding: 10px;
        width: 100%;
        height: auto;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
        background-color: var(--ml-button-bg-hover);
        border-color: var(--ml-button-border-hover);
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        z-index: -1;
        opacity: 0;
        margin-top: 5px;
        margin-left: -1.5rem;
        overflow: visible;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
        color: #000000;
        display: block;
        font-family: var(--font-face-body-alt);
        font-size: var(--font-size-min);
        text-align: left;
        margin-bottom: 0;
        position: relative;
        /* vertical-align: top; */
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
        font-weight: normal;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        min-height: 24px;
        padding-left: 24px;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
        color: #000000;
        text-decoration: underline;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
        color: #000000;
        font-family: var(--font-face-body-alt);
        font-size: var(--font-size-min);
        font-weight: normal;
        line-height: 18px;
        padding: 0;
        margin: 0 5px 0 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
        margin: 0;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
        margin: 0 0 20px 0;
        float: left;
        width: 100%;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        background-color: var(--ml-button-bg-hover);
        border-color: var(--ml-button-border-hover);
        border-radius: 2px;
        box-shadow: none;
        color: #000000;
        cursor: pointer;
        font-family: var(--font-face-body-alt);
        font-size: var(--font-size-body);
        font-weight: 400;
        line-height: 21px;
        height: auto;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
        display: none;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
        background-color: var(--ml-button-bg-hover);
        border-color: var(--ml-button-border-hover);
    }

    .ml-subscribe-close {
        width: 30px;
        height: 30px;
        background: url('https://assets.mlcdn.com/ml/images/default/modal_close.png') no-repeat;
        background-size: 30px;
        cursor: pointer;
        margin-top: -10px;
        margin-right: -10px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .ml-error input, .ml-error textarea, .ml-error select {
        border-color: red!important;
    }

    .ml-error .custom-checkbox-radio-list {
        border: 1px solid red;
        border-radius: 2px;
        padding: 10px;
    }

    .ml-error .label-description,
    .ml-error .label-description p,
    .ml-error .label-description p a,
    .ml-error label:first-child {
        color: #ff0000;
    }

    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
    #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
        color: #ff0000;
    }

    @media only screen and (max-width: 360px){
        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
        .ml-form-formContent.horozintalForm { float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal.labelsOn { padding-top: 0px!important; }
    }

    .ml-mobileButton-horizontal { display: none; }

    #mlb2-32742638 .ml-mobileButton-horizontal button {
        background-color: var(--ml-button-bg);
        border-color: var(--ml-button-border);
        border-style: solid;
        border-width: 1px;
        border-radius: 2px;
        box-shadow: none;
        color: #000000;
        cursor: pointer;
        font-family: var(--font-face-body-alt);
        font-size: calc(var(--font-size-body) * .95);
        font-weight: 400;
        line-height: 20px;
        padding: 10px;
        width: 100%;
    }

    @media only screen and (max-width: 360px) {
        #mlb2-32742638.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm { padding: 0 0 10px 0; }
        .ml-hide-horizontal { display: none; }
        .ml-form-formContent.horozintalForm .ml-button-horizontal { display: none!important; }
        .ml-mobileButton-horizontal { display: inline-block; margin-bottom: 20px;width:100%; }
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-bottom: 0px; }
    }

    @media only screen and (max-width: 360px) {
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields {
            margin-bottom: 10px;
            width: 100%;
        }
    }
    /* --- mailerlite form - end --- */

    /* fix for mailerlite mobile breakpoint */
    @media (max-width: 480px) {
        .ml-form-formContent.horozintalForm .ml-form-horizontalRow {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-sm); 
        }
        .ml-form-formContent.horozintalForm .ml-input-horizontal,
        .ml-form-formContent.horozintalForm .ml-button-horizontal {
            width: 100% !important;
            float: none;
        }
        .ml-form-formContent.horozintalForm .ml-button-horizontal {
            margin-top: var(--space-sm);
        }
        .ml-form-embedWrapper button {
            width: 100%;
            min-width: auto; /* remove the clamp constraint when stacked */
            white-space: nowrap;
        }
    }