html {
  scroll-behavior: smooth;
}

body {
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.7;
    margin: 0;
    background-image: url("/img/back.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@font-face { font-family: "bold2"; src: url("fonts/Roboto-SemiBold.woff2") format("woff2"), url("fonts/Roboto-SemiBold.woff") format("woff"); }

pre {
  border: 3px solid #4CAF50; /* зелёная рамка */
  border-radius: 8px;        /* скруглённые углы */
  background-color: #1e1e1e; /* тёмный фон */
  color: #fff;               /* белый текст */
  overflow-x: auto;          /* прокрутка по горизонтали, если строка длинная */
  margin: 130px auto;
  display: grid;
  font-size: 115%;
  text-align: left;
}

button:focus {
    outline: none; /* убираем стандартное кольцо фокуса */
}

details {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 15px;
      overflow: hidden;
      font-family: sans-serif;
      margin: 0 0 20px 0;
    }

summary {
      list-style: none;
      cursor: pointer;
    }
    
summary::-webkit-details-marker {
      display: none;
    }
    
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}

.h2, h2 {
    font-size: 2rem;
}

.h3, h3 {
    font-size: 1.75rem;
}

a {
    text-decoration: none;
}


*, :after, :before {
    box-sizing: border-box;
}

.layout {
    margin-top: 20px;
    overflow: hidden;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    color: #fff;
}

@media (min-width: 576px)  { .layout { max-width: 540px; } }
@media (min-width: 768px)  { .layout { max-width: 720px; } }
@media (min-width: 992px)  { .layout { max-width: 960px; } }
@media (min-width: 1200px) { .layout { max-width: 1140px; } }

.header {
    width: 100%;
    height: 100vh;
    position: relative;
    color: #FFF;
}

.header__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
	height: calc(100vh - 196px);
    min-height: 577px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media (max-width: 500px)  { 
    .header__content { 
        min-height: 400px;
        height: 10px;
    } 
}
    
.header__title {
    font-size: 4.5rem;
    line-height: 1;
    margin: 0;
}

@media (max-width: 991.98px) {
    .header__title {
        font-size: 2rem;
    }
}
    
.header__subtitle {
    font-size: 54px;
}

@media (max-width: 991.98px) {
    .header__subtitle {
        font-size: 2rem;
    }
}

.header__actions {} /* пока пустой */

.header__date {
    font-size: 12px;
}

.header__btn {
    position: absolute;
    bottom: 75px;
    width: 200px;
    margin: auto;
    display: block;
    cursor: pointer;
    left: 0;
    right: 0;
    text-transform: uppercase;
    border-width: 2px;
    border: 1px solid transparent;
    line-height: 1.5;
    border-radius: 0.25rem;
    display: inline-block;
    border-color: #fff;
    background: transparent;
    color: #fff;
    transition: all 0.3s ease;
    padding: 10px 20px;
}

.header__btn:hover {
    background: #fff;
    color: #000;
    transition: all 0.3s ease;
}

.filter-panel {
    color: #FFF;
}

.filter-panel__title { 
    text-align: center;
    color: #FFF;
    text-transform: uppercase;
    font-weight: normal;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    clear: both;
    margin: 0 0 150px 0;
}

.filter-panel__control {} /* пока пустой */

.filter-panel__subtitle {} /* пока пустой */

.filter-panel__list {
    padding-top: 25px;
}

.filter-panel__btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 0.25rem;
  margin: 7px 1.5px 0 1.5px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.filter-panel__btn:hover {
  background-color: #ddd;
}

.u-green {
  background-color: #bfebc1;
}

.u-red {
  background-color: #ff8077;
}

.u-phiolet {
  background-color: #d2a8ff;
}

.u-pink {
  background-color: #ffb8b8;
}

.u-grey {
  background-color: #c9d1d9;
}

.u-orange {
  background-color: #ffcfa8;
}

.filter-panel__btn--active {
    color: white;
    background-color: #212046;
}

.filter-results {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center!important;
    justify-content: center !important;
    margin: 50px 0 50px 0;
}

.filter-results__item {
  display: none;
}

.filter-results__item--visible {
  display: block;
}

.filter-results__tag {
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px solid #b1d8ff;
  color: #000;
  user-select: none;
    }

    .filter-results__spoiler {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px 8px 10px;
      background: #f9f9f9;
    }

    .filter-results__toggle {
      padding: 8px 16px;
      border: 1px solid #666;
      border-radius: 5px;
      background: #eee;
      cursor: pointer;
      user-select: none;
      color: #000;
    }
    
    .filter-results__toggle::after { content: attr(data-closed); }
details[open] .filter-results__toggle::after { content: attr(data-open); }
    .filter-results__number {
      padding: 8px 16px;
      border: 1px solid #666;
      border-radius: 5px;
      background: #eee;
      cursor: pointer;
      user-select: none;
      color: #000;
    }
    
    .filter-results__left {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .filter-results__right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

    .filter-results__content {
      text-align: left;
      padding: 15px;
      background: #fff;
    }
    
    .filter-results__code {
    margin: 0 0 0 0;
    max-width: none;
    }
    
.filter-results__open {
	border: 1px solid transparent;
    line-height: 1.5;
    border-radius: 0.25rem;
    display: inline-block;
	color: #fff;
    background-color: #212046;
    border-color: #6c757d;
	padding: 10px 20px;
}

.filter-results__open:hover {
    background-color: #5a6268;
    cursor: pointer;
}

.content {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  margin-top: 100px;
  color: #fff;
}

.content__back {
	border: 1px solid transparent;
    line-height: 1.5;
    border-radius: 0.25rem;
    display: inline-block;
	color: #fff;
    background-color: #212046;
    border-color: #6c757d;
	padding: 10px 20px;
}

.content__back:hover {
    background-color: #5a6268;
    cursor: pointer;
}

.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFF;
    padding-top: 15px;
}

.footer__link {
    color: #0011ff
}

.u-small-line {
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: scaleY(0.5);
    transform-origin: 0 0;
    display: block;
    margin: 20px 0 10px 0;
}