* {
    margin: 0;
    font: inherit;
	vertical-align: baseline;
}

:root {
    --typeface-body: "Overpass";
    --families-code: var(--typeface-monospace, ''), ui-monospace, "Jetbrains Mono", "Fira Mono", "Noto Mono", "Courier New", Courier, monospace;
    --families-normal: var(--typeface-body, ''), 'Trebuchet MS', 'Ubuntu', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-family: var(--families-normal);
    -webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
    color-scheme: "dark";
    overflow-x: hidden;

    --line-color: #ffffff0d;
    --max-width: 1200px;
    --content-padding: 30px;
    --content-padding--large: 60px;
    --baseline-border-width: 2px;
    --state-has-more-width: 1;
}

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

html, body {
    width: 100%;
}

ul {
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
}

/*
    -----------------------------------------
*/

body {
    background-color: #000000;
    color: #E6E6E6;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    background: linear-gradient(180deg, #000 70%, #0000 100%);
    backdrop-filter: blur(100px) brightness(.8);
    width: 100%;
    padding: 0 var(--content-padding--large);

    &::before {
        content: "";
        display: block;
        height: var(--baseline-border-width);
        width: calc(100% + var(--content-padding--large));
        background-color: var(--line-color);
        position: absolute;
        left: calc(-1 * var(--content-padding--large));
        bottom: calc(-1 * var(--baseline-border-width));
        z-index: 1;
    }
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    border-left: calc(var(--state-has-more-width) * var(--baseline-border-width)) solid var(--line-color);
    border-right: calc(var(--state-has-more-width) * var(--baseline-border-width)) solid var(--line-color);
    scroll-margin-top: var(--content-padding--large);
}

b {
    font-weight: 600;
}

h1 {
    font-size: 1.9em;
    font-weight: 700;
    margin-bottom: 1em;
}

h2 {
    font-size: 1.7em;
    font-weight: 700;
    margin-bottom: 1em;
}

h3 {
    font-size: 1.3em;
    font-weight: 700;
}

a {
    color: currentColor;
    text-decoration: inherit;
}

hr {
    height: var(--baseline-border-width);
    color: var(--line-color);
}

