body {
  background: #0c5a72;
  color: white;
  font-family: sans-serif;
  font-size: 0.875em;
}
  
center {
  text-align: center;
}
  
/* Contains everything */
.wrapper {
  width: 1150px;
  background: #12282f;
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0px solid #12282f;
  border-right: 0px solid #12282f;  
  margin-bottom: -10px;
}
  
/* Contains main and sidebar divs */
.wrapper-2 {
  position: relative;
  display: flex;
  flex-wrap: wrap; /* ДОБАВЛЕНО: позволяет постам в блоге переноситься на новую строку */
  align-items: stretch;
}
  
/* Header and footer images */
.header, .footer {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)), url("/images/bg.jpg");
  background-size: cover;
}
  
.footer {
  height: 50px;
}
  
.header img {
  border-top: 0px;
}
  
/* Big title at the top of the page. */  
.title {
  padding: 15px 10px 10px 20px;
}
  
/* Override default margins/padding for headings. */
.title h1, .title h2, .title h3 {
  padding: 0;
  margin: 0;
}

/* Container for top row of links. */
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
}
  
/* Div style for individual links. */
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0px solid red;
}
  
.link a {
  color: white;
  text-decoration: none;
}

/* These three classes are just for defining the boundaries and size of the main and sidebar columns. */
.main, .sidebar-right {
  display: flex;
  flex-direction: column;
}
  
.sidebar-left, .sidebar-right {
  width: 160px !important;
  flex-shrink: 0;
}

.sidebar-left {
  margin-left: 10px;
  order: 1;
}
  
.main {
  margin-left: 10px;
  width: auto;
  flex: 1;
  order: 2;
}
  
.sidebar-right {
  margin-right: 10px;
  margin-left: 10px;
  order: 3;
}
  
/* Box used for individual sections in the sidebar, center column, etc. */
.box {  
  padding: 5px 10px 0px 10px;
  background: #e2dcc1;
  color: #12282f;
  border-top: 5px solid #187b9b;
  border-bottom: 5px solid #187b9b;
  margin: 10px 0px 15px 0px;
}
  
/* Prevent overflow of large images in main text areas. */
.box img {
  max-width: 100%;
  height: auto;
}
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
***/
.inner {
  
}

/* Растягиваем box внутри колонок */
.sidebar-left > .box,
.main > .box,
.sidebar-right > .box {
  flex: 1;
}

/* For narrow screens. Makes the sidebars narrower, and makes width of the center/main div 50% of the viewport width. */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
  }
  .main {
    width: 50vw;
  }
}
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
  }
  .sidebar-left, .sidebar-right {
    width: 160px;
  }
  .main {
    margin-left: 10px;
    width: 52vw;
  }
}
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding: 0;
    position: relative;
    flex-direction: column;
  }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    order: initial;
  }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
  }
}
  
/* Пастельно-розовый классический скролл-бар 2000-х с бледным ползунком */
.scrollable-article {
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 10px 5px 10px;
}

.scrollable-article::-webkit-scrollbar {
    width: 16px;
    background: #f48fb1;
}

.scrollable-article::-webkit-scrollbar-track {
    background: #f48fb1;
    border: 1px solid #f8bbd0;
    border-right: 2px solid #f48fb1;
    border-bottom: 2px solid #f48fb1;
    box-shadow: inset 1px 1px 0px #f8bbd0;
}

.scrollable-article::-webkit-scrollbar-thumb {
    background: #fce4ec;
    border: 1px solid #f8bbd0;
    border-right: 2px solid #ec407a;
    border-bottom: 2px solid #ec407a;
    min-height: 40px;
    border-radius: 2px;
}

.scrollable-article::-webkit-scrollbar-thumb:hover {
    background: #f06292;
}

.scrollable-article::-webkit-scrollbar-button {
    background: #fce4ec;
    border: 1px solid #f8bbd0;
    border-right: 2px solid #f48fb1;
    border-bottom: 2px solid #f48fb1;
    height: 18px;
}

