:root {
    --color-warm-brick: #b95e3e;
    --color-sky-blue: #a7cfe3;
    --color-wood-brown: #8a623a;
    --color-stone-light: #e7d6b5;
    --color-text-dark: #4b3827;

    --sd-heading1-size: 8.5vw;
    --sd-heading1-line-height: 1;
    --sd-heading2-size: 5vw;
    --sd-heading2-line-height: 1;
    --sd-text-size: 2.2vw;
    --sd-text-line-height: 1.2;
    --sd-caption-font-size: 1vw;
    --sd-caption-line-height: 1;

    --sd-background-color: var(--color-stone-light);
    --sd-heading-color: var(--color-warm-brick);
    --sd-text-color: var(--color-wood-brown);
    --sd-primary-color: var(--color-warm-brick);
    --sd-caption-color: var(--color-sky-blue);
    --sd-caption-bgcolor: var(--color-text-dark);

    /* SpeakerView */
    --sd-sv-timer-size: 80px;
    --sd-sv-text-size: 40px;
    --sd-sv-text-line-height: 1.2;
    --sd-sv-background-color: #242424;
    --sd-sv-text-color: rgba(255, 255, 255, 0.87);
}

.cover {
    background-image: url(cover.webp);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;

    h1 {
        display: none;
    }
}

figure {
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.split {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.split > div.image {
    width: 720px;
}

.split > div.text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.speaker {
    padding: 0;

    > h2 {
        display: none;
    }
}

.photos {
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    height: 700px;

    .step {
        position: absolute;

        &:nth-child(2) {
            left: 10vw;
            top: 20vh;
        }

        &:nth-child(3) {
            right: 5vw;
            bottom: 3vh;
            transform: rotate(20deg);
        }

        &:nth-child(4) {
            left: 15vw;
            transform: rotate(-10deg);
        }
    }

    figure img {
        border: 15px solid white;
    }
}

.magazine {
    > h2 {
        display: none;
    }
}

table {
    th {
        text-align: left;
    }

    td {
        padding-left: 30px;
    }

    td,
    th {
        border-bottom: 1px solid var(--color-text-dark);
    }
}

.noshadow figure {
    box-shadow: none;
}

pre {
    font-size: 0.6em;
}

model-viewer {
    flex-grow: 1;
    height: 700px;
    width: 1200px;
}