:root{--background-color-main:#fff2e1;--background-color-secondary:#ffb703;--main-color:#022439;--secondary-color:#035f9a}.timeline{grid-template-columns:repeat(3,220px);justify-content:center;margin:0;padding:0;list-style:none;display:grid}.timeline li{text-align:center;color:var(--main-color);background:linear-gradient(var(--background-color-secondary) 0 0) content-box, linear-gradient(var(--c,var(--secondary-color)) 0 0) padding-box, linear-gradient(var(--d,90deg), #0000 75%, var(--main-color) 0) border-box;border:20px solid #0000;border-radius:65px;grid-column:span 2;padding:20px;font-family:sans-serif;font-size:25px;font-weight:700;line-height:1.5em;position:relative}.timeline li:nth-child(2n){--d:-90deg;--c:var(--background-color-main);grid-column-end:-1}.timeline li:not(:last-child){margin-bottom:-20px}.timeline li:before,.timelineli:after{content:"";height:.6em;display:block}time{white-space:nowrap;font-size:.65em;position:absolute;top:50%;left:calc(100% + 50px);transform:translateY(-50%)}li:nth-child(2n) time{color:var(--main-color);left:auto;right:calc(100% + 50px)}time:before{content:"";background:repeating-linear-gradient(-90deg, var(--background-color-secondary) 0 5px, #0000 0 10px) 50%/100% 2px no-repeat;width:65px;height:10px;position:absolute;top:calc(50% - 5px);right:calc(100% + 5px)}li:nth-child(2n) time:before{background:repeating-linear-gradient(90deg, var(--secondary-color) 0 5px, #0000 0 10px) 50%/100% 2px no-repeat;left:calc(100% + 5px);right:auto}.timeline h1,.timeline p{display:none}.timeline-container{background:radial-gradient(farthest-side at top right, var(--main-color) 98%, #0000) calc(50% - 10px) 0/20px 20px no-repeat, radial-gradient(farthest-side at bottom right, var(--main-color) 98%, #0000) calc(50% - 10px) 100%/20px 20px no-repeat, linear-gradient(90deg, var(--secondary-color) 50%, var(--background-color-main) 0)}
