@layer base {
    :root {
        --hue: 166;
        --base-color: #8bfbbb;

        --money-color: #000000;

        --nav-bg: #ffffff;
        --text-nav-color: #000000;

        --text-black: #000000;
        --text-white: #ffffff;
        --border-color: #000000;

        --ticket-bg: #f4bf61;
        --ticket-color: #000000;
        --ticket-number-bg: #f4bf61;
        --ticket-number-color: #000000;

        --card-bg: #000000;
        --card-header-bg: #c0a0ee;
        --card-header-color: #000000;
        --card-content-bg: #ffffff;
        --card-text-color: #333333;
        --card-text-line-color: #333333;

        --text-page-header-color: #000000;
        --text-subtext-color: #000000;

        --section-header-bg: #c0a0ee;
        --section-header-color: #000000;
        --flex-link-color: #000000;

        --table-header-bg: #ffffff;
        --table-header-color: #000000;
        --table-row-bg: #8bfbbb;
        --table-row-alternate-bg: #f4bf61;

        --lang-switcher-arrow-bg: #80b2ac;

        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --text-7xl: 4.5rem;
        --text-7xl--line-height: 1;
        --text-8xl: 6rem;
        --text-8xl--line-height: 1;
        --text-9xl: 8rem;
        --text-9xl--line-height: 1;

        --container-width: 60%;
        --container-width-md: 80%;
        --container-width-90: 90%;

        --outline-size: max(2px, 0.08em);
        --outline-style: solid;
        --outline-color: currentColor;
        --outline-offset: 0.08em;
        --center-circle-size: 80px;

        --green-light: rgb(102, 189, 112);
        --green-medium: rgb(146, 210, 143);
        --green-dark: rgb(0, 68, 27);
    }
}

@layer base.support {

    *,
    *::before,
    *::after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
    }

    html {
        box-sizing: border-box;
        background: var(--base-color);
        scroll-behavior: smooth;
    }

    body {
        font-family: Tahoma, system-ui, sans-serif;
    }

    :is(a):focus {
        outline:
            var(--outline-size) var(--outline-style) var(--outline-color);
        outline-offset: var(--outline-offset, var(--outline-size));
    }

    .align-items-center {
        align-items: center;
    }

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

    .align-right {
        text-align: right;
    }

    .align-self-center {
        align-self: center;
    }

    .align-self-start {
        align-self: start;
    }

    .align-self-end {
        align-self: flex-end;
    }

    .pd-left-sm {
        padding-left: 0.5em;
    }

    .pd-sm {
        padding: 0.5em;
    }

    .pd-block-xs {
        padding-block: 0.25rem
    }

    .pd-block-sm {
        padding-block: 0.5rem
    }

    .pd-block-md {
        padding-block: 1rem
    }

    .pd-block-lg {
        padding-block: 2rem
    }

    .pd-inline-sm {
        padding-inline: 0.5em;
    }

    .pd-inline-xl {
        padding-inline: 2em;
    }

    .mg-sm {
        margin: 0.5em;
    }

    .mg-block-sm {
        margin-block: 0.5rem
    }

    .mg-block-md {
        margin-block: 1rem
    }

    .mg-block-lg {
        margin-block: 2rem
    }

    .mg-block-5xl {
        margin-block: 5rem
    }

    .mg-block-9xl {
        margin-block: 9rem
    }

    .mg-top-md {
        margin-top: 1rem
    }

    .mg-top-lg {
        margin-top: 2rem
    }

    .mg-top-5xl {
        margin-top: 5rem
    }

    .mg-bottom-sm {
        margin-bottom: 0.5rem
    }

    .mg-bottom-md {
        margin-bottom: 1rem
    }

    .mg-bottom-lg {
        margin-bottom: 2em
    }

    .mg-bottom-xl {
        margin-bottom: 2.5em
    }

    .mg-bottom-3xl {
        margin-bottom: 3em
    }

    .mg-bottom-5xl {
        margin-bottom: 5em
    }

    .w-4 {
        width: 1.125em
    }

    .h-4 {
        height: 1.125em;
    }

    .mg-right-4 {
        margin-right: 1rem;

    }

    .flex {
        display: flex;
        flex-wrap: wrap;
    }

    .direction-column {
        flex-direction: column;
    }

    .justify-content-space-between {
        justify-content: space-between;
    }

    .justify-content-center {
        justify-content: center;
    }

    .gap-sm {
        gap: 0.5em
    }

    .gap-md {
        gap: 1em
    }

    .gap-lg {
        gap: 1.5em
    }

    .gap-5xl {
        gap: 5em
    }

    .skip-navigation {
        position: absolute;
        background-color: var(--text-white);
        color: var(--text-black);
        padding: 0.5rem 1.5rem;
        border-radius: 0 0 0.25rem 0.25rem;
        margin-left: 0.5rem;
        transform: translateY(-150%);
        transition: transform 325ms ease-in;
    }

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

    .shadow {
        box-shadow: 4px 4px 0px 0px #000000;
    }

}

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    word-wrap: break-word;
    background-color: var(--card-bg);
    color: var(--card-text-color);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px 0px 0px #000000;
}

