html {
    overflow-y: scroll;
}

body {
    font-family: Georgia, Arial, Helvetica, sans-serif;
    line-height: 1.4;
    width: 80%; 
    margin: auto;
    background-color: #3b0a3f;
    background-image: url("/Assets/26.jpg"); 
    font-size: 16px;
}

/* iPad */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        width: 95%;
    }
}
h1 {font-size: 22px; line-height: 20px; margin-bottom: 10px; border-bottom: 1px dotted #333; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333; font-weight: bold; font-style:italic; }

a {
  color: #118001;  
  text-decoration: none;
}

.topheader {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

.topmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.topmenu li {
    float: left;
}

.topmenu a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}

.topmenu a:hover {
    background-color: #ddd;
    color: black;
}
 
.categori-block {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 20px auto;
}

.category-title {
  color: #2C3E50; 
  background-color: #E6F0FA; 
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 10px;
  padding: 8px 12px;  
  border-radius: 4px;  
}

.block-left, .block-right {
    width: 45%;
    padding: 1px 7px;
    margin: 5px 7px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);    
}

.block-left p, .block-right p {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.block-left ul, .block-right ul {
    list-style-type: none;
    padding: 0;
}

.block-left li, .block-right li {
    margin-bottom: 5px;
}

.block-left {
    order: 1;
}

.block-right {
    order: 2;
}

@media (max-width: 768px) {
    .block-left, .block-right {
        width: 100%;
    }
}

#mainmenu {
    display: flex;
}

#leftmenu {
    width: 70%;
    float: left;
    background-color: #fff;
    padding: 10px 20px;
    text-align: justify;
}

#rightmenu {
    width: 30%;
    background-color: #fff;
    padding: 10px;    
}

#rightmenu ul {
    list-style-type: none;  
    padding-left: 0;  
    margin-top: 10px;  
}

#rightmenu ul li {
    background-color: #ccc;  
    padding: 10px;           
    text-align: center;      
    margin-bottom: 5px;      
}

#rightmenu ul li:hover {
    background-color: #aaa;  
}

#rightmenu ul li a {
    text-decoration: none;   
    color: black;           
}

blockquote {
  margin: 0;
  padding: 10px;
  background-color:#dee9f8;
  border-left: 4px solid #4a90e2; /* left stripe */  
}

.block {
    float: left;
    box-sizing: border-box;
}

.blue-box {
  background-color: blue;
}

.block {
    float: left;
    padding: 10px;
}

.block1 {
    width: 40%;
    background-color: #E6F0FA;  
}

.block2 {
    width: 30%;
    background-color: #D9F2E6;  
}

.block3 {
    width: 30%;
    background-color: #F5F5DC;  
}

.clear {
    clear: both;
}
.img_left {float:left; border: 0; margin:2px 8px 8px 0; padding: 0 5px 0 0;}
/* slider-container */
.slider-container {
    float: left;           
    margin-right: 20px;    
    
}

img {
    max-width: 100%;       
    height: auto;
}
.meta {
	margin: 0;
	padding: 0 30px;
	text-align: left;
	font-size: 14px;
	font-style: italic;
}
.date {
	float: left;
}
.articul {margin: 0 7px;}
.img_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    min-width: 99%;
    width: 100%;
    margin-bottom: 8px;
} 
.slider-container a {
    display: block;
    margin-top: 20px;
    color: blue;
    text-decoration: none;
    max-width: 380px;     
}
        #data-holder {
            display: none;
        }   
        
.coments {
    margin: 0 10px;
}
.comment-block {
    display: flex;  
    justify-content: space-between;  
    align-items: baseline;  
    position: relative;
}

.comment-block p {
    margin-right: 40px;  
    margin-left: 20px;  
    padding: 0 10px;
    color: #4A708B;
}

.comment-block:nth-child(even) {
    background-color: #f2f2f2;
}

.buttons {
    display: inline-flex;  
    gap: 5px;  
}

.arrow {
    background-color: #4A708B;
    border: none;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: white;
    cursor: pointer;
}

.up {
    background-color: blue;
}

.down {
    background-color: red;
}
    
/*форма контактов*/
#contact-form {
  max-width: 600px;        
  margin: 0 auto;         
  padding: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;  
  margin-bottom: 15px;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;            
  padding: 8px;
  box-sizing: border-box;  
  font-size: 14px;
}
    
        
ol {
    counter-reset: item; 
    list-style-type: none;  
    padding-left: 10px;  
}

ol li {
    position: relative;  
    margin-bottom: 10px;  
    padding-left: 30px;  
}

ol li::before {
    content: counter(item);  
    counter-increment: item;  
    display: inline-block;  
    width: 25px;  
    height: 25px;  
    line-height: 25px;  
    text-align: center;  
    background-color: #39433c;  
    color: white; 
    border-radius: 10%;  
    font-weight: bold;  
    position: absolute; 
    left: 0;  
    top: 0;  
}

ol li a {
    text-decoration: none; 
    color: #333;  
    transition: color 0.3s ease;  
}

ol li a:hover {
    color: #007bff;  
}   
        
#footer {padding:15px; font-size:15px; color:#fff; background-color: #0d1e17;}
.text-red { color: red; font-style: italic; font-weight:bold;}
.text-green { color: green; font-style: italic; font-weight:bold;}
.text-gray { color:#333; font-style: italic; font-size:18px; font-weight:bold;}

/* share buttons */
#share-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.share-btn {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
    background-color: #0077ff;  
    color: white;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-btn:hover {
    background-color: #0059b3;
}

#share-pinterest {
    background-color: #E60023;  
}

#share-pinterest:hover {
    background-color: #b0001b;  
}

.share-tooltip {
    position: absolute;
    visibility: hidden;
    width: 150px;
    background-color: gray;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    z-index: 1;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.share-btn:hover .share-tooltip {
    visibility: visible;
    opacity: 1;
}

#cookieBanner {
    position: fixed;                        
    bottom: 20px;                           
    right: 20px;                            
    background-color: rgba(0, 0, 0, 0.7);  
    color: white;                           
    padding: 10px;                          
    border-radius: 5px;                     
    max-width: 400px;                       
    z-index: 9999;                          
}

#cookieBanner button {
    background-color: #fff;                 
    color: black;                           
    border-radius: 5px;                     
    cursor: pointer;                        
    padding: 5px 10px;                      
}

        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .pagination a,
        .pagination span.current {
            padding: 3px 10px;
            color: #007bff;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover {
            background-color: #f4f4f4;
        }
        .pagination span.current {
            background-color: #444;
            color: white;
        }
        
th, td {
  text-align: left;
  padding: 5px 10px;
}        
tr:nth-child(even) {background-color: #f2f2f2;}
th {background-color: #f2f2f2;}