/* Базовые стили для body */
body {
    font-family: sans-serif;
}
/* Tailwind-эквиваленты: контейнеры и отступы */
.max-w-7xl { max-width: 80rem; /* 1280px */ }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.gap-2 { gap: 0.5rem; }
/* Tailwind-эквиваленты: Flexbox */
.flex { display: flex; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
/* Tailwind-эквиваленты: Типографика */
.text-sm { font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ }
.text-2xl { font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ }
.text-4xl { font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ }
.font-bold { font-weight: 700; }
/* Tailwind-эквиваленты: Цвета */
.bg-blue-200 { background-color: #bfdbfe; } /* Tailwind's blue-200 */
.text-orange-400 { color: #BE5904; } /* Tailwind's orange-400 */
.text-blue-700 { color: #1d4ed8; } /* Tailwind's blue-700 */
.text-orange-300 { color: #fdba74; } /* Tailwind's orange-300 */
/* Ваши пользовательские стили */
.bg-header {
    background-color: #3A73AB !important;
}
.text-shadow {
    text-shadow: 1px 1px 2px #000000;
}
main {
    max-width: 800px !important; /* Переопределение Bootstrap-контейнера */
}
.border-start-primary {
    border-left: 5px solid #4A86C1 !important;
}
.rendered-formula {
    font-size: 1.5em;
    overflow-x: auto;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: auto;
}
.math-inline-highlight math {
    font-weight: bold;
    font-size: 1.1em;
}
.flag-icon {
    width: 38px; /* Ширина иконки флага */
    height: 25px; /* Высота иконки флага */
    margin: 0 4px; /* Увеличенный отступ между флагами */
    border-radius: 2px; /* Слегка скругленные углы */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Небольшая тень */
    transition: transform 0.2s ease-in-out; /* Плавный эффект при наведении */
}
.flag-icon:hover {
    transform: translateY(1px); /* Смещение вниз для эффекта нажатия */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Уменьшение тени для эффекта "утопления" */
}
.flag-icon:active {
    transform: translateY(2px); /* Еще большее смещение вниз при активном нажатии */
    box-shadow: 0 0px 1px rgba(0,0,0,0.1); /* Почти полное исчезновение тени при активном нажатии */
}
.nav-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #3E6BA5; /* blue-500 */
    color: white;
    text-decoration: none;
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-out, box-shadow 0.1s ease-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-weight: 500; /* medium font weight */
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
}
.nav-button:hover {
    background-color: #F35F05; /* blue-600 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.nav-button:active {
    background-color: #F35F05; /* blue-700 */
    transform: translateY(0); /* Press down */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.back-to-content-button {
    display: block; /* Занимает всю ширину для центрирования */
    width: fit-content; /* Ширина по содержимому */
    margin: 1rem auto; /* Центрирование и отступы */
    color: #3b82f6; /* blue-500 */
    text-decoration: none; /* Убираем стандартное подчеркивание */
    font-weight: 600; /* Полужирный шрифт */
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}
.back-to-content-button:hover {
    color: #2563eb; /* blue-600 */
    text-decoration: underline; /* Появляется подчеркивание при наведении */
}
.back-to-content-button:active {
    color: #1d4ed8; /* blue-700 */
}
.bg-footer {background-color: #264B71;}
/* Адаптивные стили (из ваших пользовательских стилей и Tailwind) */
@media (min-width: 640px) { /* sm breakpoint */
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:text-base { font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
@media screen and (max-width: 520px) {
    section {padding-left: 0 !important;padding-right: 0 !important;}
    main {width: 100% !important;margin-left: 0 !important;padding-right: 0 !important;}
    article {margin-left: 0 !important;}
}