html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  color: #4b2e18;
  background: #f8f1e7;
  font-family: 'Georgia', serif;
}

		 .container {
            width: 90%;
            max-width: 1000px;
            background-color: white;
            margin: 30px 0; /* Убрали auto, так как центрируем через body */
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 150, 136, 0.2);
        }

        /* Остальные стили остаются без изменений */
        figure {
            text-align: center;
            margin: 20px auto;
            padding: 15px;
            background-color: #FFF5EE;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 80%;
        }

        figcaption {font-family: 'Georgia', serif;font-size: 0.8rem;
            font-style: italic;
            margin-top: 10px;
            color: #00838f;
            font-weight: bold;
        }

/* ========== ПОЛІПШЕНЕ МЕНЮ ========== */
.content-container {font-size: 1.0rem;
  max-width: 90%;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f9f5f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(90, 60, 37, 0.1);
}

.content-title {
  text-align: center;
  color: #5a3c25;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}

.content-card {
  background: white;
  border-radius: 12px;
  padding: 1.2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #e4d0ba;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(90, 60, 37, 0.15);
}

.card-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: rgba(169, 116, 78, 0.15);
}

.content-card h3 {
  color: #5a3c25;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.content-card p {
  color: #7b5132;
  margin: 0;
  line-height: 1.3;
}
/* ========== КІНЕЦЬ МЕНЮ ========== */

.node {
  cursor: pointer;
  color: #a9744e;
}

a {
  text-decoration: none;
  color: #7b5132;
  transition: color 0.3s ease;
}

a:hover {
  color: #a9744e;
}

p, .Attention {
  margin: 15px 0;
  padding: 12px 15px;
  background: #f1e3d3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(150, 110, 80, 0.1);
  text-align: justify;
  text-indent: 1.2em;
  line-height: 1.3;
  font-size: 1.0rem;
}

p.Attention {
  background: #e4d0ba;
  border: 1px solid #c8a97e;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}


p:first-letter {
  font-size: 1.1rem;
  font-weight: bold;
  color: #a9744e;
}
span {
  font-style: italic;
  color: #7b5132;
  font-size: 1.1rem;
}
table { 
  margin: 0 auto;
  width: 80%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #f5f5dc; /* светло-бежевый фон */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(139, 69, 19, 0.2);
  font-family: sans-serif;
}
th{ background-color:#E6E6FA;}
th,
td {
  padding: 12px 16px;
  text-align: left;border: 2px solid #e0e0e0;
}

tbody tr { 
  transition: background-color 0.1s ease;
}

tbody tr:nth-child(even) {
  background-color: #f0e6d2;
}
tbody tr:hover {
  background-color:#FFE4E1;
  color: #4b2e19;
  cursor: pointer;
}
ul,ol {
	list-style-position: inside;
    
  padding-left: 1.5rem;
  background-color: #f5f5dc; /* светлый бежевый фон */
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 12px rgba(139, 69, 19, 0.1);
  font-family: sans-serif;
  color: #4b2e19;
}
 ol {
  padding-left: 1.5em; /* Отступ слева для нумерованного списка */
}

ol > li {
  margin-bottom: 0.5em;
}

ul {
  list-style-type: disc;  /* Маркеры для вложенного списка */
  margin-left: 1.5em;
  margin-top: 0.3em;
}

ul ul {
  list-style-type: circle; /* Еще вложенный — круги */
  margin-left: 1.5em;
}
    li a {
      text-decoration: none;
      color: #0066cc;
    }

    li a:hover {
      text-decoration: underline;
      color: #004a99;
    }

    li {
      margin-top: 0.3em;
	  transition: background-color 0.3s ease, transform 0.3s ease;
      border-radius: 8px;
    }

li:hover {
  background-color:	#FFE4E1;
  transform: translateX(4px);
}
pre code {width:100%;}
pre  {width:80%;}

 pre,code {
  background: #fbf5ef;
  padding: 3px;
  margin:0 auto;
  border: 1px solid #e6d2bd;
  border-radius:12px;
  font-size: 1.1rem;
  font-family:Courier New, sans-serif;
  
}
h1, h2, h3, h4 {
  font-family: 'Orienta', sans-serif;
  margin: 0.5em 0 0.5em 0;
  color: #5a3c25;
  text-align: center;
}
h1 {
  font-size: 1.3rem;
  text-transform: uppercase;
}
h2 {
  font-size: 1.2rem;
}
h3 {
  font-size: 1.1rem;
}
h4 {
  font-size: 1.0rem;
}
figure, figcaption {
  text-align: center;
  margin: 1rem auto;
}

hr {
  border: none;
  border-top: 3px dashed #d4b89f;
  margin: 20px 0;
}
img.S{width:30%;}

img {
  width:60%;
  padding: 6px;
  background: linear-gradient(145deg, #d2b48c, #8b5e3c); /* бежево-шоколадный градиент */
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(139, 69, 19, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 24px rgba(139, 69, 19, 0.4);
}

img {
  max-width: 100%;
  border-radius: 16px;
  border: 6px ridg #f5f5dc; /* светло-бежевый */
}