/* Основные стили для тела страницы */
body {
   font-family: 'Arial', sans-serif;
   background-color: #f0f4f8; /* Светлый фон */
   margin: 0;
   padding: 20px;
}

/* Стили для контейнера приложения */
.App {
   max-width: 800px;
   margin: auto;
   text-align: center;
   background-color: white; /* Белый фон для контента */
   border-radius: 10px; /* Закругленные углы */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Тень для глубины */
   padding: 20px;
}

/* Стили для заголовков */
h2, h3, h4 {
   color: #333;
}

/* Стили для кнопок */
.button {
   background-color:#a439ba ; /* Цвет фона */
   color: white; /* Цвет текста */
   border: none; /* Убираем рамку */
   border-radius: 5px; /* Закругленные углы */
   padding: 10px 20px; /* Отступы внутри кнопки */
   font-size: 16px; /* Размер шрифта */
   cursor: pointer; /* Курсор при наведении */
   transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход цвета фона и эффекта нажатия */
}

button:hover {
   background-color: #812e92; /* Цвет фона при наведении */
}

button:active {
   transform: scale(0.95); /* Эффект сжатия при нажатии */
}

/* Стили для модального окна */
#modal {
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto; 
   background-color: rgba(0, 0, 0, 0.5); 
}

.modal-content {
   background-color: #fff;
   margin: auto; 
   padding: 20px;
   border-radius: 5px; 
   width: 80%; 
}

.close-button {
   color: #aaa; 
}

.close-button:hover,
.close-button:focus {
   color: black; 
}

/* Стили для секций статистики и инструкций */
.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.stat-block {
  background-color: #a439ba; 
  border-radius: 8px; 
  padding: 15px;
  width: calc(50% - 10px);
  box-shadow: 0 2px 10px rgba(209, 20, 20);
}

.how-it-works,
.instructions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: solid #a439ba .5px;
}