html {
  font-size: 100%; /* Ensures accessibility features work as expected */
}

#det_0,
.title_gen,
 {
  overflow:auto
}
body {
  position:relative;
  margin:0;
  min-height:100%;
  padding-bottom:7rem;
  font-family:sans-serif;
  overflow:auto;
}
dl,
p {
  margin-bottom:0
}
.button,
.flex-container,
dt {
  cursor:pointer
}
dd,
dt {
  padding:2px 4px
}
.fancybox-image {
  margin:auto;
  display:block;
  width:600px;
  height:400px;
  min-height:0;
  object-fit:contain;
  user-select:none
}
.butt_comm {
  display:flex;
  flex-wrap:wrap;
  justify-content:start;
  align-items:center
}

@font-face {
  font-family: klementina;
  src:url("css/klementina.otf");
  font-weight:700;
  font-display: swap;
}
h1 {
  font-family: "Merriweather", "Times New Roman", serif;
  font-weight: 700;
}

h2 {
  font-family: "Inter", "Arial", sans-serif;
  font-weight: 600;
}

h3 {
  font-family: "Inter", "Arial", sans-serif;
  font-weight: 500;
}
.fam{
background-color: beige;
margin-left: 2rem;
padding: 0.7rem;
}
.fancybox__container {
  opacity:1
}
/* Заголовок страницы */
h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
  /*font-family: klementina;*/
  margin-left: 10px;
  padding-left: 10px;
}
.presentation{
display: flex;
  flex-direction: column;
margin-left: 2rem;
background-color: #c2e2e2;
padding: 0.7rem;
}
}
.pos_artcl{
left: 13%;
  position: absolute;
  top: 10.4%;
}
/* Контейнер с фото + текстом */
.coll {
  display: flex;
  align-items: flex-start;
  gap: 16px;
 background-color: white;
 align-items: center;
}

