body, html { 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Вертикальное центрирование */
    align-items: center; /* Горизонтальное центрирование */
    height: 100%;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 20px; /* Отступы для мобильных */
}

#action-button { 
    padding: 15px 30px; /* Исходный размер */
    font-size: 1.2em; /* Исходный шрифт */
    cursor: pointer; 
    background-color: #007bff; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    width: auto; /* Автоматическая ширина, как было */
}

#action-button:hover { 
    background-color: #0056b3; 
}

#metrics-display { 
    margin-top: 20px; 
    padding: 10px; 
    background: #f0f0f0; 
    color: black; 
    border: 1px solid #ccc; 
    max-width: 600px; 
    overflow: auto; 
}

/* Медиа-запрос для мобильных устройств (экраны меньше 480px) */
@media (max-width: 480px) {
    #action-button {
        font-size: 1.4em; /* Увеличение шрифта для читаемости */
        padding: 15px 30px; /* Сохраняем исходный размер, но шрифт больше */
    }
    
    .container {
        padding: 10px;
    }
}