html, body {
height: 100%;background-color:#F8E8E8;margin:0;
}
div.mc, div.mc_tag{width:calc(60% - 20px);background-color:#fff;margin:auto;padding:10px;position: relative;}
div.header{width:100%;background-color:#F0DCDC;height:110px;position: fixed;z-index:999;  align-items: center;justify-content: center;}
.header-container {
  width: calc(100% - 40px);
  max-width: 1200px;
  padding: 3px 20px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 94px;
}

.site-name{
  margin-left: 15px;
  font-size: 37px;
  font-weight: bold;
  color: #6A4C93;
  white-space: nowrap;
  text-align: left;
}
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit; /* Чтобы цвет не менялся */
}
div.tag_menu_c{height: 70px;overflow-x: hidden;margin:10px;background-color: #F0DCDC;}
div.tag_menu{width: auto;overflow-x: scroll;height: 70px;white-space: nowrap;}
div.tag_menu_el{width: 100px;height: 60px;margin:5px;background-color: #ccc;display:inline-block;line-height: 60px;text-align: center;}
div.card{width:calc(40% - 20px);margin:10px;height:350px;display:inline-block;float:left;padding:5%;position:relative;}
div.text{width:90%;display:inline-block;float:left;padding:1% 5%;}
div.line{display: inline-block;padding:0 10px 10px 10px;width:calc(100% - 20px);}
div.mc{display:flex;min-height:100%;}
div.show_menu{overflow: hidden;visibility: hidden;}

div.text img {/*margin:25px 0;*/border-radius:7px;width: 100%;}
div.listing{width:90%;padding:0 5%;}
div.listing>h2{padding-left: 10px;}
/*=======*/

.article-meta {
  background-color: #E6E0F8; /* светло-фиолетовый */
  border-left: 6px solid #6A4C93;
  padding: 20px 25px;
  border-radius: 12px 0 0 12px;
  color: #4a3b68;
  font-family: "Georgia", serif;
  margin-bottom: 30px;
  box-shadow: 2px 2px 10px rgba(106, 76, 147, 0.08);
}

.article-meta h3 {
  font-size: 1.1em;
  color: #6A4C93;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 20px;
  margin-bottom: 8px;
  position: relative;
  padding-bottom: 5px;
  width:max-content;
  max-width: 90%;
}

.article-meta h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, #6A4C93, #D2B8EB);
  border-radius: 2px;
  margin-top: 6px;
  width:100%;
}

.article-meta p,
.article-meta li {
  font-size: 0.95em;
  line-height: 1.6;
}

.article-meta .meta-tags ul, .img_div .meta-tags ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin-top: 8px;
}
.img_div .meta-tags ul{ width: 70%;
    padding: 0 15%;
    justify-content: center;}

.article-meta .meta-tags li, .img_div .meta-tags li{
  background-color: #6A4C93;
  color: #FFF;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.85em;
  box-shadow: 0 0 2px rgba(106, 76, 147, 0.1);
}

/*=======*/
div.img_div{display:inline-block;width: 100%; margin-top: 10px;}
div.img_div img{border-radius:7px 7px 0 0;width:100%;display: inline-block;float: left;}
div.line>div.img_div {width: 90%;
    display: inline-block;
    float: left;
    padding: 1% 5%;}
.img_description {float: left;
    display: inline-block;border-radius:0 0 7px 7px}
.img_description .quote{    font-style: italic;
    color: #6A4C93;
    font-size: 1.3em;
    padding: 21px 5%;
    text-align: center;}

/*div.img_div img, .img_description{box-shadow: 0 0 17px rgb(106 76 147 / 49%);}*/

/* Убираем нижнюю часть тени у изображения */
div.img_div img {
    box-shadow: 0 -4px 12px rgb(106 76 147 / 49%); /* только тень сверху */
}

/* Убираем верхнюю часть тени у описания */
.img_description {
    width: 100%;
    box-shadow: 0 6px 12px rgb(106 76 147 / 49%); /* только снизу */
}

.img_description .meta-tags{padding: 0 0 21px 0;}
.img_description .ul {margin:unset;}
/*
 .img_div.enhanced {
    background: linear-gradient(to bottom right, #F0DCDC, #F8E8E8);
    border: 1px solid #E8D6E8;
    border-radius: 12px;
    padding: 16px;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(106, 76, 147, 0.1);
    font-family: 'Segoe UI', sans-serif;
}

.img_div .image-wrapper {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 12px;
}

.img_div .image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.img_div .image-wrapper img:hover {
    transform: scale(1.02);
}

.img_div .description {
    text-align: center;
}

.img_div .quote {
    font-style: italic;
    color: #6A4C93;
    font-size: 1.05em;
    margin-bottom: 12px;
}
*/

/*=======*/ 
/* bread crumbs */
/*=======*/  
.crumbs {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    background-color: #F8E8E8;
    padding: 10px;
    margin: 0 5%;
    border-radius: 8px;
    color: #6A4C93;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: calc(90% - 20px);
}

.crumbs a , .crumbs span{
  color: #6A4C93;
  text-decoration: none;
  background-color: #F0DCDC;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.crumbs a:hover, .crumbs span:hover {
  background-color: #6A4C93;
  color: #F8E8E8;
}

.crumbs a::after {
  content: "›";
  margin: 0 8px;
  color: #6A4C93;
}

/*===video===*/
/*=======*/   
 .video_div {
  width: 100%;
  /*max-width: 420px;*/
  margin: 40px auto;
  background-color: #F8E8E8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(106, 76, 147, 0.25);
  position: relative;
}
.video_wrapper {
  position: relative;
}

.video_wrapper video {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
  display: block;
  border-radius: 10px 10px 0 0;
  background-color: #F8E8E8;
}

.animated_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Georgia', serif;
}

