@import url('/  static/css/footer.css');
@import url('/static/css/top.css');
@import url('/static/css/variables.css');
@import url('/static/css/icons.css');
@import url('/static/css/header.css');

/* ===================================== ГЛОБАЛЬНЫЕ НАСТРОЙКИ ======================================== */
html, body{
    /*width: 100vw;*/
    /*height: 100vh;*/
    padding: 0;
    margin: 0;

}
body {
    background-color: var(--bg-main);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
header {
    /*background: var(--bg-top);*/
    padding: 0;
    margin: 0;
    /*min-height: var(--top-h);*/
}
main {
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    /*background: var(--bg-main);*/
    padding: 0;
    margin: 0;
    /*flex: 1;*/
    /*overflow-y: auto;*/
}
footer {
    /*background: var(--bg-footer);*/
    padding: 0;
    margin: 0;
    /*min-height: var(--footer-h);*/
}
section{
    padding: 0;
    margin: 0;
    width: 100vw;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.container{
    margin: 0;
    padding: 20px;
    width: 100vw;
    max-width: var(--body);
    text-align: center;
}
div {
    padding: 0;
    margin: 0;
}
img {
    padding: 0;
    margin: 0;
}
h1{
    font-family: var(--f-h1);
    font-size: var(--fs-h1);
    color: var(--fc-black);
    font-weight: 300;
    text-decoration: none;
    padding: 20px;
    text-transform: uppercase;
    /*border: #800114 1px solid;*/
}
h2{
    font-family: var(--f-h1);
    font-size: 50px;
    color: var(--fc-black);
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    /*border: #800114 1px solid;*/
}
video {
    max-width: 1280px;
}

@media (max-width: 767px) {
    h1 {
        font-size: calc(var(--fs-h1) - 18px);

    }
    video{
        max-width: 767px;
    }
}

@media (max-width: 480px) {
    video{
        max-width: 375px;
    }
}

section .logo {
    background: var(--color-black);
}

section .about {
    background: #EBC70D;
}

section .filmography {
    background: #FEFEFE;
}

section .contacts {
    background: #EBC70D;
}

.header-container {
    font-family: var(--f-h1);
    font-size: 140px;
    color: var(--fc-white);
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    position: sticky; /* «прилипает» к верхней границе окна */
    top: 0;
    text-align: center;
    padding: 0;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
}
.header-container small{
    font-size: var(--fs-h3);
}
.about-container {
    font-family: var(--f-text);
    font-size: 20px;
    color: var(--fc-black);
    font-weight: 300;
    text-decoration: none;
    top: 0;
    /*border: red 1px solid;*/
    text-align: justify;
    padding: 0;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
}
.filmography-container {
    font-family: var(--f-text);
    font-size: 20px;
    color: var(--fc-black);
    font-kerning: revert;
    font-weight: 300;
    text-decoration: none;
    top: 0;
    text-align: left;
    padding: 0;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
}
.contacts-container {
    font-family: var(--f-text);
    font-size: 20px;
    color: var(--fc-black);
    font-weight: 300;
    text-decoration: none;
    top: 0;
    /*border: red 1px solid;*/
    text-align: left;
    padding: 0;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
}