:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}

    header.svelte-ctq2ij {
        display: flex;
        justify-content: center;
        padding: 1rem 2rem;
    }

    header.publication__negative.svelte-ctq2ij {
        color: var(--publication-color-inverted);
        background-color: var(--header-background-color);
    }

    header.publication__positive.svelte-ctq2ij {
        color: var(--publication-color);
        border-bottom: 5px solid var(--header-border-color);
        background-color: var(--white);
    }

    .evilfruitcompany.svelte-ctq2ij {
        display: block;
        max-width: 600px;
    }

    img.svelte-ctq2ij {
        height: max(3rem, min(10vw , 5rem));
        width: 100%;
        pointer-events: none;
    }

    .brand-space.svelte-ctq2ij {
        display: flex;
        justify-content: center;
        height: 3rem;
    }
:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}

    :root {
        --easing: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    }

    div.svelte-1plpct9  {
        text-align: center;
        width: 60px;
        margin-left: auto;
    }

    div.open.svelte-1plpct9 {
        background: transparent;
    }

    div.svelte-1plpct9 > button:where(.svelte-1plpct9) {
        display: block;
        background: none;
        border: none;
        color: var(--white);
        font-weight: bold;
        font-size: 17px;
        position: relative;
        z-index: 5;
    }

    div.svelte-1plpct9 svg:where(.svelte-1plpct9) {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 5px;
        width: 36px;
        height: 30px;
        margin-bottom: 5px;
    }

    span.svelte-1plpct9 {
        display: block;
        color: var(--white);
        font-size: 17px;
        font-weight: bold;
        position: relative;
        transition: color 250ms ease;
    }

    div.svelte-1plpct9 span:where(.svelte-1plpct9)::before {
        position: absolute;
        color: transparent;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: attr(data-close-label);
        transition: color 250ms ease;
        text-align: center;
    }

    div.open.svelte-1plpct9 span:where(.svelte-1plpct9) {
        color: transparent;
    }

    div.open.svelte-1plpct9 span:where(.svelte-1plpct9)::before {
        color: var(--white);
    }

    div.svelte-1plpct9 path:where(.svelte-1plpct9) {
        fill: none;
        stroke: var(--white);
        stroke-width: 6px;
        stroke-dasharray: 42px 128px;
        stroke-dashoffset: 0;
    }

    div.svelte-1plpct9 path:where(.svelte-1plpct9) {
        transition: transform 250ms var(--easing) 0ms,
        stroke-dashoffset 250ms var(--easing) 150ms;
    }

    div.svelte-1plpct9:focus svg:where(.svelte-1plpct9),
    div.svelte-1plpct9:hover svg:where(.svelte-1plpct9) {
        transform: scale(1.1);
    }

    div.open.svelte-1plpct9 path:where(.svelte-1plpct9):nth-child(2) {
        transform: translateX(200%);
    }

    div.open.svelte-1plpct9 path:where(.svelte-1plpct9):nth-child(1),
    div.open.svelte-1plpct9 path:where(.svelte-1plpct9):nth-child(3) {
        stroke-dashoffset: -93px;
    }

    div.svelte-1plpct9 > dialog::backdrop,
    div.svelte-1plpct9 > dialog + .backdrop /* added due to limitation of polyfill (@see https://github.com/GoogleChrome/dialog-polyfill?tab=readme-ov-file#backdrop) */ {
        background: rgba(30, 40, 45, 0.8);
        box-sizing: border-box;
        opacity: 0;
        position: absolute;
        transition: opacity 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950) 0ms,
        height 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950) 0ms,
        width 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950) 0ms;
        z-index: 4;
        overflow: hidden;
        width: 0;
        height: 0;
        right: 0;
        left: auto;
        top: 189px;
    }

    div.open.svelte-1plpct9 > dialog::backdrop,
    div.open.svelte-1plpct9 > dialog + .backdrop /* added due to limitation of polyfill (@see https://github.com/GoogleChrome/dialog-polyfill?tab=readme-ov-file#backdrop) */ {
        opacity: 1;
        width: 100%;
        height: 3000px;
    }

    div.svelte-1plpct9 > dialog {
        position: absolute;
        transition: right 150ms var(--easing) 0ms,
        height 150ms var(--easing) 0ms;
        border: 0;
        padding: 0;
        background-color: var(--black);
        max-width: 100%;
        margin:0;
        top: 223px;
        height: 0;
        right: -280px;
        left: auto;
        width: 280px;
    }

    div.open.svelte-1plpct9 > dialog {
        height: 100%;
        right: 0;
    }

    div.svelte-1plpct9 > dialog nav ul {
        right: 0;
        bottom: 0;
        margin: 0;
    }

    nav.svelte-1plpct9 li:where(.svelte-1plpct9) {
        border-bottom: 3px solid var(--menuBorder);
        list-style: none;
        margin-left: 0;
        text-align: left;
        cursor: pointer;
    }

    nav.svelte-1plpct9 li:where(.svelte-1plpct9) a:where(.svelte-1plpct9) {
        color: var(--white);
        text-decoration: none;
        padding: 15px 20px;
        display: block;
        font-size: 17px;
        font-weight: bold;
    }

    @media screen and (max-width: 1000px) {
        div.svelte-1plpct9  {
            width: 50px;
        }

        div.svelte-1plpct9 > dialog[open]::backdrop,
        div.svelte-1plpct9 > dialog[open] + .backdrop /* added due to limitation of polyfill (@see https://github.com/GoogleChrome/dialog-polyfill?tab=readme-ov-file#backdrop) */ {
            top: 92px;
        }

        div.svelte-1plpct9 > dialog[open] {
            top: 95px;
        }

        nav.svelte-1plpct9 li:where(.svelte-1plpct9) {
            list-style: none;
        }

        span.svelte-1plpct9 {
            font-size: 13px;
        }
    }

    @media screen and (max-width: 550px) {
        div.svelte-1plpct9 > dialog[open]::backdrop,
        div.svelte-1plpct9 > dialog[open] + .backdrop /* added due to limitation of polyfill (@see https://github.com/GoogleChrome/dialog-polyfill?tab=readme-ov-file#backdrop) */ {
            top: 80px;
        }

        div.svelte-1plpct9 > dialog[open] {
            top: 83px;
        }

        div.svelte-1plpct9  {
            padding-left: 0;
            width: auto;
        }
    }

    @media screen and (max-width: 500px) {
        nav.svelte-1plpct9 ul:where(.svelte-1plpct9) {
            right: -100%;
        }

        div.open.svelte-1plpct9 nav:where(.svelte-1plpct9) ul:where(.svelte-1plpct9) {
            width: 100%;
        }
    }

    @media screen and (max-width: 400px) {
        nav.svelte-1plpct9 li:where(.svelte-1plpct9) a:where(.svelte-1plpct9) {
            font-size: 16px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        div.svelte-1plpct9 > dialog,
        div.svelte-1plpct9 > dialog::backdrop,
        div.svelte-1plpct9 > dialog + .backdrop, /* added due to limitation of polyfill (@see https://github.com/GoogleChrome/dialog-polyfill?tab=readme-ov-file#backdrop) */
        div.svelte-1plpct9 path:where(.svelte-1plpct9),
        div.svelte-1plpct9 svg:where(.svelte-1plpct9) {
            transition: none;
        }
    }
:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}

    .aid-header.svelte-10w3ysz {
        background: var(--black);
        width: 100%;
        flex-grow: 0;
    }

    .aid-header-content.svelte-10w3ysz {
        display: flex;
        align-items: center;
        max-width: 1000px;
        margin: 0 auto;
        padding: 100px 20px 30px 20px;
    }

    .aid-header--logo.svelte-10w3ysz {
        width: 90px;
        margin-right: 22px;
    }

    .aid-header.svelte-10w3ysz h1:where(.svelte-10w3ysz) {
        box-sizing: border-box;
        color: var(--white);
        line-height: 1.2;
        font-weight: bold;
        font-size: 24px;
        margin: 0 40px 0 0;
    }

    @media screen and (max-width: 1000px) {
        .aid-header-content.svelte-10w3ysz {
            padding: 20px 13px;
        }

        .aid-header--logo.svelte-10w3ysz {
            width: 43px;
        }

        .aid-header.svelte-10w3ysz h1:where(.svelte-10w3ysz) {
            font-size: 18px;
        }
    }

    @media screen and (max-width: 550px) {
        .aid-header-content.svelte-10w3ysz {
            padding-top: 0;
            padding-bottom: 0;
            flex-wrap: wrap;
            align-items: center;
        }

        .aid-header--logo.svelte-10w3ysz {
            min-height: 80px;
            display: flex;
            align-items: center;
        }

        .aid-header.svelte-10w3ysz h1:where(.svelte-10w3ysz) {
            box-sizing: content-box;
            background: var(--lightGray);
            color: var(--black);
            width: 100%;
            padding: 13px;
            font-size: 17px;
            order: 2;
            margin-left: -13px;
            margin-right: -13px;
        }
    }

    @media screen and (max-width: 400px) {
        .aid-header.svelte-10w3ysz h1:where(.svelte-10w3ysz) br {
            display: none;
        }
    }