/* static/css/Home.css */

/* ======================================================
   1. БАЗОВЫЕ СБРОСЫ И ШРИФТЫ
   ====================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.4;
}

/* ======================================================
   2. ОСНОВНОЙ КОНТЕНТ (БУДЕТ “ЦЕНТРАЛИЗОВАН”)
   ====================================================== */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;          /* 16px */
  min-height: 80vh;       /* немного растягивает контейнер по высоте */
}

/* Заголовок */
.content h1 {
  font-size: 2rem;        /* чуть увеличили */
  margin-bottom: 1.5rem;  /* 24px */
  text-align: center;
  color: #333;
}

/* ======================================================
   3. БЛОК КНОПОК
   ====================================================== */
.content-buttons {
  display: flex;
  gap: 1rem;              /* 16px между кнопками */
  flex-wrap: wrap;        /* если не помещается горизонтально—переносим */
  justify-content: center;
  margin-bottom: 2rem;    /* 32px снизу для разделения с футером/другим контентом */
  width: 100%;
  max-width: 600px;       /* не растягиваем слишком широко */
}

/* Каждая кнопка-форма */
.content-buttons form {
  flex: 1 1 140px;        /* минимум 140px, но кнопка может расширяться */
  max-width: 200px;       /* не более 200px каждая */
}

/* Стилевое оформление самих кнопок */
.content-buttons button {
  width: 100%;            /* заполняем ширину родительского form */
  padding: 0.75rem 1rem;  /* 12px 16px */
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 0.375rem; /* 6px */
  font-size: 1rem;         /* около 16px */
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Эффект наведения и активное состояние */
.content-buttons button:hover {
  background-color: #0069d9;
  transform: translateY(-1px);
}

/* Когда кнопка нажата */
.content-buttons button:active {
  background-color: #005bb5;
  transform: translateY(0);
}

/* ======================================================
   4. МЕДИАЗАПРОСЫ ДЛЯ АДАПТИВНОСТИ
   ====================================================== */

/* Для экранов меньше 768px шириной */
@media (max-width: 768px) {
  .content {
    padding: 0.75rem;     /* 12px */
  }

  .content h1 {
    font-size: 1.75rem;   /* 28px */
    margin-bottom: 1rem;  /* 16px */
  }

  .content-buttons {
    gap: 0.75rem;         /* 12px между кнопками */
    margin-bottom: 1.5rem;/* 24px */
    max-width: 100%;
  }

  .content-buttons form {
    flex: 1 1 120px;      /* минимум 120px, но может быть уже */
    max-width: 180px;
  }

  .content-buttons button {
    padding: 0.6rem 0.8rem; /* 10px 12px */
    font-size: 0.95rem;     /* ~15px */
  }
}

/* Для очень узких экранов (меньше 480px) */
@media (max-width: 480px) {
  .content {
    padding: 0.5rem;      /* 8px */
  }

  .content h1 {
    font-size: 1.5rem;    /* 24px */
    margin-bottom: 0.75rem;/* 12px */
  }

  .content-buttons {
    flex-direction: column;/* кнопки в столбик */
    gap: 0.5rem;          /* 8px между ними */
    margin-bottom: 1rem;  /* 16px */
  }

  .content-buttons form {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .content-buttons button {
    padding: 0.5rem;      /* 8px */
    font-size: 0.9rem;    /* ~14px */
  }
}