.card-header {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    padding: .5rem 1rem;
    margin-bottom: 0;
    color: var(--card-header-color);
    background: var(--card-header-bg);
    border-radius: 8px 8px 0 0;
}

.card-content {
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    border-radius: 0 0 8px 8px;
    background: var(--card-content-bg);
    padding: 8px 16px 24px 16px;
    height: 100%;
    /* border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color); */

    & a {
        color: var(--card-text-color);
        padding-bottom: 8px;
    }

    & p {
        padding-block: 8px;
        border-bottom: 1px solid var(--border-color);
        ;
    }

}

.text-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
}

.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
}

.text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
}

.text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--text-9xl--line-height);
}

.nav-header {
    background: var(--nav-bg);
    color: var(--text-nav-color);
    display: flex;
    justify-content: center;
    padding-block: 1em;
    border-bottom: 4px solid var(--border-color);
}

.nav-header-container {
    width: var(--container-width-90);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}

.logo {
    align-self: center;
}

li, a {
    text-decoration: none;
}

.nav-header-container a {
    color: var(--color--white);
}

.nav {
    align-self: center;
}

.nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    list-style: none;
    justify-content: center;
}

.nav__links li a {
    color: var(--color--white);
}

.full-width {
    width: 100%;
}

.main {
    width: 100%;
    /* margin-inline: auto; */
}

.sm-width {
    width: var(--container-width);
    margin-inline: auto;
}

.md-width {
    width: var(--container-width-md);
    margin-inline: auto;
}

.small-table-width {
    width: 20em;
    margin-inline: auto;
}

ul {
    list-style-type: none;
}

@layer hero {
    .hero-header {
        font-size: var(--text-8xl);
        line-height: var(--text-8xl--line-height);
        color: var(--money-color);

        @media (max-width: 60em) {
            font-size: var(--text-6xl);
            line-height: var(--text-6xl--line-height);
        }
    }

    .hero-subtext {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
        color: var(--text-subtext-color);

        @media (max-width: 60em) {
            font-size: var(--text-xl);
            line-height: var(--text-xl--line-height);
        }
    }

    .page-header {
        font-size: var(--text-4xl);
        line-height: var(--text-4xl--line-height);
        color: var(--text-page-header-color);

        @media (max-width: 60em) {
            font-size: var(--text-2xl);
            line-height: var(--text-2xl--line-height);
        }
    }

    .page-subtext {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
        color: var(--text-subtext-color);

        @media (max-width: 60em) {
            font-size: var(--text-xl);
            line-height: var(--text-xl--line-height);
        }
    }

    /* .additional-text {
        color: var(--text-white);
    } */
}

.index-grid {
    width: 80%;
    margin-inline: auto;

    --grid-max-col-count: 3;
    --grid-min-col-size: 400px;
    --grid-gap: 2rem;

    --grid-col-size-calc: calc((100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count));
    --grid-col-min-size-calc: min(100%,
            max(var(--grid-min-col-size), var(--grid-col-size-calc)));

    display: grid;
    gap: var(--grid-gap);

    grid-template-columns: repeat(auto-fit,
            minmax(var(--grid-col-min-size-calc), 1fr));
}

