@charset "utf-8";
:root {
    --ae-dark-color: #01aeea;
    --ae-light-color: #01aeea;
    --ae-secondary-color: rebeccapurple;
    --ae-tertiary-color: deeppink;
    --ae-accent-color: deeppink;
    --ae-grey-1: rgba(0, 0, 0, 0.01);
    --ae-grey-10: rgba(0, 0, 0, 0.1);
    --ae-grey-20: rgba(0, 0, 0, 0.2);
    --ae-grey-30: rgba(0, 0, 0, 0.3);
    --ae-grey-40: rgba(0, 0, 0, 0.4);
    --ae-grey-50: rgba(0, 0, 0, 0.5);
    --ae-grey-60: rgba(0, 0, 0, 0.6);
    --ae-grey-70: rgba(0, 0, 0, 0.7);
    --ae-grey-80: rgba(0, 0, 0, 0.8);
    --ae-grey-90: rgba(0, 0, 0, 0.9);
    --ae-grey-100: rgba(0, 0, 0, 1);
    --cassiopeia-color-primary: var(--ae-accent-color);
    --cassiopeia-color-link: var(--ae-dark-color);
    --cassiopeia-color-hover: var(--ae-light-color);

    accent-color: var(--ae-accent-color);
    caret-color: var(--ae-dark-color);
    scrollbar-3dlight-color: var(--ae-dark-color);
    scrollbar-arrow-color: var(--ae-dark-color);
    scrollbar-base-color: var(--ae-dark-color);
    scrollbar-shadow-color: var(--ae-dark-color);
    scrollbar-track-color: var(--ae-dark-color);

}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-size: 16px;
    font-family: system-ui, "Book Antiqua", Verdana, serif;
    background-color: transparent;
}

:picture-in-picture {
    box-shadow: 0 0 0 5px var(--ae-accent-color);
}

.brand-logo span {
    letter-spacing: 2px;
}

.btn.btn-cta {
    border: 1px solid var(--ae-accent-color);
    background: var(--ae-accent-color);
    color: black !important;
    font-weight: 300 !important;
    font-family: system-ui;
    padding: 1% 3%;
    border-radius: 25px;
    min-width: 150px;
    font-size: 1.3rem;
}

.btn.btn-cta:hover {
    border: 1px dotted var(--ae-light-color);
    background: var(--ae-light-color);
    color: white !important;
    font-size: 1.4rem;
    text-shadow: none;
    padding: 1% 3%;
}


