/* Кастомные цвета */
:root {
    --custom-orange: #0c2406; /* Фон навигации */
    --custom-teal: #008080;   /* Текст */
    --custom-light: #bfe9f2; /* Цвет фона сайта*/
}

/* Применение кастомных цветов */
.bg-custom-orange {
    background-color: var(--custom-orange);
}

.bg-custom-teal {
    background-color: var(--custom-teal);
}
.bg-custom-light {
    background-color: var(--custom-light);
}

.text-custom-teal {
    color: var(--custom-teal);
}

.text-custom-orange {
    color: var(--custom-orange);
}

.text-custom-light {
    color: var(--custom-light);
}

/* Дополнительные стили */
body {
	font-family: 'Lucida Console', Monaco, monospace;
}

.carousel-item img {
    filter: brightness(70%);
}

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.btn.bg-custom-teal {
    background-color: var(--custom-teal);
    border-color: var(--custom-teal);
    color: var(--custom-orange);
}

.btn.bg-custom-teal:hover {
    background-color: #006666; /* Темнее на hover */
    border-color: #006666;
}

/* Навигационная панель */
.navbar.bg-custom-orange {
    background-color: var(--custom-orange) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--custom-teal) !important;
}

.navbar .nav-link.active {
    font-weight: bold;
}

body {
    background-color: #f8f9fa; /* Светлый фон */
    font-family: 'Arial', sans-serif;
}

.container {
    max-width: 1200px;
}

.carousel {
    background-color: #bfe9f2;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Тень */
    padding: 20px;
}

.carousel-inner {
    padding: 20px 0;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для карточек */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05); /* Увеличение при наведении */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Усиленная тень */
}

.card-img-top {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 200px; /* Фиксированная высота изображения */
    object-fit: cover; /* Сохраняет пропорции изображения */
}

.card-body {
    padding: 15px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background-color: rgba(0, 0, 0, 0); /* Фон для стрелок */
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Делает стрелки белыми */
}

.carousel-item .row {
    display: flex;
    justify-content: center;
}

/* Стили для контейнера, чтобы изолировать его от других стилей */
.artwork-container {
    width: 100%; /* Занимает всю ширину родительского элемента */
    max-width: 100%; /* Ограничивает максимальную ширину */
    height: auto; /* Высота адаптируется под содержимое */
    overflow: hidden; /* Скрывает всё, что выходит за пределы контейнера */
    display: flex;
    justify-content: center; /* Центрирует изображение по горизонтали */
    align-items: center; /* Центрирует изображение по вертикали */
    background-color: #bfe9f2; /* Фон контейнера (по желанию) */
    padding: 20px; /* Отступы внутри контейнера */
    box-sizing: border-box; /* Учитывает padding в общей ширине */
}

/* Стили для изображения */
.artwork-image {
    max-width: 100%; /* Ограничивает ширину изображения до 100% контейнера */
    max-height: 90vh; /* Ограничивает высоту изображения до 90% высоты экрана */
    height: auto; /* Сохраняет пропорции изображения */
    width: auto; /* Сохраняет пропорции изображения */
    object-fit: contain; /* Гарантирует, что изображение будет полностью видимым */
}