/* style.css ------------------------------------------------------------------------------------------------------------ */
:root {
  color-scheme: light dark;
}
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
}
/* font ----------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Ubuntu-Medium";
  font-style: normal;
  font-weight: normal;
  src: url(../font/Ubuntu_Medium.ttf);
}
@font-face {
  font-family: "Ubuntu-Regular";
  font-style: normal;
  font-weight: normal;
  src: url(../font/Ubuntu_Regular.ttf);
}
@font-face {
  font-family: "Ubuntu-Light";
  font-style: normal;
  font-weight: normal;
  src: url(../font/Ubuntu_Light.ttf);
}

/* login ---------------------------------------------------------------------------------------------------------------- */

.login {
  margin: 0;
  padding: 0;
	width: 100vw;
	height: 100vh;
  display: flex;            /* флекс-контейнер */
	flex-direction: column;   /* направление осей по умолчанию */
  flex-wrap: wrap;          /* элементы переносятся на новый ряд */
  justify-content: center;  /* элементы выстраиваются по центру родителя */
	align-items: center;      /* элементы выстраиваются по центру поперечной оси */
}

.login_box {
  margin: 0;
  padding: 42px 32px 37px;  /* хороший визуал (стандарт 32px)  */
  width: 358px;
  display: block;
  border-style: solid;
  border-width: 1px;
}

.login_input {
  margin: 0 0 23px;
  padding: 14px 17px 14px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  outline: none;
  cursor: text;
  transition: border 0.3s ease;
  font-family: 'Ubuntu-Light', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
}

.login_button {
  margin: 0;
  padding: 14px 17px 14px;
  border: none;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: 'Ubuntu-Light', sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
}

.login_reset-password {
  margin-left: 80px;
  text-decoration: none;
  outline: none;
  transition: color 0.3s ease;
  font-family: 'Ubuntu-Light', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
}

.error_auth {
  border-style: solid;
  border-width: 2px;
}

/* wrap ----------------------------------------------------------------------------------------------------------------- */

.wrap {
  margin: 0;
  padding: 0;
  font-size: 0;
}

/* sidebar -------------------------------------------------------------------------------------------------------------- */

.sidebar {
  margin: 0;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  box-sizing: border-box;
  overflow: auto;
  cursor: auto;
}
  @media (orientation: landscape) {
    .sidebar {
      padding: 40px 1px 40px 40px;  /* верх,право,низ,лево (начальное значение 40px 32px 40px*/
      width: 410px;
      display: block;
    }
  }
  @media (orientation: portrait), (max-width: 744px) {
    .sidebar {
      padding: 64px 64px 64px;
      width: 80%;
      display: none;
    }
  }

.sidebar_show {
  display: block;
}

.sidebar_button-open {
  margin: 0;
  padding: 0;
  width: 50px;
  height: 100px;
  display: none;
  position: fixed;
  top: 50vh;
  left: 0;
  z-index: 2;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: rgba(0,0,0,0); /* прозрачный фон */
}
    @media (orientation: landscape) and (max-width: 744px) {
      .sidebar_button-open {
        display: block;
      }
    }
    @media (orientation: portrait) {
      .sidebar_button-open {
        display: block;
      }
    }

.sidebar_button-open:focus,
.sidebar_button-open:hover {
    background-position: -50px 0;
}

.sidebar_button-exit {
  margin: 0;
  padding: 0;
  width: calc(100% - 80%);
  height: 100vh;
  display: none;
  position: fixed;
  top: 0; /* 50vh */
  right: 0;
  z-index: 3;
  border: none;
  outline: none;
  cursor: pointer;
}
    @media (orientation: landscape) and (max-width: 744px) {
      .sidebar_button-exit {
        display: block;
      }
    }
    @media (orientation: portrait) {
      .sidebar_button-exit {
        display: block;
      }
    }

/* topic ---------------------------------------------------------------------------------------------------------------- */

.topic {
  margin: 0 0 32px;
  padding: 0;
  width: 100%;
  display: block;
}

.topic_box {
  margin: 0;
  padding: 0;
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
}

.topic_box-on {
  border-top-style: solid;
  border-top-width: 1px;
}

.topic_link {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  border: none;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Ubuntu-Regular', sans-serif;
  font-style: normal;
  font-weight: normal;
}
    @media (orientation: landscape) {
      .topic_link {
        padding: 29px 0 29px;
        font-size: 19px;
      }
    }
    @media (orientation: portrait) {
      .topic_link {
        padding: 58px 0 58px;
        font-size: 38px;
      }
    }

/* search_form ---------------------------------------------------------------------------------------------------------- */

.search_form {
  margin: 0 0 32px;
  padding: 0;
  width: 100%;
  display: block;
}

.search_input {
  margin: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px 0 0 5px;
  outline: none;
  vertical-align: middle;
  font-family: 'Ubuntu-Regular', sans-serif;
  font-style: normal;
  font-weight: normal;
}
    @media (orientation: landscape) {
      .search_input {
        padding: 0 20px 0;
        width: calc(100% - 53px);
        height: 53px;
        font-size: 19px;
      }
    }
    @media (orientation: portrait) {
      .search_input {
        padding: 0 20px 0;
        width: calc(100% - 70px);
        height: 70px;
        font-size: 38px;
      }
    }

