/* advices.css (оптимизированный) */

/* Используем общие стили из style.css для body, header, footer и других общих элементов */

/* Дополнительные стили для основного контента страницы советов */
main {
    max-width: 800px; /* Максимальная ширина контейнера */
    background-color: white; /* Белый фон, имитирующий бумагу */
    margin: 100px auto 50px auto; /* Центрирование контейнера с отступами сверху и снизу */
    padding: 40px; /* Внутренние отступы для комфортного чтения */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень для эффекта глубины */
    border-radius: 8px; /* Слегка скруглённые углы */
}

/* Стили для списка советов */
#preparation-tips ol {
    padding-left: 20px;
}

#preparation-tips li {
    margin-bottom: 20px;
}

#preparation-tips strong {
    display: block;
    margin-bottom: 5px;
}

#preparation-tips p, #preparation-tips ul {
    margin: 0 0 10px 0;
}

#preparation-tips a {
    color: var(--primary-color);
    text-decoration: underline;
}

#additional-resources {
    margin-top: 40px;
}

.resource-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.resource-buttons .action-btn {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.resource-buttons .action-btn:hover {
    background-color: var(--accent-color);
}

/* Медиазапросы для корректного отображения на мобильных устройствах */
@media (max-width: 767px) {
    main {
        padding: 20px;
    }

    #preparation-tips li {
        margin-bottom: 15px;
    }

    .resource-buttons {
        flex-direction: column;
        gap: 15px;
    }
}