.scrollable-article::-webkit-scrollbar-button:start:decrement {
    background: #fce4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,2 2,6 8,6' fill='%23ec407a'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

.scrollable-article::-webkit-scrollbar-button:end:increment {
    background: #fce4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,8 2,4 8,4' fill='%23ec407a'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

.scrollable-article::-webkit-scrollbar-button:hover {
    background: #f8bbd0;
}

.scrollable-article::-webkit-scrollbar-corner {
    background: #fce4ec;
}

/* --- Стили для блога --- */
.blog-post {
    margin-bottom: 15px;
    width: 100%; /* Гарантирует, что пост займет всю строку и перенесется вниз */
    border: 3px double #333;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0; /* Запрещает посту сжим8аться */
}

.blog-post:first-of-type {
    margin-top: 20px;
}

.blog-post .article-content {
    padding: 0;
    width: 100%;
    background: none;
    border: none;
}

.blog-post .article-content h2 {
    background: #facbd8;
    margin: 0 0 15px 0;
    padding: 0.35em 0.25em 0.3em 0.25em;
    text-align: left;
    border-bottom: 3px double #333;
    padding-left: 20px;
}

.blog-post img.postimage {
    border: none;
    margin: 0 0 10px 0;
    max-width: 100%;
    display: block;
    padding: 0 20px;
    box-sizing: border-box;
}

.blog-post .article-content p {
    padding: 0 20px;
    margin: 10px 0;
}

.article-footer {
    margin-top: 15px;
    padding: 10px 20px 15px 20px;
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.date-notes {
    font-size: 0.9em;
    color: #666;
}

.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    background: #facbd8;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.85em;
    border: 1px solid #333;
}

.tag a {
    color: #4f3d46;
    text-decoration: none;
}

.tag a:hover {
    color: #d6083a;
}

/* Блок внизу страницы */
#main-footer {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
    border: 3px double #333;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

#main-footer a {
    color: #4f3d46;
    text-decoration: none;
    padding: 5px 10px;
}

#main-footer a:hover {
    color: #d6083a;
    text-decoration: underline;
}

#main-footer .separator {
    color: #ccc;
    margin: 0 5px;
}

/* Полная ширина для блога */
.full-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Адаптивность для блога */
@media(max-width:880px) {
    .blog-post .article-content p {
        padding: 0 15px;
    }
    
    .blog-post img.postimage {
        padding: 0 15px;
    }
    
    .article-footer {
        padding: 10px 15px 15px 15px;
    }
    
    .blog-post .article-content h2 {
        padding-left: 15px;
    }
    
    .blog-post .article-content {
    padding: 0;
    width: 100%;
    background: none;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
}
}

/* Радужный переливающийся текст */
.rainbow-text {
    background: linear-gradient(
        to right,
        #ff0000, #ff7f00, #ffff00, #00ff00, 
        #0000ff, #4b0082, #9400d3, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rainbow-shift 3s linear infinite;
    font-weight: bold;
}

@keyframes rainbow-shift {
    0% { background-position: 200% center; }
    100% { background-position: 0% center; }
}

/* Курсор при нажатии - Hot Pink Glitter Pointer */
*:active {
    cursor: url('https://cdn.cursors-4u.net/cursors/animated/hot-pink-glitter-pointer-b0d4f6e-32.cur'), 
            url('https://cdn.cursors-4u.net/cursors/animated/hot-pink-glitter-pointer-b0d4f6e-32.png'), 
            auto !important;
}

/* Розовый градиентный текст */
.pink-gradient {
    background: linear-gradient(
        to right,
        #FF1493, #FF69B4, #FFB6C1, #FF69B4, #FF1493
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pink-shift 3s linear infinite;
    font-weight: bold;
}

@keyframes pink-shift {
    0% { background-position: 200% center; }
    100% { background-position: 0% center; }
}

/* Ссылки в сумочке */
.bag-link {
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.bag-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #FF1493, #FFB6C1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.bag-link:hover::after {
    transform: scaleX(1);
}

.bag-link:hover {
    filter: brightness(1.2);
}

/* Галерея картинок */
.image-gallery {
    display: flex !important;
    gap: 10px;
    margin: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.image-gallery img {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
    box-sizing: border-box;
    flex-shrink: 1 !important;
}

/* Адаптивность для галереи */
@media(max-width:880px) {
    .image-gallery {
        flex-direction: column !important;
    }
    
    .image-gallery img {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ИСПРАВЛЕНИЕ ГАЛЕРЕИ - принудительные стили */
/* Галерея картинок */
.blog-post .image-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 10px 0 !important;
    padding: 0 20px !important; /* Отступы как у текста */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.blog-post .image-gallery img {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.blog-post .article-content {
    padding: 0 !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

@media(max-width:880px) {
    .blog-post .image-gallery {
        flex-direction: column !important;
        padding: 0 15px !important; /* Меньшие отступы на мобильных */
    }
    
    .blog-post .image-gallery img {
        width: 100% !important;
        max-width: 100% !important;
    }
}