html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--white) !important;
}

body, body * {
    margin: 0;
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

@font-face {
    font-family: "Lato";
    src: url("../../files/fonts/Lato.woff2") format("woff2"),
    url("../../files/fonts/Lato.woff") format("woff"),
    url("../../files/fonts/Lato.ttf") format("truetype"),
    url("../../files/fonts/Lato.eot") format("opentype");
}

.textS {
    font-size: clamp(10px, 1dvw, 14px);
}

.textM {
    font-size: clamp(14px, 1.5dvw, 18px);
}

.textL {
    font-size: clamp(18px, 2dvw, 22px);
}

.containerS, .containerM, .containerForm, .containerFilm {
    margin: 0 auto;
    max-width: 100%;
}

.containerS {
    width: clamp(280px, 90dvw, 900px);
}

.containerM {
    width: clamp(280px, 90dvw, 1300px);
}

.containerForm {
    width: clamp(280px, 90dvw, 500px);
}

.containerFilm {
    width: 100%;
}

.containerMax {
    overflow: hidden !important;
}

.heroContainer {
    margin: 0;
    position: relative;
    display: flex;
    background-image: linear-gradient(45deg, var(--secondaryColor) 0%, var(--primaryColor) 100%);
}

.heroContainer::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: clamp(50px, 10dvw, 100px);
    background: var(--white);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.heroContainerText {
    font-size: clamp(40px, 5dvw, 100px);
    padding: clamp(40px, 10dvw, 60px) 10px clamp(40px, 10dvw, 60px) 10px;
    width: 100%;
    text-align: center;
    color: var(--white);
}

.marginS {
    height: 10px;
}

.marginM {
    height: 20px;
}

.marginL {
    height: 40px;
}

.underline {
    text-decoration: underline;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--black);
}

.pointer {
    cursor: pointer;
}

.image {
    width: 100% !important;
    display: block !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--whiteD) !important;
    }

    a {
        color: var(--blackD);
    }

    img {
        opacity: var(--opacityUpD);
    }

    .heroContainer {
        background-image: linear-gradient(45deg, var(--secondaryColorD) 0%, var(--primaryColorD) 100%);
    }

    .heroContainerText {
        color: var(--whiteD);
    }

    .heroContainer::before {
        background: var(--whiteD);
    }
}

@media only screen and (max-width: 1000px) {
    .containerFilm {
        height: 50dvw;
    }

    .containerMax {
        min-height: calc(100dvh - 130px);
    }
}

@media only screen and (min-width: 1001px) {
    .containerFilm {
        height: 40dvw;
    }

    .containerMax {
        min-height: calc(100dvh - 120px);
    }
}