/* Фото родителей */
.coll img {
  width: 75px;
  height: 125px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Текстовое описание проекта */
.p_title {
 width: auto;
}

.p_title p {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.2;
  color: #333;
  
}

/* Акцент на первом абзаце */
.p_title p:first-child {
  font-size: 1.05rem;
  font-weight: 500;
}

/* Адаптация под мобильные */
@media (max-width: 768px) {
  .coll {
    flex-direction: column;
    align-items: flex-start;
  }

  .coll img {
    width: 64px;
    height: 106px;
  }

  h1_ {
    font-size: 1.7rem;
  }
}
/* ===== Основной контейнер ===== */
.collage {
  display: flex;
 align-items: center;
  gap: 20px;
  margin-top: 1rem;
}

/* ===== Левая колонка (выбор рода) ===== */
#sel:target {
  flex: 0 0 260px; /* фиксированная ширина */
  background: #f7f7f7;
  border: 1px solid #dcdcdc;
  padding: 12px;
  border-radius: 6px;
  display: block;
}
#sel{
display: none;
overflow: hidden;

}
.select form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* список фамилий */
.mySelectArrow {
  width: 100%;
  font-size: 1rem;
  padding: 6px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

/* кнопки */
.button {
  padding: 8px 10px;
  ont-size: 0.85rem;
  border: 1px solid #777;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.button:hover {
  background: #f0f0f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* ===== Правая часть: галерея ===== */
.imgcoll,
.text_image_1,
.text_image_2,
.text_image_3,
.text_image_4 {
  flex: 0 0 auto;
  text-align: center;
}

/* контейнер для всех картинок */
.collage > .imgcoll,
.collage > .text_image_1,
.collage > .text_image_2,
.collage > .text_image_3,
.collage > .text_image_4 {
  margin-right: 10px;
}

/* изображения */
.collage img {
  height: 280px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}

/* подписи */
.text_i {
  margin-top: 6px;
  font-size: 0.9rem;
}

.text_i a {
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px dotted #555;
}

.text_i a:hover {
  border-bottom-style: solid;
}

/* ===== Адаптация ===== */
@media (max-width: 900px) {
  .collage {
    flex-direction: column;
  }

  .select {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .collage img {
    height: auto;
  }
}
.guide.is-hidden{
max-height: fit-content;
opacity: 1;
margin-left: 2rem;
transition: opacity 1.3s ease, max-height 1.3s ease;
background-color: white;
  padding-left: 1rem;
}
.guide{
 opacity: 0.1;
  overflow: hidden;
  max-height: 3.5rem;
}
.rubric,
.title_gen {
  font-size:1.1em;
  list-style:circle;
  line-height:1.4;
  word-wrap:break-word;
  font-family:sans-serif;
}
#det_0 {
  height:7.2em;
  width:99%;
  margin:auto auto auto 10px;
  background-color:#2d984780;
  padding-left:15px;
  padding-top:10px;
  padding-right:10px;
  display:flex;
  align-items:center;
  justify-content:center
}

.rel-content{
  display:flex;
  background-color:#bab28880;
  margin:15px;
  flex-direction:column;
  justify-content: flex-start;
  text-align:center;
  font-size:1.0em;
  flex-basis: 270px;
  align-items:center;
}

.rel-header {
  background-color:#f6f7eef0;
  margin:10px;
  padding:5px;
  flex-direction:row;
  overflow:auto;
  display:flex;
  text-align:center
}
.rel-section.is-hidden {
  width:100%;
  justify-content:start;
  flex-wrap:wrap;
  opacity: 1;
  transition: opacity 1.3s ease;
  background-color: beige;
  background-color:#f6f7eef0;
  margin:10px;
  padding:5px;
  flex-direction:row;
  overflow:auto;
  display:flex;
  text-align:center
}
.rel-section {
  display:none;
  overflow: hidden;
}
.rel-header {
  width:80%;
  justify-content:space-between;
  align-items:center;
}
.flex-div {
  padding:0;
  margin:0 5px;
  margin-block-start: 8px;
}
.img,
.img_per {
  background:#fff;
  margin-left:5px;
  margin-right:5px;
  padding:5px;
}
.img{
height: 300px;
  object-fit: cover;
margin-bottom: auto;
}
.img_per {
  border-image-slice:50 80 50 80;
  border-image-width:70px 70px 70px 70px;
  border-image-outset:0px 0px 0px 0px;
  border-image-repeat:stretch round;
  border-image-source:url("photo_frame.svg");
  border-style:solid;
}
p {
  margin-top:0;
}
.family-hint{
margin-top: 50px;
  margin-left: 20px;
  width: fit-content;


}
.rubric {
  font-size:1.4em;
  color:#1f4ea7;
  margin-left:2em;
 margin-bottom: 0;
 margin-top: 1.5rem;
  cursor: pointer;
}
.div_rublic {
  width:auto;
}
.select.mySelectArrow {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background:#2d984780;
  width:100%;
  padding:0 10px;
  font-size:22px;
  margin-top:1px;
  display:flex;
  color:#000
}
.select ::after {
  content:'\25BC';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  font-size:10px;
  border:1px solid #565656;
  background:#0e7b53;
  color:#fff;
  pointer-events:none
}

.menu {
  display:flex;
  flex-direction:row;
  font-size:3.5em;
  flex-wrap:wrap;
  justify-content:left;
  height:1.2em;
  width:auto;
  align-items: center;
}
.menu p {
font-size: 1.3rem;
  margin-right: 1rem;

}
.b,
.be {
  color:#00f;
  width:7em;
  background-color:#bab28880;
  margin-right:5px;
  align-self:center
}
.b {
  font-size:.3em
}
.be {
  font-size:.92em
}
.img_coll_ {
  background-image:url(../alen/collage_lenin.jpg);
  background-size:contain;
  width:100%;
  height:280px;
  margin-top:5px
}
.chron_button,
.info_button {
  background-color:#90d53e;
  border:2px solid #18ab29;
  display:inline-block;
  cursor:pointer;
  font-family:Arial;
  padding:5px;
  margin-left:20px;
  width: fit-content;
  margin-bottom: 40px;
}
.com_text,
.comment {
  padding:10px;
  outline:0;
  background:#d0e2bc;
  margin-top:15px;
  margin-bottom:15px;
}


.comment {
  height:350px;
  border:3px solid #1c87c9;
  line-height:20px;
  flex-basis:350px;
  align-self:center;
}
.event_comm,
footer {
  flex-direction:row;
}
.event_comm {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  align-items:center;
}
mark {
  background-color:#e8c8a6;
  color:#b55c5c;
}
.lp {
  display:none;
}
::marker, ::before::marker, ::after::marker {
  text-align: end;
  text-align-last: end;
  text-indent: 0;
  text-transform: none;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

dl,
footer {
  display:flex;
}
.event_list {
  display:flex;
  flex-flow:row;
  opacity: 0.1;
   max-height: 2.5rem;
   overflow: hidden;
  }
  .event_list.is-hidden{
  display:flex;
  flex-flow:row;
  border-width:1px 1px 0 0;
  opacity: 1;
  max-height: fit-content;
  transition: opacity 1.3s ease, max-height 1.3s ease;
  }
  
dl {
  flex-flow:row wrap;
  border:solid #333;
  border-width:1px 1px 0 0;
  margin-top:.1em
}
dl:hover p.lp {
  background-color:red;
  display:none
}
dt {
  flex-basis:18%;
  background:#547310;
  text-align:right;
  color:#fff;
  flex-shrink:1
}
dd {
  flex-basis:70%;
  flex-grow:1;
  margin:0;
  border-bottom:1px solid #333;
  background-color:#8ca861;
  flex-shrink:2
}
footer {
  justify-content:space-around;
  align-items:center;
  flex-basis:800px
}

.control,
.n_p,
.vticker {
  font-family:san-serif
}
.com_text {
  border:3px solid #1c87c9;
  line-height:15px;
  position:absolute;
  resize:none;
  display:none;
  z-index:10
}
.name_e {
  font-size: 1.3em;
  border-style: solid;
  border-width: 2px 5px;
  padding: 5px;
  border-color: #56d931;
  border-radius: 5px;
  width: fit-content;
 
}
.imgshow {
  display:flex;
  flex-direction:row
}
.textimage_ {
  position:relative;
  flex-basis:400px;
  flex-shrink:1
}
.text_i_ {
  position:relative;
  top:0;
  right:10px;
  font-size:1.15em;
  color:#c23535
}
@media only screen and (max-width:600px) {
  #det_0,
  .coll,
  body {
    overflow:auto
  }
  #det_0,
  .coll,
  rel-header,
  .img_coll,
  
  #det_0 {
    font-size:7px;
    padding-top:7px;
    padding-bottom:5px
  }
 
  .coll {
    font-size:3.6em;
    text-align:left
  }
  rel-header {
    flex-wrap:wrap;
    overflow:auto
  }
  .title_gen {
    line-height:120%
  }
  p {
    margin-top:5px;
    margin-bottom:7px;
    line-height:1.1
  }
  select.mySelectArrow {
    padding:0;
    font-size:18px
  }
 
}
@media only screen and (min-width:600px) {
  #det_0,
  .coll,
  rel-header,
  .img_coll,
 
  @media (max-width: 600px) {
  .p_title {
    padding: 1.2rem 1.2rem;
    margin: 1.5rem 1rem;
  }

  .p_title p {
    font-size: 1rem;
  }
}
  #det_0 {
    font-size:9px;
    overflow:auto;
    padding-top:7px;
    padding-bottom:5px
  }

  .coll {
    font-size:20px;
    text-align:left
  }
  rel-header {
    flex-wrap:wrap
  }
  .title_gen {
    line-height:120%
  }
  p {
    margin-top:5px;
    margin-bottom:7px;
    line-height:1.1
  }
  select.mySelectArrow {
    padding:0;
    font-size:18px
  }
 
}
@media only screen and (min-width:768px) {
  #det_0,
  .coll,
  rel-header,
  .img_coll,
  
  #det_0 {
    font-size:9px;
    overflow:auto;
    padding-top:7px;
    padding-bottom:5px
  }
 
  .coll {
    font-size:20px;
    text-align:left
  }
  rel-header {
    flex-wrap:wrap
  }
  .title_gen {
    line-height:120%
  }
  p {
    margin-top:5px;
    margin-bottom:7px;
    line-height:1.1
  }
  select.mySelectArrow {
    padding:0;
    font-size:18px
  }

}
@media only screen and (min-width:950px) {
  #det_0,
  .coll,
  rel-header,
  .img_coll,
  
  #det_0 {
    font-size:12px;
    overflow:auto;
    padding-top:7px;
    padding-bottom:5px
  }
 
  .coll {
    font-size:22px;
    text-align:left
  }
  rel-header {
    flex-wrap:wrap
  }
  .title_gen {
    line-height:120%
  }
  p {
    margin-top:5px;
    margin-bottom:7px;
    line-height:1.1
  }
  select.mySelectArrow {
    padding:0;
    font-size:18px
  }
 
}
@media only screen and (min-width:1200px) {
  #det_0,
  .coll,
  rel-header,
  .img_coll,
 
  #det_0 {
    font-size:15px;
    overflow:auto;
    padding-top:7px;
    padding-bottom:5px
  }
 
  .coll {
    font-size:23px;
    text-align:left
  }
  rel-header {
    flex-wrap:wrap
  }
  .title_gen {
    line-height:120%
  }
  p {
    margin-top:5px;
    margin-bottom:7px;
    line-height:1.1
  }
  select.mySelectArrow {
    padding:0;
    font-size:18px
  }

}
.control {
  font-size:17px;
  flex-basis:18%;
  color:#533b22
}
.n_p {
  font-size:22px;
  text-align:right
}
.n_down,
.n_toggle,
.n_up {
  font-size:10px;
  position:relative;
  left:55%;
  color:#302e20
}
.footer,
.tooltip .tooltiptext {
  position:absolute;
  text-align:center
}
.vticker {
  border:1px solid #8c4827e0;
  width:100%;
  font-size:12px
}
.vticker ul {
  padding:0
}
.vticker li {
  font-size:1.2em;
  padding:12px
}
.et-run {
  background:red
}
#control {
  padding-right:4.45em;
  width:23%;
  margin-left:1em
}
.footer {
  right:0;
  bottom:0;
  left:0;
  padding:1rem;
  background-color:#cec7c7
}

