/* ====== Шрифты и базовые стили ====== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap');

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

body {
  color: #ffffff;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 16px;
  background-color: #111;
}

/* ====== Анимации ====== */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 0% 0%; }
  100% { background-position: 0% 50%; }
}

@keyframes wiremove {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px 1500px; }
}

/* ====== Структура страницы ====== */
.everything {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.wires {
  flex: 1; /* контент занимает всё пространство */
  background-image: url("../img/Index/bg.png");
  background-attachment: fixed;
  padding: 64px;
  animation: wiremove 22s linear infinite;
  text-align: center;
}

.container-border {
  width: 660px;
  padding: 4px;
  margin: auto;
  background-color: #222;
  border-radius: 25px;
  background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  box-shadow: 0px 2px 10px 0px #221133;
  transition: 0.3s ease-out;
  display: flex;
}

.container {
  overflow: hidden;
  background-color: #181818;
  padding: 24px;
  text-align: justify;
  border-radius: 25px;
}

.containcenter {
  margin: auto;
}

/* ====== Текстовые блоки ====== */
.textonly, .text2 {
  background-color: #222;
  border-radius: 5px;
  padding: 8px;
  font-weight: bold;
  box-shadow: 0px 1px 5px 0px #221133;
  border: 2px solid #eee;
  margin: auto auto 16px auto;
}

.textonly {
  width: 260px;
}

.text2 {
  width: 760px;
}

/* ====== Картинки каталога ====== */
.index {
  transform: scale(0.95);
  transition: 0.3s ease-out;
  filter: saturate(0) contrast(75%) brightness(0.8);
}

.index:hover {
  transform: scale(1);
  transition: 0.1s ease-out;
  filter: saturate(1) contrast(100%) brightness(1);
}