.animated_text .frame {
  position: absolute;
  font-size: 1.8em;
  width: 70%;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(106, 76, 147, 0.8);
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.frame1 {
  animation-name: fadeText1;
}

.frame2 {
  animation-name: fadeText2;
}

.frame3 {
  animation-name: fadeText3;
}

@keyframes fadeText1 {
  0%, 10% {
    opacity: 0;
    transform: scale(0.9);
  }
  15%, 25% {
    opacity: 1;
    transform: scale(1.05);
  }
  30%, 100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes fadeText2 {
  30%, 35% {
    opacity: 0;
    transform: scale(0.9);
  }
  40%, 50% {
    opacity: 1;
    transform: scale(1.05);
  }
  55%, 100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes fadeText3 {
  60%, 65% {
    opacity: 0;
    transform: scale(0.9);
  }
  70%, 80% {
    opacity: 1;
    transform: scale(1.05);
  }
  85%, 100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

.video_description {
  padding: 20px 5%;
  background-color: #F0DCDC;
  box-shadow: 0 6px 12px rgba(106, 76, 147, 0.35);
  border-radius: 0 0 10px 10px;
}

.video_description .quote {
  font-style: italic;
  color: #6A4C93;
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 10px;
}

.video_description .meta-tags ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 0.9em;
  color: #6A4C93;
}

.video_description .meta-tags li {
  background-color: #F8E8E8;
  padding: 4px 10px;
  border-radius: 15px;
}
/*=======*/   


.card-image-container {
  width:calc(50% - 20px);margin:10px;height:400px;display:inline-block;float:left;position:relative;
/*
  width: 400px; /* Размер квадратной картинки *//*
  height: 400px;
*/
  overflow: hidden;
  border-radius: 7px; /* Закругленные углы */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Тень */
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Чтобы изображение заполняло контейнер */
  transition: transform 0.5s ease; /* Анимация при наведении */
}

.image-container:hover .image {
  transform: scale(1.05); /* Увеличение при наведении */
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 20px;
  color: white;
  text-align: center;
  transition: opacity 0.3s ease;
}


.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  text-decoration:none;
  color:#FFF;
  transition: background-color 0.7s ease, color 0.7s ease;
}
.title:hover {color:#6A4C93;}

.subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 7px 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/*=======*/

 /* background: url('/img/wc-bg-3.webp') center/cover no-repeat;*/
 .watercolor-background {
      background: radial-gradient(circle, #fdf6e3, #e0c3fc);
      padding: 100px 20px;
      text-align: center;
      margin: 10px 0; /* чтобы пришлось скроллить */
      border-radius: 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      width:calc(100% - 40px);
      height:70px;
      color: #fff;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    }

    .typewriter {
      font-size: 1.8em;
      white-space: normal;
      overflow: hidden;
      display: inline-block;
      min-height: 1.2em;
    }
.typewriter-caret {
  width: 2px;
  height: 1em;
  background: #333;
  margin-left: 2px;
  animation: blink-caret 0.7s step-end infinite;
}

@keyframes blink-caret {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
/*=======*/
.video-wrapper {
    position: relative;
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.menu-title a {
    width: calc(100% - 40px);
    text-align: right;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 2em;
    text-decoration: none;
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(106, 76, 147, 0.7), rgba(240, 220, 220, 0.1));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 0 8px rgba(106, 76, 147, 0.3);
    opacity: 0;
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.3s;
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-title a:hover {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 0 20px rgba(106, 76, 147, 0.7), 0 0 40px rgba(240, 220, 220, 0.4);
    background-position: right center;
    text-shadow: 0 0 10px #fff, 0 0 20px #6A4C93, 0 0 15px #6A4C93;
}

@keyframes fadeUp {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}





/*
.video-wrapper {
      position: relative;
      width: 100%;
      margin: 10px 0;
      overflow: hidden;
      border-radius: 3px;
    }

    .video-wrapper video {
      width: 100%;
      height: auto;
      display: block;
    }

  .menu-title a {               
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #6A4C93;
  font-size: 2.5em;
  text-decoration:none;
  padding: 30px 0px;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: 3px;
  background-color: #ffffff94;
}

.video-wrapper:hover .menu-title a {
   background-color: #ffffffd1;
  transform: translate(-50%, -50%) scale(1.05);
}
*/

/*=======*/

div.tag_menu::-webkit-scrollbar {display: none;}
/* Скрываем scrollbar для IE, Edge и Firefox */
div.tag_menu {-ms-overflow-style: none;  /* IE и Edge */
scrollbar-width: none;  /* Firefox */}

div.mc_tag{position: fixed;
    left: 20%;
    z-index: 999;top:70px;}

div.mc{padding-top:130px;}
/*div.mc{padding-top:180px;}*/

div.menu {
    position: fixed;
    width: calc(20% - 20px);
    background-color: #F0DCDC;
    top: 130px;
    border-radius: 0px 10px 10px 0;
}

div.menu_line {
    width: 100%;
}

div.menu_line a {
    color: #6A4C93;
    text-decoration: none;
    padding: 5%;
    display: inline-block;
    width: 90%;
    background-image: linear-gradient(to right, #6a4c93ba, #9e7bb57d);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size 0.5s ease, color 0.5s ease;
}
div.menu_line:first-child a {border-radius: 0px 10px 0 0;}
div.menu_line a:hover {
    background-size: 100% 100%;
    color: #FFF;
}


div.sm{width:90%;margin:50px 5% 5% 5%;}
div.right_side{position: fixed;width:calc(20% - 20px);background-color: white;top:130px;right: 0;height: 300px;border-radius: 10px;}

div.footer{width:100%;height:70px;background-color:#F0DCDC;text-align: center;color:#4B3F72;padding:25px 0;}

h1{color:#6A4C93;}
h2{color:#7A5C8D;}

.pagination {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}
.pagination a, .pagination span {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    border: 1px solid #6A4C93;
    color: #6A4C93;
    text-decoration: none;
}
.pagination span.current {
    background-color: #6A4C93;
    color: #fff;
    font-weight: bold;
}
.pagination span {
    pointer-events: none;
}
.pagination a:hover{background-color: #6A4C93;color:#FFF;transition:background-color 0.7s ease, color 0.7s ease;}

/*==============*/
/* Контейнер меню */
.toc-menu {
  background-color: #F8E8E8;
  padding: 20px;
  border-radius: 8px;
  font-family: sans-serif;
  color: #3c2e5c;
  }

/* Верхний уровень */
.toc-menu ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Вложенные уровни */
.toc-menu ul ul {
  margin-left: 20px;
  border-left: 2px solid #F0DCDC;
  padding-left: 10px;
}

/* Пункты меню */
.toc-menu li {
  margin-bottom: 8px;
}

/* Ссылки */
.toc-menu a {
  color: #6A4C93;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s, background-color 0.3s;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Hover-эффект */
.toc-menu a:hover {
  background-color: #F0DCDC;
  color: #3c2e5c;
}

/*==============*/

/* Бургер */

.burger {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001;
}

.burger span {
  height: 4px;
  background: #6A4C93;
  border-radius: 2px;
  transition: 0.3s;
}

/* Анимация при активном состоянии */
.burger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(12px);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-13px);
}

/* Стили для ссылок с id */
a[id]{
  position: relative;
  top: -110px; /* Сдвигаем на высоту фиксированного хедера */
  
}

/*==============*/
.sparkle-background {
  position: relative;
  width: 100%;
  height: 100%;
  background-color:#6A4C93;
  /*background: linear-gradient(270deg, #6A4C93, #F0DCDC, #F8E8E8);*/
  background-size: 600% 600%;
  animation: gradientShift 20s ease infinite;
  overflow: hidden;
  border-radius: 10px;
}

/* Плавный градиент */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Общие стили для блёсток и звёзд */
.sparkle, .star {
  position: absolute;
  background: white;
  opacity: 0;
}

/* Блёстки */
.sparkle {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #F0DCDC; /* Используем светлый розовый для блёсток */
  animation: sparkle 2s infinite ease-in-out;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Звезды с 4 вершинами (формируем через clip-path) */
.star {
  width: 12px;
  height: 12px;
  background-color: #FFF;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: starTwinkle 4s infinite ease-in-out;
  box-shadow: 0 0 8px 2px #6A4C93; /* Тень с фиолетовым цветом */
}

/* Анимация для звёзд */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* Чтобы элементы появлялись в случайных местах */
.sparkle:nth-child(1) { left: 20%; top: 10%; animation-delay: 0s; }
.sparkle:nth-child(2) { left: 60%; top: 30%; animation-delay: 0.5s; }
.sparkle:nth-child(3) { left: 80%; top: 50%; animation-delay: 1s; }
.sparkle:nth-child(4) { left: 40%; top: 70%; animation-delay: 1.5s; }

.star:nth-child(5) { left: 10%; top: 20%; animation-delay: 0s; }
.star:nth-child(6) { left: 70%; top: 40%; animation-delay: 1s; }
.star:nth-child(7) { left: 50%; top: 60%; animation-delay: 2s; }
.star:nth-child(8) { left: 80%; top: 80%; animation-delay: 3s; }

/* Блёстки и звезды с случайной задержкой */
@keyframes sparkleMove {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes starMove {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/*==============*/
.audio-wrapper {
  max-width: 400px;
  margin: 20px auto;
  background-color: #F8E8E8;
  border: 2px solid #F0DCDC;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(106, 76, 147, 0.2);
}

/* Скрываем стандартный фон браузера */
audio {
  width: 100%;
  outline: none;
  border: none;
  background: transparent;
  color: #6A4C93;
}

/* Цвет для кнопок управления (в браузерах, которые поддерживают) */
audio::-webkit-media-controls-panel {
  background-color: #F0DCDC;
  color: #6A4C93;
  border-radius: 10px;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-timeline {
  background-color: #F0DCDC;
  color: #6A4C93;
  border-radius: 6px;
}

/* Firefox fallback */
audio::-moz-media-controls {
  background-color: #F0DCDC;
}

/* Анимация для текста "Послушай этот трек" */
.text_music{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: bold;
  color: white; /* Белый цвет текста */
  opacity: 0;
  animation: fadeIn 3s forwards;
  animation-delay: 7s; /* Задержка, чтобы текст появился через 2 секунды */
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #6A4C93, 0 0 20px #6A4C93; /* Сияние */

}
.text_music a {color:#fff;text-decoration:none;}
/* Мерцание текста */
@keyframes flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Применение мерцания к тексту */
.text_music {
  animation: flicker 2s ease-in-out infinite;
}
/*==============*/

#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  background-color: #6A4C93;
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  pointer-events: none;
}

#scrollToTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#scrollToTopBtn:hover {
  background-color: #4d3571;
}

/*==============*/
.table-wrapper {overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 scrollbar-width: none;  /* Firefox */
}
/*
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-family: "Georgia", serif;
  font-size: 1rem;
  background-color: #F8E8E8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
*/
div.table-wrapper table {
  /*width: 100%;*/
  border-collapse: collapse;
  margin: 2em 0;
  font-family: "Georgia", serif;
  font-size: 1rem;
  background-color: #F8E8E8; /* светлый фон */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;

}


div.table-wrapper thead, div.table-wrapper th {
  background: #6A4C93; /* фиолетовый для заголовков */
  color: #F0DCDC; /* светлый розовый для текста в заголовке */
}

div.table-wrapper th {
  text-align: left;
  padding: 1em;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #F0DCDC;
}

tbody tr {
  transition: background 0.3s;
}

tbody tr:hover {
  background: #F0DCDC; /* светлый розовый для hover-эффекта */
}

div.table-wrapper tbody td {
  padding: 1em;
  border-bottom: 1px solid #F8E8E8; /* мягкий фон для разделителей строк */
  color: #6A4C93; /* текст фиолетовый для контраста */
}

tbody tr:last-child td {
  border-bottom: none;
}

.table-wrapper::-webkit-scrollbar {
  display: none;          /* Chrome, Safari */
}


/*==================*/




@media (max-width:800px)
{
div.right_side {display:none;}
div.mc, div.mc_tag {width: calc(70% - 20px);left: calc(25% + 20px);margin: unset;}
div.menu{width:25%;}
}

@media (max-width:600px)
{
div.header{height:70px;}
.logo img {width: 57px;}
.site-name{font-size: 20px;}
div.mc,div.mc_tag{width:100%;padding:0;margin:auto;left:unset;}   
div.mc{/*padding-top:180px;*/padding-top: 60px;}
div.mc_tag{left:unset;}
div.card-image-container{width:94%;margin: 0 3% 3% 3%;}
div.tag_menu_c{margin: 3%;}
div.right_side{display:none;}
div.menu {
    position: fixed;
    width: 90%;
    right: 5%;
    top: 69px;
    z-index: 9999;
    overflow: hidden;
    max-height: 0;
    transition: all 1s;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 15px 12px rgb(106 76 147 / 49%);
}
div.menu_line{border-bottom: 1px solid #6a4c930d;}
div.menu_line:first-child {border-top: 1px solid #6a4c930d;}
div.menu_line:last-child {
  border-bottom: none; /* Убираем разделитель на последнем элементе */
}
div.menu_show{max-height: 600px;}
div.line{padding:0 3% 3% 3%;}
div.header-line{color: #6A4C93;
    line-height: 70px;
    padding-left: 20px;
    width: calc(70% - 20px);
    display: inline-block;
    float: left;font-size:25px;}
div.show_menu{
            display: flex;
        align-items: center;
        justify-content: right;
        width: 30%;
        height: 70px;
        visibility: visible;
   /* display: inline-block;float: left;line-height: 70px;visibility: visible;*/
}
.menu-title a {font-size: 1.2em;padding: 10px 20px;}
.watercolor-background{height:130px;}
.typewriter{font-size:1.5em;}
.crumbs{ margin: 30px 5% 0 5%;}
div.listing{padding:unset;width:100%;}
}