@import url(vendor/normalize.css);
@import url(vendor/fonts.css);

/* navigation */

@import url(./css/page_menu.css);


.page__content {
    background-image: url('./images/sand3.gif');
    color: #000000;
    margin: 0 10px;
    padding: 15px;

    font-family: 'Inter', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     min-width: 320px;
     /* max-width: 95%; */
     margin: 0 auto;
     box-sizing: border-box;
     position: relative;
     height: 100%;
  
}

.header {
    position: relative;
    background-color: #D2691E;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.subtitle {
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    font-family:  'Inter';
    color: #FFFFFF;
    padding-left: 400px;
    text-align: left;
}
.site-search {
    position: relative;
    padding-right: 10px;
    display: flex;
    align-items:flex-end;

}
.search {
    max-width:  300px;
} 
.search_form {
    min-height: 30px;

}
.logo {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    padding-left: 10px;
    padding-bottom: 5px;
    background-color: #D2691E;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.site_sections {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
    justify-content: space-between;
    box-sizing: border-box;
    
}

.section_item {
    box-sizing: border-box;
    padding: 12px;
    /* max-width: 300px; */
    height: 100%;
    border-radius: 20px;
    border: 1px solid #703806;
    background-color: #f9e5d0;
    /* opacity: 0.8; */
    place-items: center;
    transition: background-color 0.15s ease, opacity 0.15s ease;

  /* border: 1px solid black; */
}

.section_item:hover {
    background-color: #D2691E;
    font-weight: 700;
}

.section_item:hover a:link,
.section_item:hover a:visited {
    color: #f1f0f2;
}
    
   
   
   .section__description {
    overflow: hidden;
}
 .news_section {
    max-height: 300px; 
    overflow-y: auto;  /* вертикальная прокрутка, если контент больше */
    padding-right: 5px; /* чтобы скролл не налезал на текст */
}

.news {
    position: relative;
    grid-column: 1;
    grid-row: 1/3;
}

.monuments {
    /* position: relative; */
    max-width: 600px;
    grid-column: 2/4;
    grid-row: 1;
    
}

.continue {
    margin-top: 2px;
    position: absolute;
    bottom: 5px;
    right: 15px;
}

.nav__link {

  /* display: block; */
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
  position: relative;
}
.nav__link:visited {
  color: black;
}


.section__header {
    font-weight: 600;
    font-size: 15px;
    line-height: 17px;
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
}

.description {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 15px;
    font-weight: 500;
    margin: 5px auto;
    
}
.scrollable {
    /* width: 200px; Ширина элемента */
    /* height: 100px;  */
    overflow-y: scroll; /* Вертикальная прокрутка */
    border: 1px solid #ccc; /* Граница для наглядности */
    padding: 10px; /* Внутренний отступ */
  }


