/* цвета для светлой темы */
:root {
    --sv-rozov: #fff3f3;
    --rozovii: #f8bbbb;
    --bordovii: #7c3c3c;
    --sv-zel: #76b4a5;
    --teni: #76b4a5;
    /*тень у заголовка */
    --zel: #16640c;
    --tem-zel: #0e4007;
    --text: #0c2c08;
    /*цвет текста*/
    --fon: #fafffd;
    /* Основные цвет фона для светлой темы */
}

/*медиа запрос для темной темы*/
/* Стили для темной темы */
@media (prefers-color-scheme: dark) {
    :root {
        /* --sv-rozov: #000000;  */
        --sv-rozov: #121212;
        --rozovii: #7c3c3c;
        --bordovii: #f8bbbb;
        --sv-zel: #76b4a5;
        --teni: #000000;
        /*тень у заголовка */
        --zel: #16640c;
        --tem-zel: #0e4007;
        --text: #ffffff;
        /*цвет текста*/
        /* --fon: #121212; */
        --fon: #000000;
        /* Основные цвет фона для светлой темы */
    }
}

/* плавная прокрутка наверх */
html {
    scroll-behavior: smooth;
}

main {
    /* background: #fefffe; */
    /* цвет заднего фона */
    /* -------------------- */
    /* flex: 3 0 300px; */
    max-width: 66%;
    /* grow shrink basis */
    /* Свойство flex-grow - Увеличение относительной ширины флекс элемента 
Определить на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере
        доступно с помощью свойства flex-grow.
        Свойство flex-shrink - Уменьшение относительной ширины флекс элемента
      Свойство flex-basis позволит нам определить размер для флекс элемента, установленный по умолчанию
        перед тем как пространства внутри флекс контейнера будет распределено между другими элементами. */
    /* color: #333; */
    padding: 0px 10px;
    /* padding: 10px; */
    background-color: var(--fon)
}

/* убирает */
@media (max-width: 768px) {
    main {
        max-width: 100%;

    }
}

/* из-за 404 чтобы не сужалось поле центральное */
@media (min-width: 768px) {
    main {
        min-width: 66%;

    }
}
aside {
    max-width: 17%;
}
/* --------------- */

* {
    margin: 0;
    color: var(--text);
    user-select: none;
    /* Определяет может ли пользователь выделить текст элемента. */
}

/* запретить выделение картинок*/
img {
    user-select: none;
    -webkit-user-select: none;
    /* Для Safari */
    -moz-user-select: none;
    /* Для Firefox */
    -ms-user-select: none;
    /* Для IE/Edge */
}

/* Отключение перетаскивания: HTML: Добавьте атрибут draggable="false" к тегу <img>. */

h1 {
    /* color: #7c3c3c; */
    color: var(--bordovii);
    font-size: 30px;
    text-align: center;
    text-shadow: 1px 1px 4px var(--teni);
    /* text-shadow: 1px 1px 4px #76b4a5; */
    /* background-color: orange;  */
}

h3 {
    color: var(--bordovii);
    font-size: 20px;
    text-align: left;
    padding: 20px;
    font-weight: bold;
}

.zagolovok {
    color: var(--bordovii);
    font-size: 20px;
    font-weight: bold;
}

/* user-select Определяет может ли пользователь выделить текст элемента. */
/* font-weight Устанавливает насколько жирным будет выглядеть текст в элементе. */
/* font-stretch 	Устанавливает узкое, нормальное или широкое начертание шрифта.  */
/* font-style 	Задает стиль шрифта для элемента. */

p {
    /* color: #191970; */
    /* цвет текста и обводок у рисунков */
    /* padding: auto; */
    text-align: justify;
    /* задаём выравнивание текста по ширине */
    text-indent: 40px;
    /* задаём отступ для первой строки текстового блока 40px */
    line-height: 1.5;
    /* за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). 
  Чем выше значение этого свойства, тем больше промежуток между строками.  */
}

p,
div {
    font-size: 20px;
    /* padding-top: 20px; */
}

ul {
    line-height: 1.5;
}

