:root{
    --main: #f4e9d0;
    --accent: #8b0000;
    --second-accent: #d4af37;
}

body{
    margin:0;
    font-family:'Merriweather', serif;
    background: url("foto/TimeLine/TL.png") no-repeat center center fixed;
    background-size: cover;
}

/* структура */
.wrapper{
    display:flex;
}

/* ВСЕ ФОТО СНАЧАЛА СКРЫТЫ */
section{
    display:none;
    min-height:60vh;
    align-items:center;
    justify-content:center;
}

/* ПОКАЗ ВЫБРАННОГО ПЕРИОДА */
section.show{
    display:flex;
}

/* основной блок */
.content{
    display:flex;
    align-items:center;
    margin-left:400px;

    width:70%;
    max-width:1000px;

    gap:15px;

    animation: fadeIn 0.6s ease;
}

/* анимация появления */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* текст */
.text-block{
    width:45%;
    text-align:right;
}

/* линия между текстом и изображением */
.divideh{
    width:10px;
    height:370px;
    background:var(--accent);
}

/* изображение */
.img-block{
    width:70%;
    height:420px;

    object-fit:contain;

    flex-shrink:0;

    display:block;
}

/* год */
h2{
    color:var(--accent);
    font-size:44px;
    margin-bottom:10px;
}

/* текст */
p{
    color:var(--main);
    line-height:1.6;
}

/* вертикальный таймлайн */
.timeline5{

    position:fixed;
    right:40px;
    top:50%;
    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    gap:32px;

    padding:30px 25px;

    background:var(--accent);

    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    z-index:1000;
}

/* годы */
.timeline5 a{

    text-decoration:none;
    color:#f6f1e7;

    font-size:18px;

    position:relative;
    text-align:center;

    transition:.3s;
    padding-bottom:8px;

    cursor:pointer;
}

/* линия под цифрой */
.timeline5 a::after{

    content:"";
    position:absolute;

    left:50%;
    bottom:-6px;

    transform:translateX(-50%);

    width:0;
    height:2px;

    background:var(--second-accent);

    transition:.3s;
}

/* hover */
.timeline5 a:hover::after{
    width:28px;
}

/* АКТИВНЫЙ ГОД */
.timeline5 a.active{
    color:var(--second-accent);
}

.timeline5 a.active::after{
    width:28px;
}

/* отключаем прокрутку */
html{
    scroll-behavior:auto;
}

/* кнопка вверх */
.scroll-top{
    position:fixed;
    left:30px;
    bottom:30px;
    width:45px;
    height:45px;
    background:var(--accent);
    color:white;
    text-align:center;
    line-height:45px;
    border-radius:50%;
    text-decoration:none;
    opacity:0;
}

.scroll-top.show{
    opacity:1;
}


/* ФУТЕР ВСЕГДА ВНИЗУ */

html,
body{
    min-height:100%;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.wrapper{
    flex:1;
}

.footer-bottom{
    margin-top:auto;
    flex-shrink:0;
}

/* =========================
   СТАРТОВАЯ ИНСТРУКЦИЯ
========================= */
.timeline-intro {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: stretch;

    gap: 28px;

    width: 70%;
    max-width: 900px;

    color: var(--main);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

    z-index: 10;
}


/* =========================================================
   ДЕКОРАТИВНАЯ ВЕРТИКАЛЬНАЯ ЛИНИЯ
   ========================================================= */

.intro-line {
    width: 5px;
    min-height: 190px;

    flex-shrink: 0;

    background: linear-gradient(
        to bottom,
        var(--second-accent),
        var(--accent),
        var(--second-accent)
    );

    border-radius: 5px;

    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.25);
}


/* =========================================================
   ОСНОВНОЙ БЛОК
   ========================================================= */
.timeline-intro {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    gap: 30px;

    width: 70%;
    max-width: 850px;

    color: var(--main);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

    z-index: 10;
}


/* =========================================================
   ВЕРТИКАЛЬНАЯ ЛИНИЯ
   ========================================================= */

.intro-line {
    width: 5px;
    height: 170px;

    flex-shrink: 0;

    background: var(--accent);

    border-radius: 3px;
}


/* =========================================================
   БЛОК С ТЕКСТОМ
   ========================================================= */
.timeline-intro {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 75%;
    max-width: 950px;

    z-index: 10;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}


/* =========================================================
   ОСНОВНАЯ КАРТОЧКА
   ========================================================= */

.intro-content {
    position: relative;

    padding: 45px 55px 48px;

    background: var(--main);


    border-radius: 10px;

    border-left: 7px solid var(--accent);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);

    overflow: hidden;
}


/* =========================================================
   ДЕКОРАТИВНЫЙ ЭЛЕМЕНТ
   ========================================================= */

.intro-content::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 120px;
    height: 4px;

    background: var(--second-accent);
}


 
 


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.intro-content h1 {
    position: relative;

    margin: 0 0 22px;

    padding-bottom: 18px;

    color: var(--accent);

    font-size: 42px;

    line-height: 1.2;

    font-weight: 500;
}


/* тонкая линия под заголовком */

.intro-content h1::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 65px;
    height: 2px;

    background: var(--second-accent);
}


/* =========================================================
   ТЕКСТ
   ========================================================= */

.intro-content p {
    margin: 0;

    max-width: 760px;

    color: #383431;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   ОТДЕЛЬНАЯ ДЕКОРАТИВНАЯ ЛИНИЯ
   ========================================================= */

.intro-line {
    display: none;
}
/* исчезновение инструкции */

.timeline-intro.hide{

    opacity:0;

    transform:
        translate(-50%, -60%);

    pointer-events:none;
}


/* адаптация */

@media(max-width:700px){

    .timeline-intro{

        width:80%;

        gap:20px;

    }


    .intro-line{
        height:140px;
        width:4px;
    }


    .intro-content h1{
        font-size:30px;
    }


    .intro-content p{
        font-size:15px;
    }

}