@import url('fonts.css');
@import url('footer.css');
@import url('header.css');
@import url('portfolio-grid.css');
/*--------------------------------------------------------------
# Общие стили и переменные CSS
--------------------------------------------------------------*/

* {
    /* outline: 4px solid green;  */
    box-sizing: border-box;
}

:root {
/* Цвета */
    --main-color: aliceblue;             /* Основной цвет контента (например, для текста на темном фоне хедера) */
    --header-btn-text-color: rgb(10, 10, 10); /* Цвет текста кнопок в хедере (Reel, Work, etc.) */
    --hover-color: rgb(39, 39, 39);      /* Цвет элемента при наведении курсора (например, для кнопок хедера) */
    --footer-title-color: #ffffff;       /* Цвет заголовка/основной подписи в старом футере (возможно, уже не используется в новом) */
    --footer-bg-color: #1e1e1e;          /* Цвет фона для старого футера (возможно, уже не используется в новом) */
    --footer-text-color: #fff;           /* Основной цвет текста в старом футере (возможно, уже не используется в новом) */
    --dark-bg-color: rgba(0, 0, 0, 0.8); /* Цвет темного фона/оверлея (например, на карточках портфолио при наведении) */
    --grid-title-1-color: #b9d4ec;       /* Цвет первой строки заголовка на карточке портфолио */
    --grid-title-2-color: #ffffff;       /* Цвет второй строки заголовка на карточке портфолио */

/* Цвета для фичи выделения */
    --selection-bg-color: #b9d4ec;       /* Цвет фона при выделении текста */
    --selection-text-color: #2f3f52;     /* Цвет текста внутри выделения */

/* Шрифты */
    --base-font-size: 5.5vw;             /* Базовый размер для самых крупных заголовков (зависит от ширины окна) */
    --small-font-size: calc(var(--base-font-size) * 0.4375); /* Размер для подзаголовков (рассчитывается от базового) */
    --small-font-size-2: calc(var(--base-font-size) * 0.29); /* Размер для мелкого текста, описаний (рассчитывается от базового) */

/* Отступы и размеры */
/* --container-padding: 0 50px; */   /* Задает горизонтальные отступы для основного контейнера .container (вертикальные 0, горизонтальные 50px) - Возможно, лучше определять padding непосредственно в .container */
    --gap-between-block: 5%;             /* Пространство (отступ) между крупными блоками/секциями */
    --gap-between-btn: 10px;             /* Пространство (отступ) между кнопками (например, в хедере) */
    --gap-social: 25px;                  /* Пространство (отступ) между иконками социальных сетей */
    --border-radius: 10px; 
    --max-width-header: 2000px;          /* Максимальная ширина контейнера !В!  хедерЕ */



    --plyr-control-icon-size: 25px;




/* Параметры Canvas для анимации глаз */
    --eye-canvas-width: 60px;            /* Ширина элемента <canvas> с глазами */
    --eye-canvas-height: 30px;           /* Высота элемента <canvas> с глазами */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* === Стили для выделения текста === */
::selection {
    background-color: var(--selection-bg-color);
    color: var(--selection-text-color);
    text-shadow: none;
}
::-moz-selection {
    background-color: var(--selection-bg-color);
    color: var(--selection-text-color);
    text-shadow: none;
}

/*--------------------------------------------------------------
# Стили для .container
--------------------------------------------------------------*/
.container {
    width: 100%;
    max-width: var(max-width-header);
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-right: 50px;
  }
  @media (max-width: 768px) {
    .container { padding-left: 30px; padding-right: 30px; }
  }
  @media (max-width: 480px) {
    .container { padding-left: 15px; padding-right: 15px; }
  }

/*--------------------------------------------------------------
# Стили для блока "Motion Work"
--------------------------------------------------------------*/
.work-intro {
    margin-top: 50px;
    max-height: 500px;
    z-index: 1;
}

.work-items {
    display: flex;
    gap: 30px;
    padding-left: 6%;
    align-items: center;
}

.work-rect-img {
    width: 100px;
    height: 100px;
    background-color: black;
}

.work-title {
    font-family: "brandon-grotesque", sans-serif;
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}