/* p::selection, b::selection, a::selection {  */
::selection {
    /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
    background-color: var(--bordovii);
    /* background-color: #7c3c3c; */
    /* устанавливаем цвет заднего фона */
    color: var(--rozovii);
    /* color: #f8bbbb; */
    /* устанавливаем цвет текста черный */
}

/* p::-moz-selection {  */
/* описание псевдоэлемента для браузера Firefox (дублируем стили) */
/* background-color: orange;  */
/* устанавливаем цвет заднего фона */
/* text-shadow: -1px -1px 4px #fff;  */
/* размещаем текстовую тень*/
/* color: #000;  */
/* устанавливаем цвет текста черный */
/* }  */

a {
    /* селектором типа выбираем все гиперссылки  */
    text-decoration: none;
    /* убираем декорирование текста */
    /* cursor: pointer; */
}

a:hover {
    /*псевдокласс при наведении мыши*/
    /* background: #7c3c3c;
    color: #f8bbbb; */
    background: var(--bordovii);
    color: var(--rozovii);
}

/* линия */
hr {
    /* color: #76b4a5; */
    /* цвет линии */
    /* background-color: #76b4a5; */
    /* заливка */
    /* color: #16640c;
    background-color: #76b492; */
    color: var(--zel);
    background-color: var(--sv-zel);
    height: 10px;
    /* высота */
    /* border-radius: 5px; */
    /* закругление */
    border-radius: 100%;
    /* Узкие концы */
    width: 60%;
    /* ширина */
    margin: 20px auto;
}

/* изменяем маркер списка */
.mul li {
    list-style-image: url('img/mulberry_mini2.png');
    /* указываем относительный путь к изображению */
}

/* шелковица */
.img1 {
    /* width="150" border="1" align="left" vspace="10" hspace="20"  */
    width: 150px;
    /* border: 2px solid #0e4007; */
    border: 2px solid var(--tem-zel);
    /* border-radius: 10%; */
    border-radius: 20px;
    transform: rotate(12deg);
    margin-left: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;
    /* padding: 15px; */
    /* поворот картинки */
}
/* рубра */
.img2 {
    /* min-width: 100px; */
    /* max-width: 100px; */
    max-width: calc(100% - 25px) ;  
    max-height: 300px;
    border: 2px solid var(--tem-zel);
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;
}
/* шелковица */
/* картинка справа */
.img3 {
     max-width: calc(100% - 25px) ;  
    max-height: 500px;
    /* width: 400px; */
    border: 2px solid var(--tem-zel);
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: right;
}
/* главная */
.img4 {
     max-width: calc(100% - 25px) ;  
    max-height: 300px;
    /* width: 300px; */
    border: 2px solid var(--tem-zel);
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: right;
}

/*контейнер для фото*/
.cont_foto {
    display: flex;
    /* justify-content: space-around;  */
    /* флекс элементы равномерно распределяются по всей строке */
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* border: #f8bbbb; */
    /* border: 2px solid var(--tem-zel); */
}

.cont_foto>img {
    /* width="150" border="1" align="left" vspace="10" hspace="20"  */
    /* max-width: 300px; */
      max-width: calc(100% - 25px) ;  
    max-height: 400px;

    object-fit: cover;
    /* border: 2px solid #0e4007; */
    border: 2px solid var(--tem-zel);
    /* border: 2px solid #154010; */
    border-radius: 20px;
    /* transform: rotate(12deg); */
    margin-left: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    float: left;
    /* padding: 15px; */
    /* поворот картинки */
}

/* всё что ниже относится к верстке по флексбокс */
header,
footer {
    height: 49px;
    /* минимальная высота для переноса при маленьком окне */
    /* min-height: 49px; */
    /* background-color: #f8bbbb; */
    background-color: var(--rozovii);
}