.tooltip {
  position:relative
}
.footer p {
  font-size:1.2em;
  color:green
}
.tooltip {
  display:inline-block;
  border-bottom:1px dotted #000;
  text-decoration-line:underline
}
.tooltip .tooltiptext {
  visibility:hidden;
  width:120px;
  background-color:#50c43f;
  color:#fff;
  border-radius:6px;
  padding:5px 0;
  font-size:.9em
}
.tooltip:hover .tooltiptext {
  visibility:visible
}
.
@keyframes scroll-left {
  0% {
    transform:translateX(100%)
  }
  100% {
    transform:translateX(-100%)
  }
}


.img_cool{
max-height: 280px; 
flex-basis: 270px;
}
.control {
margin-right: 5%;
}
.text_image_1,.text_image_2,.text_image_3,.text_image_4,.imgcoll{
flex-grow: 1;
flex-shrink: 1;
}
text_image_1{
flex-basis: 290px;
}
text_image_2{
flex-basis: 317px;
}
text_image_3{
flex-basis: 270px;
}
text_image_4{
flex-basis: 305px;
}
.n_up,.n_down,.n_toggle{
display: none;

}
.memory
{
display: flex;
  justify-content: start;
  margin-bottom: 2rem;
  margin-top: 2rem;
 background-color: white;
padding-left: 1rem;
  align-items: center;
  gap: 5px;
}


.today{
margin-left: 10px;
color: #cb2f4c;
}
.table_component {
    overflow: auto;
width: fit-content;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: center;
}

.table_component caption {
    caption-side: top;
    text-align: left;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #6f1818;
  padding: 10px;
    font-size: 0.85em;
    font-weight: normal;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
}