@font-face {
    font-display: optional;
    font-family: "Open Sans Variable";
    font-style: normal;
    src: url("./font-opensans-variable-wdth-wght.woff2") format("woff2");
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-synthesis: none;
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: max(calc(6px + 1vw), 14px);
    background: #111;
    color: #fff;
    scroll-behavior: smooth;
}
@media (min-width: 1280px) {
    html {
        font-size: 19px;
    }
}
body {
    font-family: "Open Sans Variable", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
    font-size: 1rem;
    text-align: center;
}
.linkTabs {
    display: flex;
    width: 100%;
    column-gap: 1vw;
    justify-content: space-around;
    column-gap: min(1vw, 0.5em);
    text-align: center;
}
.linkTabs > a {
    background: #fff;
    color: #000;
    padding: 0.5em;
    margin: 0;
    width: 8rem;
    flex-grow: 1;
    font-weight: bold;
    text-decoration: none;
    font-size: max(16px, 1rem);
    line-height: 1.5;
    white-space: nowrap;
}
.linkTabs > a.small {
    width: 3em;
    flex-grow: 0;
    margin-left: calc(0px - min(1vw, 0.5em));
    border-left: rgba(0, 0, 0, 0.25) 1px solid;
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) calc(4px * 0.23), transparent calc(4px * 0.23), transparent);
    background-size: 4px 4px;
    background-clip: padding-box;
}
.linkTabs > a:hover {
    color: #fff;
    background: #000;
}
a.lotto {
    color: #fff;
    background: #c00;
}
a.euro {
    background: #deaf00;
}
a.lotto:hover {
    color: #c00;
}
a.euro:hover {
    color: #deaf00;
}
.mini {
    font-size: max(0.5em, 14px);
    margin: 0.75rem;
    display: block;
}
.mini > a,
.mini > span {
    display: block;
    text-decoration: none;
    margin: 2.25em 0.75em;
    background: #111;
}
.button,
.helpKeepItFreeCtaButton:not(.textLink) {
    display: block;
    font-size: max(1em, 32px);
    line-height: 1.5em;
    border-radius: 1em;
    width: 60%;
    margin: .75em auto;
    background: #deaf00 radial-gradient(100% 100% ellipse at 60% 25%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%) 0 0 no-repeat;
    color: #000;
    transform: scale(0.975, 0.975) translateY(0.25rem);
    border: 0.0625em solid #000;
    box-sizing: content-box;
    transition: transform 1s ease-out, opacity 1s ease-out, z-index 1s linear;
    text-decoration: none;
    text-align: center;
}
.button:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0.25rem 0.5rem inset;
}

/* desktops in fixed aspect ratio frame */
@media (min-width: 720px) {
    .linkTabs {
        justify-content: center;
    }
    .linkTabs {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
    }
    .linkTabs > a {
        border-top-left-radius: 0.5em;
    }
    .linkTabs > a.small {
        border-top-left-radius: 0;
        border-top-right-radius: 0.5em;
    }
    .mini {
        margin: 0.25rem;
        font-size: max(0.75em, 14px);
    }
    .mini > a,
    .mini > span {
        display: inline;
        margin: 0;
    }
    .mini > a + a::before,
    .mini > a + span::before,
    .mini > span + a::before,
    .mini > span + span::before {
        content: "•";
        display: inline-block;
        margin: 0 0.75rem;
    }

    .button {
        width: 20%;
        font-size: 2rem;
    }
}
@media (min-aspect-ratio: 3/2.22) {
    .linkTabs > a {
        flex-grow: 1;
    }
}