:root {
    --gold1: rgb(239, 212, 92);
    --gold2: rgb(255, 248, 206);
    --gold3: rgb(185, 149, 4);
    --silver1: rgb(214, 224, 228);
    --silver2: rgb(255, 255, 255);
    --silver3: rgb(122, 155, 168);
    --bronze1: rgb(193, 154, 84);
    --bronze2: rgb(222, 167, 79);
    --bronze3: rgb(127, 99, 46);
    --blue1: rgb(0, 179, 237);
    --blue2: rgb(58, 207, 255);
    --blue3: rgb(0, 122, 163);
}

html {
    scroll-behavior: smooth;
}

body {
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    height: 100%;
    transform: rotate(0);
    overflow: hidden;
    perspective: 2px;
    position: relative;
}

.parallax-bg {
    content: '';
    background-image: url(img/bg/dots-1-darker.png), url(img/bg/dots-2-darker.png);
    background-repeat: repeat-y, repeat-y;
    height: 100%;
    position: absolute;
    background-position: top left, top right;
    width: 100%;
    mix-blend-mode: color-dodge;
    background-size: 12vw;
    transform: translateZ(-1px)scale(1.5);
    transition: 0s linear;
    transition-property: background-position;
}

.site-logo img {
    vertical-align: bottom;
}

.site-logo img:last-child {
    max-height: 4rem !important;
    padding: 0.6rem 0.75rem;
}

#flag-column>div {
    gap: 1em;
}

.image.is-casino-logo {
    height: 70px;
    width: 170px;
}

.quick-facts {
    display: none;
}

.navbar {
    border-bottom: #3273dc solid 2px;
}

.navbar-menu {
    background-color: inherit !important;
}

a.has-text-white:hover,
a.has-text-white:focus {
    background-color: transparent !important;
}

#lists a {
    background-color: #0e007f;
}

a.filter.is-active {
    color: white !important;
    background-color: #001A3B;
    border-color: #ff42d0 !important;
}

.highlights .icon-text {
    flex-wrap: nowrap;
}

.highlights .icon-text .is-size-7 {
    flex: 1 1 100px;
    display: inline-block;
    word-break: break-word;
}

.highlights .icon-text .icon {
    width: 0.2em;
}

.tag.circle {
    background-color: transparent !important;
    border-bottom: #e0009d 3px solid;
    padding-left: 0;
    padding-right: 0.5em;
}

.tag.circle:before {
    content: '•';
    font-size: 2rem;
    padding-bottom: 0.25rem;
    color: #adb0ff;
}

/* 

RIBBONS

*/

.ribbon {
    top: 0 !important;
    border-radius: 6px 0 6px 0;
}

.ribbon.gold {
    display: block;
    background: var(--gold1);
    background-image: linear-gradient(325deg,
        transparent 28%,
        var(--gold2) 55%,
        transparent 91%);
}

.ribbon.silver {
    display: block;
    background: var(--silver1);
    background-image: linear-gradient(325deg,
        transparent 28%,
        var(--silver2) 55%,
        transparent 91%);
    color: black;
}

.ribbon.bronze {
    display: block;
    background: var(--bronze1);
    background-image: linear-gradient(325deg,
        transparent 28%,
        var(--bronze2) 55%,
        transparent 91%);
    color: black;
}

.ribbon.blue {
    display: block;
    background: var(--blue1);
    background-image: linear-gradient(325deg,
        transparent 28%,
        var(--blue2) 55%,
        transparent 91%);
    color: white;
}

/*

FOOTER

*/
.toplist-hidden {
    display: none;
}

.footer {
    background-color: white;
}

.footer-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: baseline;
}

.footer-logos * {
    padding: 10px;
    height: 37px;
    width: auto;
    box-sizing: content-box;
}


/*

MEDIA QUERIES

*/


@media screen and (min-width: 846px) {
    .quick-facts:nth-child(odd) {
        display: initial;
    }

    #quick-facts-btn-column {
        align-self: stretch !important;
        /*padding: 1em !important;*/
    }

    .highlights .icon-text .icon {
        width: 1.5em;
    }
}

@media screen and (max-width: 768px) {
    .is-flex-direction-row-mobile {
        flex-direction: row !important;
    }

    #flag-column>div {
        justify-content: start !important;
        gap: 1em;
    }

    #flag-column>*>figure {
        height: 32px !important;
        width: 32px !important;
        margin-top: -0.5em;
    }

    #flag-column>*>p {
        float: left !important;
        justify-content: start !important;
    }

    .px-5-touch {
        padding-left: 1.5rem;
    }
}
@media screen and (min-width: 769px) {.columns:not(.is-desktop) {display: block;}}
@media screen and (min-width: 1024px) {.columns:not(.is-desktop) {display: flex;}}