/* Основные стили */
:root {
    --font-family: "Courier New", Courier, monospace;
    --font-size: 16px;
    --text-color: white;
    --link-color: white;
    --select-bg-color: white;
    --select-color: black;
    --visited-link-color: #7f8c8d;
    --highlight-color: darkorange;
    --event-day-bg-color: white;
    --event-day-text-color: black;
    --current-month-bg-color: white;
    --current-month-text-color: black;
    --active-bg-color: white;
    --active-text-color: black;
    --back-button-bg-color: white;
    --back-button-text-color: black;
    --show-more-bg-color: white;
    --show-more-text-color: black;
    --paragraph-spacing: 1em; 
}

/* Добавляем стиль выделения текста */
::selection {
    background: var(--select-bg-color); /* Белый цвет фона */
    color: var(--select-color);      /* Черный цвет текста */
}

body {
    background-color: black;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
}

a {
    color: var(--text-color);
}

a:visited {
    color: var(--visited-link-color);
}


.header {
    text-align: center;
    margin-top: 20px;
    transition: transform 0.5s ease-in-out;
}

.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.menu {
    margin-right: auto;
}

.menu a {
    color: var(--link-color);
    text-decoration: underline;
    margin: 0 10px;
}

.menu a:hover {
    text-decoration: none;
}

.menu a:visited {
    color: var(--visited-link-color); /* Стандартный цвет для посещенных ссылок */
}

.menu a.active {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
    padding: 2px 4px;
    margin: 0 6px;
    border-radius: 4px;
    text-decoration: none;
}

.language-menu {
    margin-left: auto;
}

.language-menu a {
    color: var(--link-color);
    text-decoration: underline;
    margin: 0 10px;
}

.language-menu a:hover {
    text-decoration: none;
}

.language-menu a:visited {
    color: var(--visited-link-color); /* Стандартный цвет для посещенных ссылок */
}

.language-menu a.active {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.content-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.content {
    white-space: normal; /* pre-wrap */
    width: 60%;
}

.sidebar {
    width: 35%;
    padding-left: 20px;
    border-left: 1px solid var(--text-color);
}

.block {
    margin-bottom: 20px;
}

.block-title {
    text-align: center;
    font-size: var(--font-size);
    margin-bottom: 10px;
    font-weight: normal; /* Убираем жирный шрифт */
    color: var(--text-color);
}

pre {
    white-space: pre; /*-wrap; /* Расширяет текст, чтобы он занимал всю ширину */
    overflow: auto;
    font-family: var(--font-family);
    font-size: var(--font-size);
}


.calendar-container {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    width: 100%; /* Устанавливаем фиксированную ширину */
}

.calendar-wrapper {
    display: flex;
}

.calendar {
    text-align: left;
    font-size: var(--font-size);
    line-height: 1.5;
    margin: 0 10px;
    width: 100%; /* Устанавливаем фиксированную ширину */
}

.current-day {
    background-color: var(--highlight-color);
    color: var(--event-day-text-color);
    border-radius: 4px;
}

.event-day {
    background-color: var(--event-day-bg-color);
    color: var(--event-day-text-color);
    text-decoration: none;
    border-radius: 4px;
}

.event-day:visited {
    color: var(--visited-link-color);
}

.current-month {
    background-color: var(--current-month-bg-color);
    color: var(--current-month-text-color);
}

.footer {
    text-align: center;
    margin-top: 20px;
}

.publication {
    margin-bottom: 20px;
}

.publication-date {
    display: inline-block;
}

.more-content {
    display: none;
    white-space: normal; /* pre-wrap */
    overflow: hidden;
    border-right: .15em solid transparent; /* cursor */
}

.more-link {
    display: inline-block;
    background-color: var(--show-more-bg-color);
    color: var(--show-more-text-color);
    padding: 0 10px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.more-link:hover {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
    text-decoration: none; /* Убираем подчеркивание */
}

.publication a {
    color: var(--text-color); /* Исправлено */
    text-decoration: underline;
}

.publication a:visited {
    color: var(--visited-link-color); /* Стандартный цвет для посещенных ссылок */
}

.publication {
    white-space: normal;
}

.show-more-container {
    text-align: center;
    margin: 20px 0;
    width: 100%;
    display: none; /* Скрываем по умолчанию */
}

.show-more-btn {
    display: inline-block;
    background-color: var(--show-more-bg-color);
    color: var(--show-more-text-color);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 10px;
}

.show-more-btn:hover {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
}

.back-button {
    display: inline-block;
    background-color: var(--back-button-bg-color);
    color: var(--back-button-text-color);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    margin-right: 10px;
    cursor: pointer;
}

.back-button:hover {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
}

.hidden-block {
    transition: opacity 0.8s ease-in; /* увеличено время для плавности */
    margin-bottom: var(--paragraph-spacing); /* Интервал после каждого абзаца */
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Добавлен промежуток между кнопками */
}

@keyframes rotate {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}

@keyframes scale {
    from { transform: scale(1); }
    to { transform: scale(1.5); }
}

@keyframes translate {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

@keyframes skew {
    from { transform: skew(0, 0); }
    to { transform: skew(20deg, 20deg); }
}

@keyframes rotate3D {
    from { transform: rotate3d(1, 1, 0, 0deg); }
    to { transform: rotate3d(1, 1, 0, 360deg); }
}

.rotate {
    animation: rotate 1s ease-in-out;
}

.scale {
    animation: scale 1s ease-in-out;
}

.translate {
    animation: translate 1s ease-in-out;
}

.skew {
    animation: skew 1s ease-in-out;
}

.rotate3D {
    animation: rotate3D 1s ease-in-out;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--highlight-color); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in {
    animation: fadeIn 0.8s ease-in; /* увеличено время для плавности */
}

.fade-out {
    animation: fadeOut 0.8s ease-out; /* увеличено время для плавности */
}

.calendar-navigation {
    text-align: center;
    margin-top: 10px;
}

.calendar-navigation a,
.calendar-navigation .month-link {
    color: var(--link-color);
    text-decoration: none;
    margin: 0 5px;
    cursor: pointer;
}

.calendar-navigation .current-month {
    background-color: var(--current-month-bg-color);
    color: var(--current-month-text-color);
}

@media (max-width: 600px) {
    .header pre {
        display: none;
    }

    .header-text {
        display: block;
    }

    .content-container {
        flex-direction: column;
    }

    .content, .sidebar {
        width: 100%;
        padding: 0;
        border: none;
    }

    .calendar-wrapper {
        display: block; /* Показываем только один месяц на мобильных устройствах */
    }

    .calendar {
        margin: 0 auto;
    }

    #next-month-display {
        display: none; /* Скрываем второй месяц на мобильных устройствах */
    }
}

@media (min-width: 601px) {
    .header-text {
        display: none;
    }
}

.block-title::before {
    content: "*** ";
}
.block-title::after {
    content: " ***";
}