/* ========================= */
/* WRAPPER */
/* ========================= */

.lore-wrapper{
    display:grid;
    grid-template-columns:220px 850px 220px;
    width:1390px;
    margin:10px auto;
    column-gap:50px;
}

/* ========================= */
/* SIDEBARS */
/* ========================= */

.lore-sidebar{
    grid-column:1;
    position:relative;
    width:220px;
}

.lore-sidebar-right{
    grid-column:3;
    position:relative;
    width:220px;
}

/* ========================= */
/* MAIN */
/* ========================= */

.lore-main{
    grid-column:2;
}

/* ========================= */
/* SIDEBAR CARD */
/* ========================= */

.sidebar-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);
    padding:22px;
    border-radius:8px;
}

.sidebar-card h3{
    font-family:"OldTyper";
    font-size:15px;
    letter-spacing:1px;
    margin-bottom:18px;
    color:#ffffff;
}

.sidebar-card ul{
    list-style:none;
    padding:0;
}

.sidebar-card li{
    margin-bottom:12px;
}

.sidebar-card a{
    font-family:Arial,sans-serif;
    font-size:14px;
    color:#bdbdbd;
    text-decoration:none;
    transition:0.2s;
}

.sidebar-card a:hover{
    color:white;
    padding-left:4px;
}

.sidebar-card a.active{
    color:white;
}

/* ========================= */
/* PAGE TITLE */
/* ========================= */

.lore-main h1{
    font-family:"OldTyper";
    font-size:40px;
    margin-bottom:25px;
}

/* ========================= */
/* SECTION TITLES */
/* ========================= */

.lore-section h2{
    position:relative;
    font-family:"OldTyper";
    margin-top:60px;
    margin-bottom:30px;
    padding-bottom:10px;
}

.lore-section h2::after{

    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:rgba(255,255,255,0.35);
}

/* ========================= */
/* ERA DIVIDER */
/* ========================= */

.era-divider{

    margin:60px 0 25px 0;

    font-family:"OldTyper";

    font-size:14px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:rgba(255,255,255,0.6);

    border-bottom:1px solid rgba(255,255,255,0.2);

    padding-bottom:6px;
}

/* ========================= */
/* TIMELINE SYSTEM */
/* ========================= */

.lore-section{

    position:relative;
    padding-left:50px;

}

/* timeline line */

.lore-section::before{

    content:"";
    position:absolute;

    left:12px;
    top:0;
    bottom:0;

    width:2px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
}

/* ========================= */
/* ENTRY */
/* ========================= */

.lore-entry{

    position:relative;
    margin-bottom:40px;

    opacity:0;
    transform:translateY(15px);

    animation:timelineReveal .6s ease forwards;
}

/* reveal delay */

.lore-entry:nth-child(1){animation-delay:.05s;}
.lore-entry:nth-child(2){animation-delay:.1s;}
.lore-entry:nth-child(3){animation-delay:.15s;}
.lore-entry:nth-child(4){animation-delay:.2s;}
.lore-entry:nth-child(5){animation-delay:.25s;}

/* ========================= */
/* NODE */
/* ========================= */

.lore-entry::before{

    content:"";
    position:absolute;

    left:-42px;
    top:7px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:white;

    box-shadow:
        0 0 6px rgba(255,255,255,0.6),
        0 0 10px rgba(255,255,255,0.3);

    transition:box-shadow .2s ease;
}

/* hover glow */

.lore-entry:hover::before{

    box-shadow:
        0 0 8px rgba(255,255,255,0.9),
        0 0 18px rgba(255,255,255,0.6),
        0 0 26px rgba(255,255,255,0.4);
}

/* ========================= */
/* YEAR TITLE */
/* ========================= */

.year-title{

    font-family:"OldTyper";
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
    letter-spacing:0.4px;

    transition:color .2s;
}

.lore-entry:hover .year-title{
    color:white;
}

/* ========================= */
/* EVENT LIST */
/* ========================= */

.year-events{

    list-style:none;
    padding:0;
    margin-top:15px;
}

.year-events li{

    position:relative;
    padding-left:18px;
    margin-bottom:14px;

    font-family:Arial,sans-serif;
    line-height:1.6;
}

.year-events li::before{

    content:"•";

    position:absolute;
    left:0;
    top:0.55em;

    transform:translateY(-50%);

    font-size:22px;
    font-weight:bold;
    color:white;
}

/* ========================= */
/* SCROLL PROGRESS */
/* ========================= */

.timeline-progress{

    position:fixed;

    top:0;
    left:0;

    height:3px;
    width:0%;

    background:white;

    z-index:2000;

    transition:width .15s;
}

/* ========================= */
/* TIMELINE ANIMATION */
/* ========================= */

@keyframes timelineReveal{

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

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:900px){

.lore-wrapper{

display:block;
width:92%;
margin:20px auto;

}

.lore-sidebar,
.lore-sidebar-right{

width:100%;
position:relative !important;
transform:none !important;

margin-top:40px;

}

.lore-main h1{
font-size:28px;
}

.lore-section h2{
font-size:20px;
margin-top:40px;
}

}