.container-header .site-description {
    font-size: 0.6rem;
    width: max-content;
    max-width: 20rem;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

h4 {
    font-size: 1.2rem;
    font-weight: 700;
}

h5 {
    font-size: 1.2rem;
    font-weight: 700;
}

h6 {
    font-size: 1.2rem;
    font-weight: 700;
}

fieldset, iframe {
    border: none;
}

.container-topbar {
    display: grid;
    grid-template-columns: 20rem 1fr;
    grid-template-rows: 80px;
    justify-content: space-between;
    align-content: center;
}

body.site.ishome {
    background-color: transparent;
}

body.site.ishome .container-component {
    display: none;
}

/* on the home page, set the background colour of the header to transparent and make it fixed */

body.site.ishome .container-header {
    background-color: transparent;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.5s;
}

/* set the background colour of the header on regular pages and when the page has scrolled*/
.container-header,
.container-header.scrolled {
    background-color: var(--ae-grey-100);
    background-image: unset;
}

/* module with logo */

.container-topbar > .mod-custom.custom {
    justify-self: start;
    margin: 0 1rem;
    width: min-content;
    max-width: 20rem;
}

/* set the large banner to take up the full height of the viewport */
.container-banner .banner-overlay {
    height: 100vh;
    background-position-y: center;
}

.container-topbar > .navbar {
    justify-self: end;
    align-self: baseline;
    width: min-content;
    margin: 0 1rem;
}

.container-header .container-nav {
    align-items: baseline;
}

.container-header .container-nav .navbar {
    justify-content: end;
}

.footer {
    background-color: var(--ae-grey-100);
    background-image: none;
}

.footer .grid-child {
    align-items: flex-start;
    row-gap: 2rem;
}

.footer .grid-child {
    flex-wrap: wrap;
}

footer .menu-horizontal {
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

@media (width <= 991.98px) {
    .footer .grid-child {
        flex-direction: unset;
    }
}

.footer h3 {
    font-size: 1.3rem;
}

@media (width >= 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    body.site.ishome .container-header,
    .container-header {
        position: fixed !important;
        top: auto;
        width: 100%;
        padding: 0;
        background-color: transparent;
        background-image: unset;
    }

    .navbar-collapse {
        position: fixed;
        bottom: 2rem;
        left: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        width: 100%;
        background: var(--ae-tertiary-color);
        height: auto;
        overflow: auto;
    }

    .navbar-collapse.collapsing {
        height: auto;
        transition: left 0.3s ease;
        left: -100%;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 0.3s ease-in;
    }

    .navbar-toggler {
        --navbar-color: white;
        box-sizing: border-box;
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 9999;
        display: block;
        width: 4rem;
        height: 4rem;
        background-color: var(--ae-tertiary-color);
        color: white !important;
        border: .25rem solid white !important;
        border-radius: 50%;
    }

    .container-header img {
        max-width: 75%;
    }

    /*  hide logo on small viewports **/
    div#mod-custom146 {
        display: none;
    }
}

.ae-jouercloud-story {
    font-family: serif;
    text-align: center;
}

.ae-jouercloud-story h1 {
    font-size: var(--ae-font-size);
    margin-bottom: 0;
    filter: drop-shadow(var(--ae-color-secondary) 0 0 .2rem);
}

.ae-jouercloud-story h2 {
    font-size: calc(var(--ae-font-size) / 2);
    font-weight: normal;
    margin-top: 0;
}

.ae-jouercloud-story h3 {
    font-size: calc(var(--ae-font-size) / 3);
    font-weight: normal;
    margin-top: 0;
}

.ae-jouercloud-story section {
    min-width: inherit;
    min-height: inherit;
}

.ae-jouercloud-story section,
.ae-jouercloud-story article,
.ae-jouercloud-story hgroup,
.ae-jouercloud-story .possible,
.ae-jouercloud-story .possible__item {
    display: grid;
    justify-items: center;
    align-items: center;
}

.ae-jouercloud-story article dialog.showresult {
    min-width: 96vw;
    min-height: 96vh;
}

.ae-jouercloud-story article dialog.showresult iframe[name="result"] {
    border: none;
    min-width: inherit;
    min-height: inherit;
}

.ae-jouercloud-story .possible {
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding: 0;
}

.ae-jouercloud-story .possible__item {
    border: 1px solid var(--ae-color-foreground);
    border-radius: 0.5rem;
    width: 10rem;
    height: calc(var(--ae-font-size));
    margin: calc(var(--ae-font-size) * .2);
}

.ae-jouercloud-story .possible__item a {
    text-decoration: none;
    font-size: calc(var(--ae-font-size) / 3);
    color: var(--ae-color-foreground);
}

.ae-jouercloud-story .possible__item:hover {
    filter: drop-shadow(var(--ae-color-secondary) 0 0 .2rem);
}

.ae-jouercloud-story .possible__item a:hover {
    transform: translateX(10px);
    font-size: calc(var(--ae-font-size) / 3);
    color: var(--ae-color-accent);
    transition: 0.5s all ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
    .ae-jouercloud-story .possible__item:hover {
        filter: drop-shadow(var(--ae-color-secondary) 0 0 .2rem);
    }

    .ae-jouercloud-story .possible__item a:hover {
        transform: translateX(10px);
        font-size: calc(var(--ae-font-size) / 3);
        color: var(--ae-color-accent);
        transition: 0.5s all ease-in-out;
    }
}

@media screen and (min-width: 50rem) {
    .ae-jouercloud-story .possible {
        min-width: 50rem;
    }
}

body.jouercloud-page.games dd.hits {
    font-weight: 700;
    color: black;
    background-color: gold;
    text-align: end;
}