body{
    margin: 0;
    padding: 0;
    background: #c6c3b5;
    /*background: url('gogogo.png');
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat; 
     background: linear-gradient(45deg, ); */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.listsb::-webkit-scrollbar{
    width: 12px;
  }
.listsb::-webkit-scrollbar-track{
    background: gray;
  }
.listsb::-webkit-scrollbar-thumb{
    background-color: rgb(163, 162, 162);
    border-radius: 20px;
    border: 3px solid gray;
  }
div{
    margin: 0;
    padding: 0;
}
img{
    width: 100%;
}
a{
    color:  #477dca;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
    color: black;
}
.navbar{
    width: 100%; /* Отвечает за ширину навигационного меню */
    background-color:black; /* Отвечает за цвет фона */
    position: relative;  /* Позиционирует элемент */
    display: flex;  /* Создает ось для расположения элементов внутри меню*/
    align-items: center;  /* Центрует элементы по одной оси внутри меню */
    position: fixed;
    z-index: 2000;
}
.navbar > a{
    text-decoration: none;  /* Убирает лишнее подчеркивание ссылки */
} 
.sbornik{
    width: 130px;
    color: whitesmoke;
    font-size: large;
    text-align: center;
    padding: 15px;
    position: absolute;
}
.backtomain{
    width: 70px;
    height: 40px;
    color: whitesmoke;
    font-size: large;
    text-align: center;
    padding: 15px;  
}
.authors{
    text-align: center;
    width: 100px;
    height: 40px;
    color: whitesmoke;
    padding: 15px;
    font-size: large;
}
.topbutton:hover{
    transition-duration:5s;
    background-color: red; 
}
.authors:hover{
    background-color: #192330;
    cursor: pointer;
}
.backtomain:hover{
    background-color: #192330;
    cursor: pointer;
    
}
.main{
    margin-left: auto; /* Отступ слева для центрования элемента */
    margin-right: auto; /* Отступ справа для центрования элемента */
    background-color: white; /* Цвет фона */
    width: 50%; /* Ширина */
    position: relative; /* Позиционирование элемента */
    border-radius: 15px; /* Закругление углов */
    display: flex; /* Создание оси для позиционирования элементов внутри блока */
    box-shadow: 0px 0px 150px black; /* Тень */
    top:80px; /* Отступ сверху */
    padding: 10px; /* Отступ от внутренних краев элемента */
    bottom: 10px; /* Отступ снизу */
}
ul{
    font-size: 18px;
    font-weight: bolder;
    list-style-type:none;
}

.razrab{
    font-size: large;
    font-weight: bolder;
    margin-left: 10px;
}
@media screen and (max-width: 640px) {
    .main {width: 90%;}
    img{width: 100%;}
    .sbornik{display: none;}
}
.sidebar{
    height: calc(80vh - 82px); /* Особое значение, которое задает нужную нам высоту */
    left: -250px; /* Отступ в левую сторону для скрытия элемента */
    width: 250px; /* Ширина элемента */
    background-color: gray; /* Цвет фона */
    position: fixed; /* Позиционирование элемента, чтобы он зафиксировался на экране пользователя */
    top: 82px; /* Отступ с верхней стороны */
    transition: all; /* Свойства для анимированного появления меню */
    transition-duration: 0.5s; /* Длительность анимации */
    z-index: 10000; /* Свойство "наложения" элементов друг на друга.*/
    border-radius: 0 15px 15px 0; /* Закругление углов */
    display: flex; /* Создание оси для позиционирование элементов внутри него */
    justify-content: center; /* Центрование по первой оси внутри элемента */
    align-items: center; /* Центрование по второй оси внутри элемента */
    
}
.sidebar.visible{
    left: 0px; /* Делаем видимым элементом при нажатии кнопки открытия */
}
.navbar.visible > div:nth-child(1){
    background-color: gray; 
}
.navbar > div:nth-child(1){  
    background-color: rgb(255, 255, 255);
    width: 50px;
    height: 50px;
    margin-left: 10px ;
    margin-right: 10px;
    border-radius: 10px;
} 
.navbar > div:nth-child(1) > div{  
    background: url('poloski.png');
    background-size: 60%; 
    width:50px; 
    height: 50px;
    background-repeat: no-repeat ;
    background-position: 50%; 
    cursor: pointer;
}  
.nextbutton, .previousbutton{
    background-color: rgb(172, 171, 171);
    width: 110px;
    height: 40px;
    margin: 20px;
    color: black;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 5px;
    border-radius: 10px ;
}
.nextbutton:hover, .previousbutton:hover{
    cursor: pointer;
    background-color: #FFDEAD;
}
.listsb{
    width: 200px;
    height: calc(100% - 16px);
    overflow: auto;
    background-color:gray;
    padding: 8px;
    border-radius: 10px;
}
.listsb > div{
    color: black;
    font-size: 20px;
    cursor: pointer;
    background-color: rgb(163, 162, 162);
    /* border-bottom: 1px solid black; */
    border-radius: 3px;
    margin: 10px;
    padding: 5px;
}
.listsb > div:hover{
    background-color: rgb(65, 64, 64);
    color:#c6c3b5
}
.listsb > div > div > div > a > div {
    font-size: 18px;
    color:white;
}
.listsb > div > div > div > a > div:hover {
    color: black;
}
/* .goup{
    text-align:center;
    padding:10px;
    position:fixed;
    bottom: 50px;
    right: 50px;
    cursor:pointer;
    color: black;
    border-radius: 50%;
    opacity: 0.5;
    width: 55px;
    height: 55px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 20px;
    background-color: #477dca;
}  */