.cards {
    &.padding {
        padding: 30px;
    }

    &.updates {
        & > .card {
            padding: 0;
            flex-grow: 1;
            flex-basis: 30%;
            height: 200px;
            align-content: center;
            text-align: center;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;

            & > .cover {
                flex-grow: 1;
                --mask-to-right: linear-gradient(360deg, transparent 0%, transparent 10%, black 50%);
                -webkit-mask-image: var(--mask-to-right);
                mask-image: var(--mask-to-right);
                margin-bottom: -20px;
            }

            & > .cover > img {
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: cover;
                z-index: -2;
                transition: transform .3s ease-in-out, filter .3s;
            }

            & > .content {
                min-height: 0px;
                padding: 15px;
                transition: min-height .3s;
                align-content: center;
                width: 100%;
            }

            &:hover {
                & > .cover {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    margin: 0;
                    --mask-to-right: none;

                    & > img {
                        filter: grayscale(1) opacity(.2) blur(5px) contrast(.4);
                        transform: scale(1.2) rotate(5deg);
                    }
                }

                & > .cover + .content {
                    position: absolute;
                    bottom: 0;
                    min-height: 100%;
                }
            }
        }
    }

    &.jobs {
        flex-direction: column;

        & > .card {
            & > .content {
                padding: 0;
            }
        }
    }

    &:not(.nowrap) {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    &.nowrap {
        & > .card:not(:first-child) {
            margin-top: 20px;
        }
    }
}

.card {
    display: block;
    padding: 30px;
    position: relative;
    background: radial-gradient(80% 90% at bottom, #ffffff21 0%, #fff0 100%) #ffffff13;

    &.game {
        padding: 12px;
        flex-basis: 33%;

        & > .content {
            padding: 0;

            &:not(:only-child) {
                margin-top: 15px;
            }

            p {
                margin-top: 5px;
            }
        }
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 0;
        top: 0;
        background-color: rgb(255, 255, 255, .1);
        z-index: -1;
        transition: height .2s;
    }

    &:hover::before {
        height: 100%;
    }
}

.button {
    --shade-color: 110, 146, 255;
    --exposure-width: 25px;
    display: inline-block;
    padding: 15px 20px;
    background: radial-gradient(80% 90% at bottom, #ffffff21 0%, #fff0 100%) rgb(var(--shade-color), .2);
    font-size: 1.3em;
    line-height: .7em;
    font-weight: 700;
    position: relative;
    text-decoration: none;

    &.gray {
        --shade-color: 105, 105, 105;
    }

    &.green {
        --shade-color: 110, 255, 120;
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: auto;
        width: 0;
        height: 100%;
        top: 0;
        background-color: rgb(var(--shade-color), .1);
        z-index: -1;
        transition: width .2s, margin .2s, height .2s;
    }

    &:not(.accordion) {
        border-bottom: var(--baseline-border-width) solid var(--line-color);

        &::before {
            height: 0;
            width: 100%;
            top: auto;
            bottom: 0;
        }

        &:hover::before {
            height: 100%;
        }
    }

    &.exposured {
        &.right {
            border-right: calc(var(--state-has-more-width) * var(--baseline-border-width)) solid var(--line-color);
            margin-right: calc(-1 * calc(calc(var(--state-has-more-width) * var(--baseline-border-width))));
        }

        &:not(.right) {
            border-left: calc(var(--state-has-more-width) * var(--baseline-border-width)) solid var(--line-color);
            margin-left: calc(-1 * calc(calc(var(--state-has-more-width) * var(--baseline-border-width))));
        }

        &.right::before {
            left: auto;
            right: 0;
        }
    }

    &.accordion.exposured {
        transition: margin-left .2s, margin-right .2s;

        &:hover {
            &::before {
                width: calc(100% + calc(var(--exposure-width) + calc(var(--state-has-more-width) * var(--baseline-border-width))));
            }

            &:not(.right) {
                margin-right: initial;
                margin-left: var(--exposure-width);
                
                &::before {
                    margin-left: calc(calc(-1 * var(--exposure-width)) - calc(var(--state-has-more-width) * var(--baseline-border-width)));
                }
            }

            &.right {
                margin-left: initial;
                margin-right: var(--exposure-width);

                &::before {
                    margin-right: calc(calc(-1 * var(--exposure-width)) - calc(var(--state-has-more-width) * var(--baseline-border-width)));
                }
            }
        }
    }

    &.lying.exposured {
        &::before {
            width: var(--content-padding--large);
        }

        &:not(.right)::before {
            margin-left: calc(-1 * calc(var(--baseline-border-width) + var(--content-padding--large)));
        }

        &.right::before {
            margin-right: calc(-1 * calc(var(--baseline-border-width) + var(--content-padding--large)));
        }

        &.accordion:hover::before {
            width: calc(100% + calc(var(--exposure-width) + calc(var(--baseline-border-width) + var(--content-padding--large))));
        }

        &.accordion:not(.right):hover::before {
            margin-left: calc(calc(calc(-1 * var(--exposure-width)) - var(--baseline-border-width)) - var(--content-padding--large));
        }

        &.accordion.right:hover::before {
            margin-right: calc(calc(calc(-1 * var(--exposure-width)) - var(--baseline-border-width)) - var(--content-padding--large));
        }
    }
}

.content {
    position: relative;
    padding: var(--content-padding);

    hr {
        margin: 30px calc(-1 * var(--content-padding));
        width: calc(100% + calc(2 * var(--content-padding)));
    }

    p:not(:first-child) {
        margin-top: calc(var(--content-padding) / 2);
    }

    img {
        max-width: 100%;
    }

    &.expanded {
        padding: var(--content-padding--large);
    }

    &.unline {
        padding-top: 0;
    }
}

/*
    Content shimmer
*/
.htmx-request .shimmered {
    user-select: none;
    color: transparent;

    & > .sector > h1,
    & > .content::before {
        animation: shimmer 3s;
        animation-iteration-count: infinite;
        background: linear-gradient(to right, #e6e6e614 5%, #cccccc37 25%, #e6e6e618 35%);
        background-size: 1000px 100%;
    }

    & > .content > *,
    & > .headline,
    & > .medialine,
    & > .sector > .actions {
        display: none;
    }

    & > .content::before {
        content: "";
        display: block;
        width: 100%;
        height: 500px;
        --block-height: 1em;
        --block-spacing: 1em;
        --block-1-width: 100%;
        --block-2-width: 60%;
        --block-3-width: 90%;
        --block-4-width: 30%;

        --shift: calc(var(--block-height) + var(--block-spacing));

        clip-path: polygon(
            0 calc(var(--shift) * 0),
            var(--block-1-width) calc(var(--shift) * 0),
            var(--block-1-width) calc(calc(var(--shift) * 0) + var(--block-height)),
            0 calc(calc(var(--shift) * 0) + var(--block-height)),

            0 calc(var(--shift) * 1),
            var(--block-2-width) calc(var(--shift) * 1),
            var(--block-2-width) calc(calc(var(--shift) * 1) + var(--block-height)),
            0 calc(calc(var(--shift) * 1) + var(--block-height)),

            0 calc(var(--shift) * 2),
            var(--block-3-width) calc(var(--shift) * 2),
            var(--block-3-width) calc(calc(var(--shift) * 2) + var(--block-height)),
            0 calc(calc(var(--shift) * 2) + var(--block-height)),

            0 calc(var(--shift) * 3),
            var(--block-4-width) calc(var(--shift) * 3),
            var(--block-4-width) calc(calc(var(--shift) * 3) + var(--block-height)),
            0 calc(calc(var(--shift) * 3) + var(--block-height))
        );
    }

    &.leader ~ .segment {
        display: none;
    }
}

@keyframes shimmer {
    from {
        background-position: -1000px 0;
    }
    to {
        background-position: 1000px 0;
    }
}

footer {
    background-color: #141414;
    position: relative;
    left: 0;
    width: 100%;
    border-top: var(--baseline-border-width) solid var(--line-color);

    & > .footer {
        max-width: var(--max-width);
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        padding: var(--content-padding) 0;

        & > .columns {
            display: flex;
            column-gap: 60px;
            flex-wrap: wrap;

            & > .column {
                flex-grow: 3;
                flex-basis: 300px;

                &:first-child {
                    flex-grow: 2;
                }

                a {
                    display: block;
                }
            }
        }
    }
}

.sector {
    position: relative;
    padding: var(--content-padding);

    h1, h2 {
        margin: 0;
    }
    
    &:not(.unline)::before {
        content: "";
        display: block;
        height: var(--baseline-border-width);
        width: 100%;
        background-color: var(--line-color);
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
    }

    & > .actions {
        position: absolute;
        right: 0;
        margin: 0;
        bottom: 0;
        z-index: 3;
        translate: 0 -50%;
    }
}

.segment {
    &.seperated::before {
        content: "";
        display: block;
        height: var(--baseline-border-width);
        width: 100vw;
        background-color: var(--line-color);
        position: absolute;
        left: 0;
        z-index: 1;
    }

    & > .actions {
        position: absolute;
        right: 0;
        z-index: 3;
        margin-top: 0;
    }

    &.contain {
        padding: 0;
    }

    &.blog {
        display: flex;

        & > .post {
            flex-grow: 5;
            flex-basis: 0;
        }

        & > .other {
            border-left: var(--baseline-border-width) solid var(--line-color);
            flex-grow: 2;
            flex-basis: 0;

            & > .title::before {
                left: auto;
                right: calc(-1 * var(--content-padding--large));
            }

            & > .content {
                display: flex;
                flex-direction: column;
                row-gap: 20px;
                text-decoration: none;

                & .card {
                    text-align: left;
                    flex-basis: 100%;
                }
            }
        }
    }
}

.stats {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 60px;
    flex-wrap: wrap;
    row-gap: 40px;

    & > .stat {
        text-align: center;

        & > span {
            display: block;
            padding: 15px 30px 5px 30px;
            font-weight: 700;
            font-size: 3.5em;
            background: radial-gradient(100% 80%, #000000 0%, #00000000 100%) #202020;
            margin-bottom: 20px;
        }
    }
}

.actions {
    margin-top: 20px;
}

.center {
    text-align: center;
}

svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: text-top;
}

.icons {
    display: inline-block;
    color: #666666;
    padding: 0 20px;

    & > svg {
        width: 1.5em;
        height: 1.5em;
        vertical-align: sub;
    }
}

.update {
    background-color: #ffffff0e;
    padding: 40px 60px;
    position: relative;
    width: calc(100% + calc(var(--content-padding--large) * 2));
    margin-left: calc(-1 * var(--content-padding--large));

    &::before, &::after {
        content: "";
        display: block;
        height: var(--baseline-border-width);
        width: 100%;
        background-color: var(--line-color);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    &::after {
        top: auto;
        bottom: 0;
    }
}

.headline {
    display: block;
    height: 40vh;
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: calc(-1 * var(--baseline-border-width));
    position: relative;
    overflow-x: clip;
    z-index: -1;
    border-bottom: var(--baseline-border-width) solid var(--line-color);

    &:not([style^="--background-image:"]) {
        display: none;
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        background-image: var(--background-image);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
        z-index: -2;
        top: -100px;
        backdrop-filter: brightness(0.3);
        filter: grayscale(1) contrast(.7) opacity(.1) blur(5px);
    }
}

.medialine {
    & > img {
        z-index: -1;
        border-bottom: var(--baseline-border-width) solid var(--line-color);
    }

    & > .mediapicker {
        display: flex;
        height: 180px;
        border-bottom: var(--baseline-border-width) solid var(--line-color);

        & > * {
            flex-basis: 200px;
            flex-grow: 1;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.tag {
    display: inline-block;
    --chevron-angle: 15px;

    & > * {
        display: inline-block;
        padding: 5px 10px;
        position: relative;
    }

    & > :nth-child(1) {
        background-color: #303030;
        padding-right: 5px;
    }

    & > :not(:nth-child(1)) {
        background-color: #002A5B;
        padding-left: 10px;
    }

    & > :nth-child(2) {
        margin-left: var(--chevron-angle);
    }

    & > :nth-child(1):before,
    & > :nth-child(2):before {
        background-color: inherit;
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        translate: 100% 0%;
        height: 100%;
        width: var(--chevron-angle);
        z-index: 1;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }

    & > :nth-child(2):before {
        left: 0;
        right: auto;
        translate: -100% 0%;
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 100% 50%, 0 0);
    }
}

.tags {
    display: block;
    margin-bottom: 20px;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.fact {
    min-width: 20%;
}

strong {
    font-weight: 600;
}

.segment.hero {
    min-height: 50vh;
    width: 100%;
    padding: 0 var(--content-padding--large);
    display: flex;
    border: 0;
    position: relative;

    &::before {
        content: "";
        display: block;
        position: absolute;
        left: calc(var(--state-has-more-width) * calc(-.5 * calc(100vw - var(--max-width))));
        width: calc(100vw - var(--baseline-border-width));
        height: 100%;
        background: linear-gradient(#000000 0%, #0E193D 100%);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -2;
        animation: 20s hero-shift ease-in-out reverse both infinite;
    }

    & > div.column {
        padding: var(--content-padding--large) 0;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        font-size: 1.15em;
        flex-grow: 4;
        flex-basis: 100%;
        position: relative;

        & > div.top {
            flex-grow: 1;

            & > img {
                display: block;
                height: 5em;
                width: auto;
            }
        }

        & > div.content {
            display: flex;
            flex-direction: column;
            padding: 0;

            & > h1 {
                margin-top: 1em;
                margin-bottom: 0;
            }
        }

        &:last-child {
            flex-grow: 5;
            padding: 0;
        }

        & > img {
            display: block;
            height: 100%;
            width: 100%;
            object-fit: cover;
            right: calc(calc(var(--content-padding--large) * -1) + calc(-1 * var(--baseline-border-width)));
            position: absolute;
            mask-image: linear-gradient(90deg, transparent 0%, black 30%);
            mix-blend-mode: exclusion;
            filter: brightness(1.5);
            z-index: -1;
        }
    }
}

@media (max-width: 1200px) {
    :root {
        --state-has-more-width: 0;
    }

    .segment.hero {
        flex-wrap: wrap;

        & > div.column > img {
            max-width: none;
            width: calc(100% + calc(var(--content-padding--large) * 2));
            right: auto;
            bottom: 0;
            left: calc(-1 * var(--content-padding--large));
            object-position: top;
            height: calc(100% + calc(var(--content-padding--large) * 2));
            mask-image: linear-gradient(180deg, transparent 0%, black 30%);
        }

        & > div.column:last-child {
            margin-top: var(--content-padding);
            height: 150px;
        }
    }
}

@media (max-width: 1000px) {
    :root {
        font-size: 90%;
    }

    .cards.updates {
        flex-direction: column;

        & > .card {
            height: auto;
            flex-basis: 120px;
        }
    }

    .segment.blog {
        flex-wrap: wrap;

        & > .other {
            flex-basis: 100%;

            & > .content .card {
                height: auto;
                flex-basis: 120px;
            }
        }
    }
}

@keyframes settle {
    0% {
        background-position: -10vw 0;
        background-size: 0vw 100%;
    }

    10% {
        background-size: 20vw 100%;
    }

    100% {
        background-size: 100vw 100%;
        background-position: 100vw 0;
    }
}

@keyframes hero-shift {
    0% {
        background-position-y: 0px;
    }

    50% {
        background-position-y: 0px;
    }

    75% {
        background-position-y: 200px;
    }

    100% {
        background-position-y: 0px;
    }
}

@keyframes finish {
    80% {
        background-size: 100vw 100%;
        background-position: 0 0;
    }

    100% {
        background-size: 100vw 100%;
        background-position: 0 0;
        opacity: 0;
    }
}

nav {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap: wrap;

    img {
        display: block;
        height: 1.8em;
        width: auto;
        flex-grow: 0;
    }

    & > ul {
        list-style-type: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-left: auto;

        & > a {
            display: inline-block;
            font-weight: 500;
            padding: 0px;
            flex-grow: 1;
            text-align: center;
            padding: 20px 30px;
            transition: background-color .2s;
            z-index: 2;

            &:active {
                box-shadow: 0px var(--baseline-border-width) 0px currentColor;
            }
        }
    }

    &::before {
        animation-name: finish;
        animation-duration: .3s;
        animation-timing-function: cubic-bezier(.51,.51,1,-0.01);
        animation-fill-mode: forwards;
        content: "";
        display: block;
        bottom: calc(-1 * var(--baseline-border-width));
        width: calc(100% + calc(2 * var(--content-padding--large)));
        left: calc(-1 * var(--content-padding--large));
        height: var(--baseline-border-width);
        position: absolute;
        background-image: linear-gradient(#ffffff54);
        background-repeat: no-repeat;
        background-size: 100vw 100%;
        background-position: 0 0;
    }

    .htmx-request &::before {
        animation-name: settle;
        background-image: linear-gradient(to right, #00000000 10%, #ffffffa0 10%, #ffffffa0 50%, #00000000 50%);
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
}