.copyright {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

.ya-share2 {
    margin: 4px auto;   

}
.news_piece  {
    margin-top: 10px;
    overflow: hidden;
    white-space: normal; /* предотвращает вылет текста за границы */
    word-wrap: break-word; /* если текст слишком длинный, он будет переноситься */
}



/* .fb-like {
    padding-top: 10px;
    margin-top: 10px;
} */

.fb_block {
    padding-top: 5px;
}
.square {
    width: 8px;
    height: 8px;
}
.dropdown {
    position: relative;
    display: inline-block;
}


a:link {
    text-decoration: none;
    color: #800000;
}
a:visited {
    text-decoration: none;
    color: #8B4513;
}
a:link:hover {
    text-decoration: none;
    color: #3D1A00;
}

.paper__link {
    text-decoration: none;
    color: #800000;
}
.paper__link:visited {
    color: #8B4513;
}
.paper__link:hover {
    opacity: 0.6;
    color: #3D1A00;
}

.language__link {
    border:rgb(238, 138, 8) 1px solid;
    border-radius: 10px;
    padding: 4px;
    background-color: #f9e5d0;
    font-weight: 600;
}
.language__link:hover {
    opacity: 0.8;
}


a.nav:link {
    color: white;
    text-decoration: none
}
a.nav:visited {
    color: white;
    text-decoration: none
}

a.nav:hover {
    opacity: 0.8;
}

.current_menu_item {
    border: 1px solid #D2691E;
    border-radius: 5px;
    padding: 5px;
}

.about {
    background-color: #D2691E;
    padding: 5px;
    border-radius: 3px;
    color: white;
    margin: 10px auto;

}
.news_title {
    background-color: #D2691E;
    color: white;
    padding-left: 10px;
    padding-top: 5px;
}
.news {
    background-color: #f9e5d0;
    list-style: none;
    border: 1px solid #D2691E;
}

.h {
    font: bold 12pt "Times New Roman";
    color: #000000
}

.t {
    font: bold 10pt Arial, "Times New Roman";
    color: #000000
}

.w {
    font: 10pt Arial;
    color: #ffffff
}

.pt {
    font: bold 8pt Tahoma, Arial;
    color: #000000
}

.mn {
    font: bold 10pt Tahoma, Arial;
    color: #4B0082
}

.i {
    font: italic 10pt Arial, "Times New Roman";
    color: #000000
}

.s {
    font: 8pt Arial, "Times New Roman";
    color: #000000
}

.tc {
    font: 10pt Arial, "Times New Roman";
    color: #4B0082
}

.d {
    font: 12pt Arial, "Times New Roman"
}

.search {
    font: bold 10pt Tahoma, Arial;
    color: #4B0082
}



.turik {
    font-family: turik;
    font-size: 12pt;
    color: red;
    unicode-bidi: bidi-override;
    direction: rtl;
    margin-right: 5px;
}


.monumenta {
    font-family: Castellar;
    font-size: 30pt;
    color: #4B0082;
    unicode-bidi: bidi-override;
    text-align: start;
}
a.monumenta:link,
a.monumenta:visited {
    color: #4B0082;
}

.fb__like-button {
    padding-top: 8px;
}

.leftimg {
    float: left;
    /* Выравнивание по левому краю */
    margin: 12px 12px 12px 0;
    /* Отступы вокруг картинки */
}

.rightimg {
    float: right;
    /* Выравнивание по правому краю  */
    margin: 12px 0 12px 12px;
    /* Отступы вокруг картинки */
}

._2tga._8j9v {
    padding: 33px;
}
/* scholar styles */

.scholars {
    list-style-type: none;
}

.scholar__name {
    color: #2b1a01;
}
.scholar__link {
    margin: 4px auto;
}

.late-scholar__link {
    margin: 0 auto;
    padding: 5px;
    transition: linear .3s;
    display: flex;
    flex-direction: column;
    align-items:stretch;
}

.late-scholar__link:hover {
    opacity: 0.8;
}

.late-scholars {
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: space-between;
    grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 7px;
}

.late-scholar {
    background-color: #ebb980;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    max-width: 20vw;
    position: relative;
}

.late-scholar-image {
    max-width: 80px;
    border-radius: 70px;
    padding: 5px;
}
.scholar__subtitle {
    font-size: 15px;
    font-weight: 500;
    line-height: 17px;
    margin: 5px auto;
    text-align: center;
}

.scholar__top {
    display: flex;
    justify-content: center;
    margin: 10px auto;
    
}
.scholar__info {
    margin: 10px;
}
.scholar__description {
    max-width: 700px;
    margin-bottom: 10px;
}

.img__container {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 10px;
}
.scholar__pic {
    max-width: 100%;
    max-height: 100%;
}

.translations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* ethnos styles */
.ethnicities {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;

}
.ethnos__header {
    margin: 10px auto;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
}
.nation__pic {
    width: 150px;
    /* height: 150px; */
    position: relative;
    border-radius: 5px;
    object-fit: contain;
  object-position: center;
  }
  
.nation {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #703806;
    background-color: #f9e5d0;
    border-radius: 10px;
    max-width: 160px;
    max-height: 200px;
    overflow: hidden;
}  

/* Dropdown Button */
.dropbtn {
    background-color:#D2691E;
    color: white;
    padding: 4px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    margin-right: 3px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(25, 67, 121, 0.2);
    z-index: 4;
    background-color: #FFDAB9;
    
}

.dropup-content {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 180px;
    /* min-width: fit-content; */
    box-shadow: 0px 8px 16px 0px rgba(25, 67, 121, 0.2);
    z-index: 4;
    background-color: #FFDAB9;
    top: -267px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    font-size: 12px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropup-content a {
    color: black;
    font-size: 12px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #703806; color: white;}
.dropup-content a:hover {background-color: #703806; color: white;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropup-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #0e518d;}
.dropdown:hover .dropbtn {background-color: #0e518d;}

.news_item {
    display: grid;
    grid-template-columns: 1fr 4fr;
    margin-bottom: 5px;
    color: black;
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
}
.date {
    color: black;
    font-size: 14px;
    font-family: 'Inter';
    margin-right: 10px;
}
.archive {
    color: black;
    font-size: 15px;
    line-height: 17px;
    margin-bottom: 20px;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Прозрачный черный цвет */
    display: none; /* Изначально скрыт */
    z-index: 3; /* Большой z-index, чтобы затенение находилось над всеми элементами на странице */
  }
  .overlay_visible {
    display: block;
  }

   
  /* Стили для затенения страницы при отображении меню */
  .menu_visible .overlay {
    display: block;
  }
  
  .menu_visible .menu-items {
    display: block;
    z-index: 4;
  }
  
  .page__header {
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    margin: 10px auto;
    text-align: center;
   
  }


  .subtopics {
    list-style: none;
    
  }
  .subtopic {
    border: 1px solid rgb(238, 138, 8);
    border-radius: 10px;
    background-color: blanchedalmond;
    margin: 0;
    margin-bottom: 10px;
    padding: 10px;

  }

    .subtopic__header {
    font-weight: 600;
    font-size: 15px;
    line-height: 17px;
    margin-bottom: 5px;
  }

  .subtopic__items {
  list-style: none;  
  }

.book_link {
    text-decoration: none;
    margin-bottom: 15px;   
}
/* .book_link:hover {
    opacity: 0.6;
} */
.standard_link {
    color: rgb(106, 68, 68);
}

.external_link::before {
    content: "m";
    font-family: turik;
    color:#D2691E;
    margin-right: 7px;
}


  .text_with_images {
    display: flex;
    justify-content: space-between;
  }
  .dummy_image {
    width: 50px;
    height: 50px;
  }

  .parallel_text {
display: flex;
justify-content: space-evenly;

  }
  .original {
    font-size: 12px;
    font-weight: 500;
    line-height: 13px;
    max-width: 40%;
  }
  .translation {
    font-size: 12px;
    font-weight: 500;
    line-height: 13px;
    max-width: 40%;
  }

  .page__description {
    margin: 20px auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
  }
     .quote {
    border: 5px solid rgb(238, 138, 8);
    background-color: blanchedalmond;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 5px;
    margin-bottom: 15px;
  }

  .quote__header {
    font-weight: 600;
    font-style: italic;
    line-height: 15px;
    font-size: 13px;
    margin-bottom: 5px;
  }
  .quote__source {
    font-size: 12px;
    font-style: italic;
    line-height: 13px;
    font-weight: 500;
    margin-top: 15px;
  }
  
  .quote::after,
  .quote::before {
    content: "";
    display: block;
    border: 6px solid blanchedalmond;
    z-index: 20;
    position: absolute;
  }
  
  .quote::after {
    left: -5px;
    top: 10px;
    right: -5px;
    bottom: 10px;
    border-top: none;
    border-bottom: none;
  }
  
  .quote::before {
    left: 10px;
    top: -5px;
    right: 10px;
    bottom: -5px;
    border-left: none;
    border-right: none;
  }

  .annotation {
    font-style: italic;
    font-weight: 500;
    font-size: 12px;
    line-height: 13px;
  }

.photo_alexander {
    width: 187px;
    height: 250px;
}
.faksimile__thumbnail {
    width: 125px;
    height: 187px;
}

@media screen and (max-width: 900px) {
    .page__content {
        max-width: 899;
        padding: 1px;
    }

    .header {
        max-width: 700px;
    }
    .monumenta {
        font-size: 20pt;       
    }
    .subtitle {
        font-size: 15px;
        line-height: 20px;
        padding-left: 200px;
    }
    .logo {
        flex-direction: column;

    }
    
    .dropdown-content a {
        font-size: 15px;
       
    }
    .dropup-content a {
        font-size: 15px;
       
    }

    
}

@media  screen and (max-width: 900px) {
    .site_sections {
        margin: 5px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 250px;
        gap: 5px;
    }
}

@media  screen and (max-width: 650px) {
    .site_sections {
        margin: 5px;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    .monuments {
        max-width: 300px;
        grid-column: 2/3;
        grid-row: 1;
        
    }
}

@media  screen and (max-width: 450px) {
    .site_sections {
       display: flex;
       flex-direction: column;
       align-items: center;
    }
    .section_item {
        max-width: fit-content;
        height: fit-content;
    }
}

@media  screen and (max-width: 500px) {
    .site-search {
        flex-direction: column-reverse;
        align-items: flex-start;
        
    }
    .fb-like {
        margin-top: 5px;
    }
}