@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;*/
}
header {
    /*background: var(--bg-top);*/
    padding: 0;
    margin: 0;
    /*min-height: var(--top-h);*/
}
main {
    /*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;
}
.container{
    padding: 0;
    /*max-width: var(--body);*/
}
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;*/
}
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;
    }
}

/* Контейнер для «шапки» */
.header-container {
    font-family: var(--f-h1);
    font-size: var(--fs-h1);
    color: var(--fc-black);
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    position: sticky; /* «прилипает» к верхней границе окна */
    top: 0;
    text-align: center;
    padding: 0;    /* небольшой отступ, чтобы картинка не прилипала вплотную */
    z-index: 999;     /* чтобы элемент оставался поверх остального контента */
    background-color: #F7F2E9; /* тот же фон, что у body */
}

/* Сама картинка */
.header-container img {
    max-width: 100%;  /* масштабируем под ширину экрана */
    height: auto;     /* сохраняем пропорции */
    display: inline-block;
}