html {
    margin: 0;

    font-size: clamp(0px, 1.25vw, 6px);

    font-family: "Main";
    letter-spacing: 0.2em;
    text-shadow: 0 0.15em 0em black;
    color: white;
    line-height: 4em;

    /* --body-background-color: #2d2b3f; */
    --body-background-color: #292a2e;

    background: var(--body-background-color);
}

body {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10em;

    margin: 5em 0 10em;

    --border-line: solid 0.2em #0b0b0b;
    --light-border-line-color: #c1c1c1;
    --light-border-line: solid 0.1em var(--light-border-line-color);
    --arrow-head: "⏷";
}
.campaign {
    position: relative;
    width: 60em;
    padding: 8em 10em 5em;
}
.campaign:has(.content-header) {
    padding-top: 26em;
}

.content {
    position: relative;

    box-sizing: border-box;

    border: var(--border-line);
    border-radius: 0.75em;

    background: #202020;

    box-shadow: inset 0 -0.1em 0.5em rgba(0, 0, 0, 0.25);

    padding: 3.5em 4em 4em;
}

.title {
    margin-left: auto;
    margin-right: auto;
    width: max-content;

    font-size: 3.4em;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -1.2em) rotate(-2deg);

    display: flex;
    flex-direction: row;
    align-items: center;

    background: #2b2b2b;

    padding: 0.3em 0.6em 0.1em;

    border-radius: 0.2em;
    box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.5), 0 0 0.5em rgba(0, 0, 0, 0.5);

    font-family: "Title";
}

.body {
    font-size: 2.5em;
}

.paragraph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;
    text-align: justify;
    position: relative;
}

.card {
    position: relative;
    --bleed: 3em;
    --base-width: 63em;
    --base-height: 89em;
    --factor: 0.23;
    --corner: 2em;

    width: calc(var(--factor) * var(--width));
    height: calc(var(--factor) * var(--height));

    border-radius: calc(var(--factor) * var(--corner));
    box-shadow: -0.15em 0.25em 0.5em rgba(0, 0, 0, 0.25), 0 0 1em rgba(0, 0, 0, 0.3);
}
.card.card-chronicle {
    --width: calc(1 * var(--base-width));
    --height: calc(1 * var(--base-height));
}
.card.card-catastrophe {
    --width: calc(3 * var(--base-width));
    --height: calc(1 * var(--base-height));
}
.card.card-board,
.card.card-achievement {
    --width: calc(3 * var(--base-height));
    --height: calc(2 * var(--base-width));
}
.card.card-turning-point,
.card.card-foresight {
    --width: calc(1 * var(--base-width));
    --height: calc(0.5 * var(--base-height));
}

.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    border-radius: calc(var(--factor) * var(--corner));

    background: transparent var(--image) no-repeat center center / contain;
    background-position: calc(-1 * var(--factor) * var(--bleed)) calc(-1 * var(--factor) * var(--bleed));
    background-size: calc(var(--factor) * (var(--bleed) + var(--width) + var(--bleed))) calc(var(--factor) * (var(--bleed) + var(--height) + var(--bleed)));
}

.video-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background: var(--kickstarter-color);
}
.video-container iframe {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
}

.video-container-close {
    font-size: 2.75em;
    position: absolute;
    right: 1em;
    top: 1em;
    cursor: pointer;
    width: 2em;
    height: 2em;
    background: white;
    border-radius: 100%;
    box-shadow: 0 0 1em black;
}
.video-container-close::after {
    content: "";
    position: absolute;
    --padding: 25%;
    width: calc(100% - (2 * var(--padding)));
    height: calc(100% - (2 * var(--padding)));
    left: var(--padding);
    top: var(--padding);
    mask-image: url("../images/close.png");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    background: black;
}

/* @media (orientation: portrait) {
    .video-container-close {
        left: 1.5em;
        top: 4.5em;
    }
} */

.arrow::after {
    content: var(--arrow-head);
    font-size: 3em;
    color: var(--light-border-line-color);
    font-family: sans-serif;
    line-height: 0;
    position: absolute;
}

#redirect {
    display: none;
}
#redirect-link {
    display: block;
    text-decoration: none;
    color: white;
    font-size: 4em;
    margin-top: 1em;
    margin-bottom: -1em;
    position: relative;
}
#redirect-link::after {
    content: "";
    position: absolute;
    right: -1.5em;
    top: -0.15em;
    width: 1em;
    height: 1em;
    mask-image: url("../images/external-link.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    background: white;
}

.may-break::before {
    content: "\00a0";
}