.section-header {
    background: var(--section-header-bg);
    color: var(--section-header-color);
    border-radius: 8px;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    width: var(--container-width-md);
    margin-inline: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 0.5em 0.5em 0.5em 1em;
    border: 2px solid var(--border-color);
    box-shadow: 4px 4px 0px 0px #000000;
}

.footer {
    background: var(--nav-bg);
    color: var(--text-nav-color);
    padding-block: 2em;
    border-top: 4px solid var(--border-color);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    text-align: center;
    align-items: center;
    margin-inline: auto;
}

.flex-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;

    .flex-link {
        color: var(--flex-link-color);
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
    }
}

@layer chart {
    .lottery-chart {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .legend-large-font-swatch {
        font-size: 16px;
    }

    .stackedchart g[aria-label="text"][font-variant="tabular-nums"] {
        color: #000000;
    }

}

.header-secondary-text {
    color: var(--section-header-color);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}

.zodiac-symbol {
    width: 32px;
    height: 32px;
}

.filter-invert {
    filter: invert(100%);
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
}

thead,
tfoot {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
}

th,
td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 20px;
}

th[scope="col"] {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
}

th[scope="row"] {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
}

td {
    text-align: center;
    white-space: nowrap;
}

.column-wrap {
    text-align: left;
    white-space: wrap;
}

.td-number {
    text-align: end;
}

.td-pd-occurrence {
    padding: 8px 10px;
}

.align-left {
    text-align: left;
}

tbody>tr:nth-of-type(even) {
    background-color: var(--table-row-alternate-bg);
}

tbody>tr:nth-of-type(odd) {
    background-color: var(--table-row-bg);
}

.zero {
    background-color: beige;
}

.ticket {
    width: 22em;
    margin-inline: auto;
    color: var(--ticket-color);
    background: var(--ticket-bg);
    text-align: center;
    border-radius: 8px;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    margin-block: 1em;
    padding-top: 0.5em;
    padding-bottom: 1em;
    /* border-bottom: 4px solid var(--card-header-bg);
    border-left: 4px solid var(--card-header-bg); */
    border: 2px solid var(--border-color);

    @media (max-width: 60em) {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }
}

.ticket .number {
    width: 80%;
    margin-inline: auto;
    background-color: var(--ticket-number-bg);
    text-align: center;
    color: var(--ticket-number-color);
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: 700;
    border-radius: 8px;
    margin-top: 0.5em;
    padding-inline: 15px;
    padding-block: 15px;

    @media (max-width: 60em) {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
    }
}

.v-align-top {
    vertical-align: top;
}

.pd-left-20p {
    padding-left: 20%;
}

.pd-right-20p {
    padding-right: 20%;
}

.pd-right-10p {
    padding-right: 10%;
}

.error {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    text-align: center;
    padding-block: 10rem;
    height: 80dvh;
}

.custom-select {
    position: relative;
}

.custom-select-box {
    font-size: var(--text-base);
    color: var(--text-nav-color);
    background-color: var(--nav-bg);
    appearance: none;
    padding-inline: 1.75em;
    border: 0;
}

.custom-arrow {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--lang-switcher-arrow-bg);
    display: block;
    height: 100%;
    width: 1.5em;
    pointer-events: none;
    border-radius: 100%;
}

.custom-arrow::before,
.custom-arrow::after {
    --size: 0.375em;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-arrow::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid var(--text-nav-color);
    top: 35%;
}

.custom-arrow::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid var(--text-nav-color);
    top: 65%
}

.selected-value {
    font-weight: 700;
}

.text-black {
    color: var(--text-black);
}

.button-submit {
    background: #1d4ed8;
    color: var(--text-white);
    border-radius: 0.5rem;
    padding-inline: 2rem;
    padding-block: 0.25rem;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
}

.button-submit:hover {
    background: #1e40af;
}

#id_qtopic {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    margin-bottom: 0.25rem;
    text-align: left;
    border-radius: 8px;
    padding: 10px;
}

.mg-inline-auto {
    margin-inline: auto;
}

.block {
    display: block;
}

.field {
    border-radius: 8px;
    padding: 10px;
}

#id_name, #id_email, #id_website {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    text-align: left;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
}

#id_question_text, #id_message {
    border-radius: 8px;
    padding: 10px;
}