.search_button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-top-style: solid;
  border-top-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-radius: 0 5px 5px 0;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
}
    @media (orientation: landscape) {
      .search_button {
        width: 53px;
        height: 53px;
      }
    }
    @media (orientation: portrait) {
      .search_button {
        width: 70px;
        height: 70px;
      }
    }

.search_button:hover,
.search_button:focus {
    background-position: -52px 0;
}

/* movie ---------------------------------------------------------------------------------------------------------------- */

.movie {#background-color: #c3c3c3;
  display: flex; /* отображать как flex элемент */
  flex-direction: row; /* направление осей: значение по умолчанию */
  flex-wrap: wrap; /* элементы переносятся на новый ряд */
  justify-content: space-evenly; /* выравнивать флекс-элементы внутри флекс-контейнера: одинаковое расстояние по всем осям */
}

  @media (orientation: landscape) {
    .movie {
      margin: 0 0 0 410px;
      padding: 20px 20px 20px;
      max-width: calc(100% - 410px);
      min-width: 294px;
    }
  }
  @media (orientation: portrait), (max-width: 744px) {
    .movie {
      margin: 20px 30px 20px;
      max-width: 100%;
      min-width: 294px;
    }
  }

/* sticker -------------------------------------------------------------------------------------------------------------- */

.sticker {
  margin: 20px 20px 20px;
  padding: 20px 20px 20px;
  width: 254px; /* 214px рабочая ширина */
  height: 440px; /* 400px рабочая высота */
  box-sizing: border-box;
  display: block;
  border: none;
  outline-style: solid;
  outline-width: 1px;
  text-decoration: none;
  cursor: pointer;
}

.sticker:focus,
.sticker:hover {
  outline-style: solid;
  outline-width: 1px;
}

.sticker_box-poster {#outline: 1px solid #5ceb58;
  margin: 0;
  padding: 0;
  width: 214px;
  height: 310px;
  display: block;
  overflow: hidden;
}

.sticker_poster {
  width: 214px;
  height: 310px;
}

.sticker_box-title {#outline: 1px solid #5ceb58;
  margin: 0;
  padding: 0;
  width: 214px;
  height: 70px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}

.sticker_title {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Ubuntu-Medium', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
}

.sticker_box-comment {#outline: 1px solid #80a0cb;
  margin: 0;
  padding: 0;
  width: 214px;
  height: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}

.sticker_comment {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Ubuntu-Light', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
}

/* view ----------------------------------------------------------------------------------------------------------------- */

.view {#outline: 1px solid #ffffff;
  display: block;
}
    @media (orientation: landscape) {
      .view {
        margin: 0 0 0 410px; /* верх,право,низ,лево */
        padding: 40px 40px 40px;
        max-width: calc(100% - 410px);
        min-width: 294px;
      }
    }
    @media (orientation: portrait), (max-width: 744px) {
      .view {
        margin: 0;
        max-width: 100%;
        min-width: 294px;
      }
    }

/* player_js ------------------------------------------------------------------------------------------------------------ */

.player_js {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  z-index: 1;
  background: #000000;
}
    @media (orientation: landscape) {
      .player_js {
        width: 70%;
      }
    }
    @media (orientation: portrait), (max-width: 744px) {
      .player_js {
        width: 100%;
      }
    }







/* скроллбар ------------------------------------------------------------------------------------------------------------ */

/* Применимо в Firefox */
# body {
#  scrollbar-width: thin;        /* управляет шириной полосы прокрутки: auto, thin, none */
#  scrollbar-color: green black; /* задаёт цвет бегунка и дорожки: thumb color, track color */
# }

/* Применимо в WebKit-браузерах */
# ::-webkit-scrollbar { /* вся полоса */
#  width: 1px;
#  height: 12px;
# }

# ::-webkit-scrollbar-track { /* фон дорожки */
#  background: #2583d6;
# }

# ::-webkit-scrollbar-thumb { /* сам бегунок */
#  background-color: #888;
#  border-radius: 6px;
#  border: 2px solid #f0f0f0;
# }

# ::-webkit-scrollbar-thumb:hover {
#  background-color: #555;
# }














/* max 2560px (больше в 0,7 раз) */

@media (orientation: landscape) and (max-width: 2560px) {
  
}

/* max 1980px (точка отсчета) */

@media (orientation: landscape) and (max-width: 2560px) {
  
}


/* max 1280px  (меньше в 1,5 раз)*/
@media (orientation: landscape) and (max-width: 1680px) {
  .login_box {
    margin: 0;
    padding: 28px 22px 25px;  /* хороший визуал (стандарт 32px) 42 32 37  */
    width: 238px;             /* 358 */
  }

  .login_input {
    margin: 0 0 15px; /* 0 0 23 */
    padding: 9px 11px 9px;  /* 14 17 14 */
    border-width: 1px;
    border-radius: 4px; /* 6 */
    font-size: 14px; /* 22 */
  }

  .login_button {
    margin: 0;
    padding: 9px 11px 9px;/* 14 17 14 */
    border-radius: 4px;/* 6 */
    font-size: 15px; /* 22 */
  }

  .login_reset-password {
    margin-left: 52px;/* 80 */
    font-size: 12px;/* 18 */
  }
}