footer a {
    /*селектор потомков*/
    float: left;
    /*CSS свойство float определяет будет ли элемент плавающим. Если элемент имеет абсолютное позиционирование (position : absolute;), то элементы будут игнорировать значения свойства float. */
    display: block;
    /*CSS свойство display определяет как должен отображаться определенный элемент HTML. Отображает элемент как блочный элемент.*/
    /* color: #7c3c3c; */
    color: var(--bordovii);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

footer a:hover {
    /*псевдокласс при наведении мыши*/
    /* background: #7c3c3c; */
    /* color: #f8bbbb; */
    background: var(--bordovii);
    color: var(--rozovii);
}

/*контейнер*/
.conteiner {
    display: flex;
    /* элемент отображается как блочный флекс контейнер */
    /* height: calc(100vh - 200px); */
    min-height: calc(100vh - 98px);
    /* высчитываем минимальную высоту */
    /* background-color: #fafffd;  */
    /*убрала задний фон основного контейнера!!*/
}

/* ---------------------------- */
/* БОКОВЫЕ ПАНЕЛИ */
aside {
    /* padding-top: 20px; */
    flex: 1;
    /* указываем на сколько элемент может увеличиться по отношению к остальным флекс элементам (flex-grow) */
    /* background: #fff3f3; */
    background: var(--sv-rozov);
}


/* убирает боковые панели */
@media (max-width: 768px) {
    aside {
        display: none;
    }
}

/* убирает верхнюю панели */
@media (max-width: 768px) {
/* footer, */
    .navbar
     {
        display: none;
    }
}
/* не знаю зачем */
/* убирает верхнюю и нижнюю панели */
/* @media (min-width: 769px) {
    .dropdown {
        display: none;
    }
} */

/* -------------------- */
/* ЛЕВОЕ МЕНЮ */
aside >.lev_menu{
    padding-top: 20px;
}
.lev_menu a{
    padding: 10px;
    /* проверить */
    /* padding-top: 50px; */
    color: var(--bordovii);
    font-size: 14px;
    line-height: 2;
    /* междустрочный интервал  */
    list-style-type: none;
    /* text-decoration: none; */
}
.lev_menu a:hover{
    color: var(--rozovii);
}

.lev_menu ul{

    list-style-type: none;
}
/* --------------- */
/* ПРАВОЕ МЕНЮ */

/* проверить */
/* .prav_menu {
padding: 50px auto;
} */
.prav_menu>div {
    /* color: #7c3c3c; */
    color: var(--bordovii);
    /* border: 2px solid #7c3c3c; */
    border: 2px solid var(--bordovii);
    border-radius: 20px;
    /* border-radius: 10%; */
    font-size: 20px;
    /* размер шрифта */
    /* margin: 10px; */
    margin: 20px auto;
    /* устанавливаем внешние отступы элемента (осуществляем центрирование) */

    /* margin: 50px auto 20px; */
    /* верхний 50, авто центрирование с боков, нижний отступ 20 */
    padding: 10px;
    min-height: 200px;
    width: 80%;
    /* ширина 30% от родительского элемента */
    /* float: initial; */
    position: static;
    /* абсолютное позиционирование элементов */
    text-align: center;
    /* выравниваем текст по центру */
    line-height: 100px;
    /* высота строки (выравниваем по высоте)*/
    /* background-color: #f8bbbb; */
    background-color: var(--rozovii);
    /* устанавливаем цвет заднего фона */
    transition-duration: 2s, 4s, 6s;
    /* продолжительность переходного эффекта (для каждого свойства своя) */
    transition-property: background-color, border-color, color;
    /* свойства, которые подлежат переходному эффекту */
}

.prav_menu>div:hover {
    /* background-color: #7c3c3c;  */
    /* устанавливаем цвет заднего фона при наведении*/
    /* color: #f8bbbb;  */
    /* устанавливаем цвет текста при наведении*/
    /* border-color: #f8bbbb;  */
    /* устанавливаем цвет границ элемента при наведении*/
    background-color: var(--bordovii);
    /* устанавливаем цвет заднего фона при наведении*/
    color: var(--rozovii);
    /* устанавливаем цвет текста при наведении*/
    border-color: var(--rozovii);
    /* устанавливаем цвет границ элемента при наведении*/
}

/* ------------------- */
/* слайд контейнер */
.slider-container {
    position: relative;
    /* width: 200px;  */
    /* Размер вашего окна */
    /* height: 300px; */
    overflow: hidden;
    /*содержимое обрезается при переполнении*/
    /* -------- */
    border: 2px solid var(--bordovii);
    border-radius: 20px;
    margin: 20px auto;
    /* устанавливаем внешние отступы элемента (осуществляем центрирование) */
    padding: 10px;
    min-height: 250px;
    /* min-height: 100%; */

    /* height: 80%; */
    width: 80%;
    /* object-fit: cover; */
}

.slider-container>img {
    width: 100%;
    object-fit: cover;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

/* ----------------------------------------------- */
/* ВЕРХНЯЯ ПАНЕЛЬ НАВИГАЦИИ  */

.navbar {
    overflow: hidden;
    /* переполнение обрезается */
    /* background-color: #f8bbbb; */
    background-color: var(--rozovii);
    position: fixed;
    /*элемент с фиксированным позиционированием*/
    top: 0;
    /*отступ сверху*/
    width: 100%;
    /*ширина элемента*/
    z-index: 999;
    /* чтобы рисунки не наезжали */
    height: 50px;
    /* минимальная высота для переноса при маленьком окне */
    /* min-height: 50px; */
}

/* зачем то так рекомендует ИИ */
/* .navbar > * {
    display: inline-block;
} */
.navbar a {
    /*селектор потомков*/
    float: left;
    /*CSS свойство float определяет будет ли элемент плавающим. Если элемент имеет абсолютное позиционирование (position : absolute;), то элементы будут игнорировать значения свойства float. */
    display: block;
    /*CSS свойство display определяет как должен отображаться определенный элемент HTML. Отображает элемент как блочный элемент.*/
    /* color: #7c3c3c; */
    color: var(--bordovii);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

   /*псевдокласс при наведении мыши*/
.navbar a:hover {
    background: var(--bordovii);
    color: var(--rozovii);
}

/* ------------------ */
/* Кастомный выпадающий список */
/* Контейнер для позиционирования */
.dropdown {
    /* было это */
    /* position: relative; */
    /* Важно для абсолютного позиционирования контента */
    /* и это */
    /* display: inline-block; */
    /* font-size: 17px; */
    /* ------------- */

    background-color: var(--rozovii);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    height: 50px;
}

/* Кнопка */
.dropbtn {
    background-color: var(--rozovii);
    color: var(--bordovii);
    padding: 14px 16px;
    font-size: 17px;
    border: none;
    cursor: pointer;
    font-family: 'Times New Roman', serif;
}



/* Содержимое выпадающего списка */
.dropdown-content {
    display: none;
    /* Скрыт по умолчанию */
    position: absolute;
    background-color: var(--rozovii);
    min-width: 200px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
}

.dropdown-content>ul {
list-style-type: none;
}

/* Ссылки внутри выпадающего списка */
.dropdown-content a {
    font-size: 17px;
    color: var(--bordovii);
    padding: 5px 16px;
    text-decoration: none;
    display: block;
}

/* Показать содержимое при наведении */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Изменение цвета ссылок при наведении */
.dropdown-content a:hover {
    background: var(--bordovii);
    color: var(--rozovii);
    /* font-size: 17px; */
}
.drop_zag {
    /* color: var(--bordovii); */
    font-size: 30px;
    font-weight: bold;
}

/* .drop_zag a:hover {
    color: var(--rozovii);
} */
/* --------------------------------- */
/* НИЖНЯЯ ПАНЕЛЬ НАВИГАЦИИ  */

/* зачем то так рекомендует ИИ */
/* .navbar_niz > * {
    display: inline-block;
} */

.navbar_niz {
    overflow: hidden;
    /* переполнение обрезается */
     display: block;
    background-color: var(--rozovii);
    /* position: fixed; */
    bottom: 0;
    width: 100%;
    z-index: 999;
    height: 50px;
    /* минимальная высота для переноса при маленьком окне !!!!!!!!!!!!!!!!!!!!!! перепроверить*/
    /* min-height: 50px; */
}
/* .navbar_niz p {
    padding: 11px 16px;
    text-indent: 0;
} */

.navbar_niz a {
    /* .navbar_niz a,p { */
    float: left;
    /* display: block; */
    color: var(--bordovii);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar_niz a:hover {
    background: var(--bordovii);
    color: var(--rozovii);
}