:root {
    --size-padding-small: 0.75rem;
    --size-padding-base: 1rem;
    --size-padding: 1.5rem;
    --size-padding-medium: 2rem;
    --size-padding-big: 3rem;

    --size-font-small: 0.75rem;
    --size-font-base: 1rem;
    --size-font-plus: 1.5rem;
    --size-font-medium: 2rem;
    --size-font-big: 3rem;
    --size-font-title: 6rem;

    --size-border: 2px;
    --size-border-radius: 0.3rem;

    --size-width-max: 1080px;
    --size-width-spacer: 8rem;
    --size-width-spacer-negative: -8rem;
    --size-width-info-card-number: 30%;

    --color-bright-main: #F0F0F0;
    --color-bright-secondary: white;
    --color-dark-main: #101010;
}

img {

    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

body {

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;

    font-size: 16px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: var(--color-dark-main);
}

h3 {
    margin: 0 0 var(--size-padding) 0;
}

.container {
    width: 100%;
    max-width: var(--size-width-max);
    min-height: 100vh;
}

.container-inner-bright {
    width: calc(100% - 2 * var(--size-padding));
    color: var(--color-dark-main);
    background-color: var(--color-bright-main);
    padding: var(--size-padding);
}

.container-inner-dark {
    width: calc(100% - 2 * var(--size-padding));
    background-color: var(--color-dark-main);
    padding: var(--size-padding-big) var(--size-padding);
}

.header {
    position: relative;
    height: 14rem;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-bright-main);
}

.header-item {
    height: 20rem;
    width: 100vw;
    transform: rotate(-5deg) translateY(-12rem);
    background-color: var(--color-dark-main);
}

.header-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 17;
    padding: var(--size-padding-big);
    width: calc(100% - 2 * var(--size-padding-big));
    height: calc(100% - 2 * var(--size-padding-big));

    font-weight: 700;
    font-size: var(--size-font-title);
    color: var(--color-bright-main);
    text-shadow: 0px 0px 10px var(--color-dark-main);
}

.text-card {

    width: calc(100% - 2 * var(--size-padding-big));

    border-radius: var(--size-border-radius);
    overflow: hidden;

    font-size: var(--size-font-plus);
    padding: var(--size-padding-big);
    background-color: var(--color-bright-secondary);
}

.text-card-small {

    width: calc(100% - 2 * var(--size-padding));

    border-radius: var(--size-border-radius);
    overflow: hidden;

    font-size: var(--size-font-plus);
    padding: var(--size-padding);
    background-color: var(--color-bright-secondary);
}

.info-card-wrapper {
    padding: 0 20%;
}

.info-intro-wrapper {
    padding: var(--size-padding) calc(20% - 2 * var(--size-padding)) 0;
}

.info-card {

    display: flex;
    flex-direction: row;

    width: 100%;

    margin-top: var(--size-padding);
    border-radius: var(--size-border-radius);
    overflow: hidden;
}

.info-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: var(--size-width-info-card-number);
    aspect-ratio: 1 / 1;
    background-color: var(--color-bright-secondary);
    font-size: 6rem;
}

.info-card-text {
    width: calc(100% - var(--size-width-info-card-number));
    font-size: 1.25rem;
    padding: var(--size-padding);
    background-color: var(--color-bright-main);
}

.presentation-card {
    display: flex;
    flex-direction: row;

    width: 100%;

    margin-top: var(--size-padding-big);
    border-radius: var(--size-border-radius);
    overflow: hidden;
}

.presentation-card-wide {
    display: flex;
    flex-direction: column;
    align-items: center;

    border: solid var(--size-border) var(--color-bright-secondary);
}

.presentation-card:first-of-type {
    margin-top: 0;
}

.presentation-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    padding: var(--size-padding);
    width: calc(30% - 2 * var(--size-padding));
}

.presentation-card-text {

    width: calc(70% - 2 * var(--size-padding-big));
    font-size: 1.5rem;
    padding: var(--size-padding-big);
    background-color: var(--color-bright-secondary);
}

.presentation-card-image-wide {
    object-fit: cover;
    width: calc(100%);
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

.presentation-card-text-wide {

    width: calc(100% - 2 * var(--size-padding-big));
    font-size: var(--size-font-plus);
    padding: var(--size-padding-big);
    background-color: var(--color-bright-secondary);
}

.spacer-small {
    height: var(--size-width-spacer);
    width: 100%;
    overflow: hidden;
    background-color: var(--color-bright-main);
}

.spacer-item-up {
    height: var(--size-width-spacer);
    width: calc(2 * var(--size-width-max));
    transform: rotate(-5deg) translateX(-25%);
    background-color: var(--color-dark-main);
}

.spacer-item-down {
    height: var(--size-width-spacer);
    width: calc(2 * var(--size-width-max));
    transform: rotate(-5deg) translateX(-25%) translateY(var(--size-width-spacer-negative));
    background-color: var(--color-dark-main);
}


.switch {
    flex-direction: row-reverse;
}

.top-presenter {
    width: calc(100% - 2 * var(--size-padding-big));

    border-radius: var(--size-border-radius);
    overflow: hidden;

    font-size: var(--size-font-plus);
    padding: var(--size-padding-big);
    background-color: var(--color-bright-secondary);
}

.top-presenter-table {


}

.top-presenter-image {

    object-fit: cover;
    overflow: hidden;
    border-radius: var(--size-border-radius);
    width: 100%;
    aspect-ratio: 21 / 9;
}

.top-presenter-table-row {
    display: flex;
    flex-position: column;
    padding: var(--size-padding) var(--size-padding-medium);
    width: calc(100% - 2 * var(--size-padding-medium));
}

.row-second {

    background-color: var(--color-bright-main);
}

.top-presenter-table-row:last-of-type {
    border: none;
}

.table-row-item {
    display: flex;
    align-items: center;
    width: 38%;
}

.table-row-item-small {
    display: flex;
    align-items: center;
    width: 24%;
}

.image-no-padding {
    min-height: 100%;
    object-fit: cover;
    padding: 0;
}
@media only screen and (max-width: 800px) {

    .info-card-wrapper {
        padding: 0 2rem;
    }

    .info-card {

        flex-direction: column;
    }

    .info-card-number {

        padding: var(--size-padding-medium);
        font-size: 2rem;
        width: calc(100% - 2 * var(--size-padding-medium));
        aspect-ratio: unset;
    }

    .info-card-text {

        padding: var(--size-padding-medium);
        font-size: 1.5rem;
        width: calc(100% - 2 * var(--size-padding-medium));
    }

    .presentation-card {
        display: flex;
        flex-direction: column;
        align-items: center;

        border: solid var(--size-border) var(--color-bright-secondary);
    }

    .presentation-card-image {
        width: calc(50% - 2 * var(--size-padding-big));
    }

    .presentation-card-text {

        width: calc(100% - 2 * var(--size-padding-big));
    }

    .switch {
        flex-direction: column;
    }
}