:root{--text-color: #333;--border-color: #ccc;--border-radius: .25rem;--gray: #777;--heading-color: #222;--icon-color: var(--heading-color);--header-height: 4rem}:root{--timeline-gray: #ccc;--timeline-black: #000}.timeline{position:relative;overflow:hidden}.timeline::before{content:"";position:absolute;left:calc(25% + 20px);top:10px;width:2px;height:calc(100% - 10px);background:var(--timeline-gray);z-index:0}.timeline .progress-line{position:absolute;left:calc(25% + 20px);top:10px;width:2px;height:calc(100% - 10px);background:var(--timeline-black);z-index:1;pointer-events:none}.timeline ol{list-style:none;margin:0;padding:0}.timeline li{display:flex;align-items:center;position:relative;margin-block:10rem}.timeline li:last-child{margin-block-end:0}.timeline li:first-child{margin-block-start:0}.timeline .year{width:25%;font-size:clamp(4rem,5vw,4.5rem);font-weight:300;color:var(--timeline-gray);opacity:.4;transform:translateY(22px);display:flex;align-items:center;will-change:transform,opacity,color;transition:color .45s ease,opacity .55s ease,transform .75s cubic-bezier(0.22, 1, 0.36, 1)}.timeline .year span{display:none}.line-column{position:relative;width:41px;display:flex;justify-content:center;align-items:center}.line-column::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;background:var(--timeline-gray);border-radius:50%;transform:translate(-50%, -50%) scale(0.78);opacity:.65;z-index:2;will-change:transform,opacity,background;transition:background .3s ease,opacity .35s ease,transform .45s cubic-bezier(0.22, 1, 0.36, 1)}.timeline .content{color:var(--timeline-gray);display:flex;align-items:center;flex:1;font-size:clamp(.9em,4vw,1.1em);margin-block-end:0;max-inline-size:42rem;opacity:.4;transform:translateY(12px);will-change:transform,opacity,color;transition:color .4s ease,opacity .5s ease,transform .6s cubic-bezier(0.22, 1, 0.36, 1)}.timeline li .line-column::before{transition-delay:0s}.timeline li .content{transition-delay:.12s}.timeline li .year{transition-delay:.22s}.timeline li.active .line-column::before{background:var(--timeline-black);opacity:1;transform:translate(-50%, -50%) scale(1)}.timeline li.active .content{color:var(--timeline-black);opacity:1;transform:translateY(0)}.timeline li.active .year{color:var(--timeline-black);opacity:1;transform:translateY(0)}.timeline li:not(.active) .line-column::before,.timeline li:not(.active) .content,.timeline li:not(.active) .year{transition-delay:0s}@media(min-width: 48em){.timeline::before{left:200px}.timeline .progress-line{left:200px}.timeline .year{width:180px}.timeline .year span{display:block}}/*# sourceMappingURL=time-line.css.map */