body {
}

h1 {
    font-style: italic;
    font-size: min(55px, 4.5vw);
    display: block;
    margin-left: 0;
    margin-right: 0;
}

img {
  height: auto;
  width: 95%;
  /* еще больше контроля с max-width */
  max-width: 920px;
}

aside {
    float: up;
    background: #0d6efd;
    width: 100%;
    padding: 0.5%;
    height: 15%;
    color: #fff;
    border: 2px solid #800000;
}

aside .logo {
    font-size: 0px;
    margin-left: 0px;
    font-weight: boult;
    position: relative;
    top: 1px;
}

aside button {
    margin-left: 0px;
    }

main {
min-height: 100vh;
}

main .features {
    float: left;
    background: #40E0D0;
    width: 100%;
    padding: 1%;
    min-height: 80vh;
    text-align: center;
    margin-top: 0px;
    color: #000;
    border-up: 3px solid #800000;
}

main .featuress {
    font-style: italic;
    text-align: center;
}

main form {
    text-align: center;
    margin-left: 0%;
    width: 100%;
    margin-top 20px;
}

 * {
      touch-action: manipulation;
  }

.btn-custom {
    margin: 5px 7px;
    background-color: #250EEC; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 4px 6px 4px 6px; /* Отступы */
    border: none; /* Убираем границу */
    border-radius: 12px; /* Скругление углов */
    font-size: var(--btn-font-size, min(18px, 3.4vw)); /* Размер шрифта */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Плавный переход */
    margin: 0 7px;  /* Отступы по 7 пикселей с обеих сторон */
    text-decoration: none;
    display: inline-block; /* чтобы работали отступы и размеры */
    text-align: center;
}

.bt-m {
   --btn-font-size: min(14px, 2.6vw);  /* class="btn-custom bt-m" -будет маленькая кнопка */
   }

.btn-custom:hover {
    background-color: #760EEC; /* Цвет фона при наведении */
    transform: scale(1.1); /* Немного увеличиваем размер кнопки при наведении */
}

.btn-custom:disabled {
            cursor: not-allowed; /* Указываем, что кнопка отключена */
            transform: none; /* Убираем эффект увеличения при наведении */
            opacity: 0.5; /* Делаем кнопку полупрозрачной */
        }



.btn-custom-rm {    /* Красная, маленькая */
    background-color: red; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 4px 6px 4px 6px; /* Отступы */
    border: none; /* Убираем границу */
    border-radius: 10px; /* Скругление углов */
    font-size: min(14px, 2.6vw); /* Размер шрифта */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Плавный переход */
    margin: 0 5px;  /* Отступы по 7 пикселей с обеих сторон */
}

.btn-custom-rm:hover {
    background-color: #BF0D3C; /* Цвет фона при наведении */
    transform: scale(1.2); /* Немного увеличиваем размер кнопки при наведении */
}


.btn-chose {
    background-color: transparent; /* Цвет фона  #5B25AC */
    color: black; /* Цвет текста */
    padding: 3px 5px 3px 5px; /* Отступы */
    border: none; /* Убираем границу */
    border-radius: 8px; /* Скругление углов */
    font-size: min(18px, 2.8vw); /* Размер шрифта */
    cursor: pointer; /* Курсор при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Плавный переход */
}

.btn-chose:hover {
    background-color: transparent; /* Цвет фона при наведении t#491B8D */
    box-shadow: 0 0 0 1px black; /* Обрамление при наведении */
    transform: scale(1.08); /* Немного увеличиваем размер кнопки при наведении */
}

.spinner {
  border: 4px solid #f3f3f3;      /* Светлый фон */
  border-top: 4px solid #3498db;  /* Синий верх */
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}