:root {
  --bg-color: #fff;
  --text-color: #000;
  --bg_fload_sq_fon_25: rgba(100, 100, 100, 0.1);
  --bg_fload_sq_fon_50: rgba(100, 100, 130, 0.2);
  --bg_fload_sq_fon_75: rgba(100, 100, 100, 0.1);
  --ten_ikonki_header:  drop-shadow(0 0 2px #acc)      
                         drop-shadow(0 0 3px #add)   
                         drop-shadow(0 0 6px #aff);
  --ten_ikonki_header_0:  drop-shadow(0 0 2px #9bb)      
                          drop-shadow(0 0 3px #add)   
                          drop-shadow(0 0 6px #aff);
  --ten_ikonki_header_25:  drop-shadow(0 0 2px #9bb)      
                           drop-shadow(0 0 4px #add)   
                           drop-shadow(0 0 6px #aff);
  --ten_ikonki_header_50:  drop-shadow(0 0 2px #9bb)      
                           drop-shadow(0 0 4px #add)   
                           drop-shadow(0 0 7px #aff);
  --ten_ikonki_header_75:  drop-shadow(0 0 3px #9bb)      
                           drop-shadow(0 0 4px #add)   
                           drop-shadow(0 0 8px #aff);
  --ten_ikonki_header_100:  drop-shadow(0 0 3px #9bb)      
                            drop-shadow(0 0 5px #add)   
                            drop-shadow(0 0 9px #aff);
  --bordrer_input: 2px solid #555;
  --bg_input: #fff;
  --ten_input: 2px 2px 10px rgba(110,110,110,0.9);
  --ten_btn_form: 2px 2px 10px rgba(70,80,80,0.7);
  --cveta_linii_header: linear-gradient(
  to right,
  #b44, /* Средний гранатовый */
  #4a7157, /* Средний зелёный */
  #5d3a9b, /* Фиолетовый аметист */
  #0a5c5c, /* Изумрудный */
  #5a73d5, /* Сапфировый */
  #769, /* Тёмно‑фиолетовый агат */
  #5b8869, /* Тёплый зелёный */
  #6c9f7b, /* Светло‑зелёный */
  #7db68d, /* Мятно‑зелёный */
  #4dd0e1 /* Пастельно‑зелёный */
);
  --tolshina_linii_header: 2px;
  --bg_bukv: linear-gradient(
        90deg,
         #992424, #0a5c5c, #4dd0e1
      );
  --display_pic_update_w: none;
  --display_pic_update_b: block;
  --pic_color_update_vopros: #46c;
  --pic_color_update_vopros_no_focus: #666;
  --color_placeholder: #ddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000;
    --text-color: #CFCFCF;
    --bg_fload_sq_fon_25: rgba(100, 100, 100, 0.15);
    --bg_fload_sq_fon_50: rgba(100, 100, 130, 0.3);
    --bg_fload_sq_fon_75: rgba(100, 100, 100, 0.15);
    --ten_ikonki_header:  drop-shadow(0 0 2px #002222)      /* голубой */
                         drop-shadow(0 0 3px #004444)   /* ярче голубой */
                         drop-shadow(0 0 6px #00aaaa);
    --ten_ikonki_header_0:  drop-shadow(0 0 2px #022)      
                            drop-shadow(0 0 3px #044)   
                            drop-shadow(0 0 6px #0aa);
    --ten_ikonki_header_25:  drop-shadow(0 0 2px #022)      
                             drop-shadow(0 0 4px #044)   
                             drop-shadow(0 0 6px #0aa);
    --ten_ikonki_header_50:  drop-shadow(0 0 2px #022)      
                             drop-shadow(0 0 4px #044)   
                             drop-shadow(0 0 7px #0aa);
    --ten_ikonki_header_75:  drop-shadow(0 0 3px #022)      
                             drop-shadow(0 0 4px #044)   
                             drop-shadow(0 0 8px #0aa);
    --ten_ikonki_header_100:  drop-shadow(0 0 3px #022)      
                              drop-shadow(0 0 5px #044)   
                              drop-shadow(0 0 9px #0aa);
    --bordrer_input: 2px solid #555;
    --bg_input: #000;
    --ten_input: 2px 2px 10px rgba(80,80,80,0.7);
    --ten_btn_form: 2px 2px 10px rgba(80,80,80,0.5);
    --cveta_linii_header: linear-gradient(
        to right,
        #ff0000, /* Красный */
        #ff7f00, /* Оранжевый */
        #ffff00, /* Жёлтый */
        #00ff00, /* Зелёный */
        #0000ff, /* Синий */
        #4b0082, /* Индиго */
        #8b00ff  /* Фиолетовый */
        );
    --tolshina_linii_header: 1px;
    --bg_bukv: linear-gradient(
        90deg,
         #ff0000, #00ff00, #0044ff
      );
    --display_pic_update_w: block;
    --display_pic_update_b: none;
    --pic_color_update_vopros: #57b;
    --pic_color_update_vopros_no_focus: #666;
    --color_placeholder: #444;
  }
}
html
{
    margin: 0px;
    font-family: arial;
    transition-duration: 1s;
    transition-property: all;
    max-height: 150vh;
    background-color: var(--bg-color);
    color: var(--text-color);
}
#fade-in-element {
        opacity: 0;
        animation: fadeIn 1s ease-in 1s forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
.body
{
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    transition-property:all;
    transition-duration: 1s;
    min-height: 100vh;
    text-align: center;
    align-items:center;
}

.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(5, 20%);
  gap: 0;
  z-index: -1;
}

/* Разные задержки и анимации для каждого */
@keyframes float_sq_fon {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.3;
    background: rgba(0, 0, 50, 0.02);
  }
  25% {
    transform: translateY(0px) translateZ(5px) rotate(1deg) scale(1.01);
    opacity: 0.6;
    background: var(--bg_fload_sq_fon_25);
  }
  50% {
    transform: translateY(10px) translateZ(10px) rotate(0deg) scale(1.02);
    opacity: 0.6;
    background: var(--bg_fload_sq_fon_50);
  }
  75% {
    transform: translateY(0px) translateZ(5px) rotate(-1deg) scale(1.01);
    opacity: 0.6;
    background: var(--bg_fload_sq_fon_75);
  }
}
.square {
  background: rgba(128, 128, 128, 0.01);
  border-radius: 2px;
  filter: blur(1px);
  opacity: 0.3;
  transform: scale(1);
  /* Каждый квадрат получит свою анимацию */
}
/* Назначаем разные анимации по индексу */
.square:nth-child(1) {
  animation: float_sq_fon 12s ease-in-out infinite;
  animation-delay: 0s;
}

.square:nth-child(2) {
  animation: float_sq_fon 14s ease-in-out infinite;
  animation-delay: 1.6s;
}

.square:nth-child(3) {
  animation: float_sq_fon 17s ease-in-out infinite;
  animation-delay: 2.4s;
}

.square:nth-child(4) {
  animation: float_sq_fon 19s ease-in-out infinite;
  animation-delay: 4.6s;
}

.square:nth-child(5) {
  animation: float_sq_fon 17.6s ease-in-out infinite;
  animation-delay: 3s;
}

.square:nth-child(6) {
  animation: float_sq_fon 14.4s ease-in-out infinite;
  animation-delay: 1.2s;
}

.square:nth-child(7) {
  animation: float_sq_fon 13.4s ease-in-out infinite;
  animation-delay: 7.6s;
}

.square:nth-child(8) {
  animation: float_sq_fon 11.6s ease-in-out infinite;
  animation-delay: 0.8s;
}

.square:nth-child(9) {
  animation: float_sq_fon 12.6s ease-in-out infinite;
  animation-delay: 4.2s;
}

.square:nth-child(10) {
  animation: float_sq_fon 12.2s ease-in-out infinite;
  animation-delay: 1.8s;
}

.square:nth-child(11) {
  animation: float_sq_fon 15.8s ease-in-out infinite;
  animation-delay: 6.4s;
}

.square:nth-child(12) {
  animation: float_sq_fon 16.8s ease-in-out infinite;
  animation-delay: 3.2s;
}

.square:nth-child(13) {
  animation: float_sq_fon 19.2s ease-in-out infinite;
  animation-delay: 1s;
}

.square:nth-child(14) {
  animation: float_sq_fon 17.4s ease-in-out infinite;
  animation-delay: 2.6s;
}

.square:nth-child(15) {
  animation: float_sq_fon 14.8s ease-in-out infinite;
  animation-delay: 5.4s;
}

.square:nth-child(16) {
  animation: float_sq_fon 12.6s ease-in-out infinite;
  animation-delay: 2s;
}

.square:nth-child(17) {
  animation: float_sq_fon 11.6s ease-in-out infinite;
  animation-delay: 0.2s;
}

.square:nth-child(18) {
  animation: float_sq_fon 13.2s ease-in-out infinite;
  animation-delay: 2.8s;
}

.square:nth-child(19) {
  animation: float_sq_fon 15s ease-in-out infinite;
  animation-delay: 7.8s;
}

.square:nth-child(20) {
  animation: float_sq_fon 16s ease-in-out infinite;
  animation-delay: 3.4s;
}

.square:nth-child(21) {
  animation: float_sq_fon 15.4s ease-in-out infinite;
  animation-delay: 4.6s;
}

.square:nth-child(22) {
  animation: float_sq_fon 13s ease-in-out infinite;
  animation-delay: 3.8s;
}

.square:nth-child(23) {
  animation: float_sq_fon 11.8s ease-in-out infinite;
  animation-delay: 3.2s;
}

.square:nth-child(24) {
  animation: float_sq_fon 12.4s ease-in-out infinite;
  animation-delay: 2.4s;
}

.square:nth-child(25) {
  animation: float_sq_fon 14.8s ease-in-out infinite;
  animation-delay: 0.8s;
}
.header
{   
    position: absolute;
    display: flex;
    flex-direction:column;
    text-align: center;
    justify-content:space-between;
    align-items: center;
    min-width: 100vw;
    top: 0px;
    left: 0px;
    gap: initial;
    z-index: 10;
}
.content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1010;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1.5s ease, transform 1.5s ease;
    }
    .content.show {
      opacity: 1;
      transform: translateY(0);
    }
    /* Контейнер волны */
    .wave-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 1010;
    }

    .wave {
      position: absolute;
      bottom: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      border-radius: 50%;
      background: rgba(30, 144, 255, 0.15);
      transform: rotate(45deg);
      animation: ripple 3.5s ease-out forwards;
      box-shadow: 0 0 80px rgba(135, 206, 250, 0.4);
    }

    .wave:nth-child(2) {
      background: rgba(70, 130, 180, 0.1);
      animation-delay: 0.3s;
    }

    .wave:nth-child(3) {
      background: rgba(173, 216, 230, 0.1);
      animation-delay: 0.8s;
    }

    .wave:nth-child(4) {
      background: rgba(100, 149, 237, 0.15);
      animation-delay: 1.2s;
    }

    @keyframes ripple {
      0% {
        transform: rotate(0deg) scale(0);
        opacity: 1;
      }
      70% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
      }
      100% {
        transform: rotate(0deg) scale(1.2);
        opacity: 0;
      }
    }

    /* Радужные пузырьки */
    .bubble {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: linear-gradient(
        45deg,
        #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff00ff
      );
      background-size: 400% 400%;
      mask: radial-gradient(circle, white 50%, transparent 55%); /* Прозрачность внутри */
      -webkit-mask: radial-gradient(circle, white 50%, transparent 55%);
      opacity: 0;
      filter: hue-rotate(0deg);
      animation: rainbowPulse 4s ease-in-out infinite, float 6s ease-in-out forwards;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }
    @keyframes rainbowPulse {
      0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
      }
      100% {
        background-position: 100% 50%;
        filter: hue-rotate(360deg);
      }
    }
    @keyframes float {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }
      20% {
        opacity: 0.8;
      }
      80% {
        opacity: 0.4;
      }
      100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
      }
    }
.text_decore_non:hover
{
    cursor:default;
}
.div_up_wrd_logo
{
    display: flex;
    flex-direction:row;
    text-align:left;
    align-items:flex-start;
    width: 100vw;
}
.pic_brain_up_wrd_logo
{
    display: none;
    height: 1em;
    min-height:60px;
    max-height:128px;
    position:fixed;
    right: 05vw;
    top: 20px;
    cursor: pointer;
    filter: var(--ten_ikonki_header);   /* максимальное свечение animation: pulse-glow 3s infinite alternate ease-in-out; */
    animation: pulse-glow 3s infinite alternate ease-in-out;
}
.pic_brain_up_wrd_logo:hover
{
  animation: pulse-glow 0.4s infinite alternate ease-in-out;
}
@keyframes pulse-glow {
  0% {
    filter: var(--ten_ikonki_header_0);
  }
  25% {
    filter: var(--ten_ikonki_header_25);
  }
  50% {
    filter: var(--ten_ikonki_header_50);
  }
    75% {
    filter: var(--ten_ikonki_header_75);
  }
  100% {
    filter: var(--ten_ikonki_header_100);
  }
}
.div_down_wrd_logo
{
    display: flex;
    flex-direction:row;
    text-align:right;
    align-items:flex-end;
    margin: 0px;
    margin-top: 25px;
    margin-left: 2vw;
}
.m_in_logo, .e_in_logo, .n_in_logo, .e2_in_logo, .d_in_logo, .g_in_logo, .e3_in_logo, .r_in_logo, .p_in_logo, .k_in_logo
{
    text-decoration: none;
    color: var(--text-color);
    font-size:2em;
    margin: 0px;
}
.m_in_logo:hover, .e_in_logo:hover, .n_in_logo:hover, .e2_in_logo:hover, .d_in_logo:hover, .g_in_logo:hover, .e3_in_logo:hover, .r_in_logo:hover, .p_in_logo:hover, .k_in_logo:hover
{
    color: #5555ff;
    background: var(--bg_bukv);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/*
.e_in_logo
{
    color: #ff5555;
}
.n_in_logo
{
    color: #ff7f55;
}
.e2_in_logo
{
    color: #ffff55;
}
.d_in_logo
{
    color: #55ff55;
}
.g_in_logo
{
    color: #5555ff;
}
.e3_in_logo
{
    color: #4b8082;
}
.r_in_logo
{
    color: #8b70ff;
}
*/
.g_in_logo
{
    background: var(--bg_bukv);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.div_line_header
{
}
.line_heder 
{
    width: 100vw;
    height: var(--tolshina_linii_header); /* Толщина линии */
    z-index: 1000; /* Чтобы была поверх остального контента */
    background: var(--cveta_linii_header);
    background-size: 200% 200%; /* Для плавной анимации */
    border: none;
    margin: 0px;
    animation: line_heder_gradient-shift 7s ease-in-out infinite;
}
@keyframes line_heder_gradient-shift {
    0% {
        background-position: 0% 0%;
        }
    50% {
        background-position: 100% 50%;
        }
    100%{
        background-position: 0% 100%;
        }
}
.div_for_opisanie_1
{
  font-size: 1.5em;
}
.div_for_opisanie_2
{
  display: flex;
  text-align: left;
  width: 60vw;
  margin: 0px;
  font-size: 1.3em;
}
.div_for_input_form
{
  margin: 0px;
  display: flex;
  flex-direction: column;
  width: 60vw;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.input_form
{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px;
}
.input_area
{
  width: 100%;
  height: 30vh;
  text-align: left;
  vertical-align:text-top;
  padding: 12px 16px;
  border: var(--bordrer_input);
  border-radius: 10px;
  box-sizing: border-box;
  outline: none;
  background-color: var(--bg_input);
  box-shadow: var(--ten_input);
  transition: all 0.3s ease;
  caret-color: #007bff;
  color: var(--text-color);
  font-size: 1.3em;
  direction: ltr; /* Направление текста слева направо */
  resize: vertical;
}
.input_area::placeholder 
{
  color: var(--color_placeholder);
  font-size: 0.9em;
}
.input_area:focus 
{
  border-color: #bbb;
  box-shadow: 0px 0px 5px rgba(110,110,110,0.5);
}
.input_area:not(:placeholder-shown) 
{
  transform: translateY(-5px);
  font-size: 1.3em;
  border: 4px solid #577;
  box-shadow: 0px 0px 7px rgba(110,170,170,0.5);
}
label 
{
  display: none;
  position: relative;
  top: -20px;
  left: -160px;
  transition: all 0.3s ease;
  color: #999;
}
.btn-surf
{
    display: inline-block;
    padding: 15px 35px;
    margin-top: 20px;
    width: 100%;
    min-width: 100px;
    background: linear-gradient(045deg, #555, #888);
    box-shadow: var(--ten_btn_form);
    border: 2px solid #666666;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 700;
    overflow: hidden;
    animation: sway 30s ease-in-out infinite;
    cursor: pointer;
}
  .btn-surf:hover {
    background: linear-gradient(45deg, #1e88e5, #1ea8e5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    animation: sway_hover 1s ease-in-out infinite;
    border: 2px solid #1e98e5;
  }
.btn-surf:active 
{
  background: linear-gradient(45deg, #1e88e5, #1ed8f5);
  box-shadow: 0px 0px 50px rgba(200, 250, 255, 0.9);
}
  @keyframes wave-1 {
    0% { background-position: left; }
    100% { background-position: right; }
  }

  @keyframes wave-2 {
    0% { background-position: right; }
    100% { background-position: left; }
  }
@keyframes sway {
  0%   { transform: translateX(0) translateY(0px) rotate(0); }
  25%  { transform: translateX(-5px) translateY(-5px) rotate(-0.5deg); }
  50%  { transform: translateX(5px) translateY(5px) rotate(0.5deg); }
  75%  { transform: translateX(-5px) translateY(-5px) rotate(-0.5deg); }
  100% { transform: translateX(0) translateY(0px) rotate(0); }
}
@keyframes sway_hover {
  0%   { transform: translateX(0) translateY(0px) rotate(0); }
  25%  { transform: translateX(-0px) translateY(-0px) rotate(-0.5deg); }
  50%  { transform: translateX(0px) translateY(0px) rotate(0.5deg); }
  75%  { transform: translateX(-0px) translateY(-0px) rotate(-0.5deg); }
  100% { transform: translateX(0) translateY(0px) rotate(0); }
}
.div_for_button_inoi_text
{
  position: relative;
  top: -120px;
  left: 27vw;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: block;
  transition: transform 0.3s ease;
}
.button_inoi_text
{
  background: none;
  border: none;
  font-size: 2em;
  animation: sway 50s ease-in-out infinite;
  cursor: pointer;
}
.button_inoi_text:hover .icon-refresh,
.button_inoi_text:hover .img_update_w {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.button_inoi_text:active .icon-refresh,
.button_inoi_text:active .img_update_w {
  animation: pressAndRotate 0.3s ease-out forwards;
}

@keyframes pressAndRotate {
  0% {
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    transform: scale(0.95) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}
.icon-refresh{
  width: 35px; /* размер иконки */
  height: 35px;
  fill: currentColor; /* цвет берётся из CSS-свойства color */
  color: var(--pic_color_update_vopros_no_focus); 
  transition: transform .3s ease; /* плавная анимация при вращении */
}
.icon-refresh:hover {
  width: 35px; /* размер иконки */
  height: 35px;
  fill: currentColor; /* цвет берётся из CSS-свойства color */
  color: var(--pic_color_update_vopros); 
  transition: transform .3s ease; /* плавная анимация при вращении */
}
--pic_color_update_vopros_no_focus
.footer
{
    display: flex;
    flex-direction:row;
    text-align:left;
    align-items:flex-end;
    position: absolute;
    bottom: 10px;
}

/* 1. Для экранов с aspect-ratio > 1:1, но ≤ 3:2 Планшеты*/
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
    .btn-surf
    {
        font-size: 1.5em;
    }
    .div_for_opisanie_2
    {
        width: 70vw;
    }
    .div_for_input_form
    {
       width: 70vw;
    }
    .div_for_button_inoi_text
    {
      top: -140px;
      left: 30vw;
    }
}
/* 2. Для экранов с aspect-ratio ≤ 1:1 (квадрат/вертикаль) Телефоны*/
@media (max-aspect-ratio: 1/1) {
  html
{
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
    .btn-surf
    {
        font-size: 1.5em;
    }
  .div_for_opisanie_2
    {
        width: 90vw;
    }
    .div_for_input_form
    {
       width: 90vw;
    }
    .div_for_button_inoi_text
    {
      top: -140px;
      left: 36vw;
    }
}