.banner{width:100vw;display:inline-flex;justify-content:left;background:#1a1a1a;background:linear-gradient(90deg,#1a1a1a 0%,#000 50%,#1a1a1a 100%)}.banner-content{display:flex;position:relative;left:max(50% - 30rem,80px);width:calc(100% - max(50% - 30rem,80px));max-width:75rem;@media(max-width:60rem){left: initial; width: 100%;}@media(max-width:768px){margin-left: 0;}}.hero{width:25%;min-height:25rem;display:flex;flex-direction:column;justify-content:center;align-items:left;@media(max-width:60rem){width: 35%; align-items: center;}img { width: 12rem; } h1 { color: white; }}.banner-img{width:100%;height:100%;min-height:15rem;object-fit:cover}@media(max-width:768px){.hero{display:none}.banner-img{width:100%}}main{margin-top:1rem}.banner-img-link{width:75%}@media(max-width:768px){.banner-img-link{width:100%}}.blog-meta{display:flex;align-items:baseline;margin-block:0}.breadcrumb{ol { display: flex; flex-wrap: wrap; list-style: none; gap: 0.25em; padding: 0; margin-block: 0; margin-right: 1em; li+li::before { content: ">"; color: gray; margin-inline: 0.1em; } } a { color: gray; text-decoration: none; }}.meta-info{margin-left:auto;color:gray}.footer{width:100%;height:90px;border:solid;border-width:2px 0 0;border-color:var(--text);margin-top:auto;ul { list-style: none; margin: 0; margin-left: auto; padding: 10px 40px; display: flex; height: 100%; padding: 0; justify-content: center; align-items: center; } li { margin: 8px 20px; } a { font-weight: bold; color: var(--text-muted); text-decoration: none; }}@media(max-width:768px){.footer{ul { flex-direction: column; }}}.header{position:fixed;top:0;width:100vw;height:80px;display:flex;z-index:10;justify-content:center;background-color:var(--bg-light);box-shadow:0 0 10px 2px rgba(0,0,0,.2)}.navbar{height:100%;width:100vw;max-width:60rem;display:inline-flex;margin:0 80px;@media(max-width:60rem){margin: 0;}.logo { height: 60px; margin: auto; margin-left: 20px; img { height: 100%; } } .menu-button { display: none; margin: auto; margin-right: 20px; @media (max-width: 768px) { display: initial; } } .menu { align-items: center; list-style: none; margin-right: 20px; display: flex; a { margin: 0 20px; text-decoration: none; font-weight: bold; color: var(--text); } @media (max-width: 768px) { display: none; } }}.side-panel{position:fixed;display:none;flex-direction:column;top:0;right:0;z-index:12;height:100vh;width:60vw;box-shadow:0 0 10px 2px rgba(0,0,0,.2);background-color:var(--bg-light);transform:translateX(105%);transition:transform .3s ease;@media(max-width:768px){display: flex;}&.open { transform: translateX(0); } .menu-button { margin: 20px; margin-left: auto; } ul { padding: 0; list-style: none; display: flex; flex-direction: column; margin: 0 10%; gap: 20px; } a { text-decoration: none; font-weight: bold; color: var(--text); display: flex; align-items: center; img { height: 2em; rotate: 90deg; margin-left: auto; fill: var(--accent); } }}.menu-button{height:fit-content;padding:.5rem;border-radius:50%;border:1px solid var(--bg-light);background-color:var(--bg-light);transition:background-color .3s ease,border .3s ease;img { height: 1.75em; display: block; } &:active { background-color: var(--bg-dark); border: 1px solid var(--bg-dark); }}.backdrop{position:fixed;display:none;inset:0;&.open { display: initial; }}.index-entry{margin-block:2rem;border-top:solid 1.5px #d3d3d3;.titlebar { display: inline-flex; width: 100%; a { text-decoration: none; color: black; } time { margin-block: auto; margin-left: auto; margin-right: 2em; color: gray; text-align: right; @media (max-width: 768px) { margin-right: 0; } } } .summary { display: flex; gap: 10vw; p { margin-block: 0; } a { text-decoration: none; font-weight: bold; color: black; display: flex; align-items: center; margin-left: auto; margin-top: auto; flex-shrink: 0; img { height: 2em; rotate: 90deg; margin-left: 5px; fill: var(--accent); } } @media (max-width: 768px) { flex-direction: column; gap: 0; a { margin-left: 0; margin-top: 1em; } } }}.banner-image{text-align:center;padding-block:1.5rem;margin-block:0}.banner-image img{max-width:100%;height:auto;border-radius:var(--image-radius);@media(max-width:60rem){border-radius: 0;}}main>.banner-image{margin-inline:auto}.bar-heading{margin-left:auto;margin-right:auto;margin-top:3rem;max-width:60rem;padding:.25rem 0;background-color:var(--accent);border-radius:var(--box-radius);@media(max-width:60rem){border-radius: 0;}span { margin: 0.5em; font-size: 2em; font-weight: bold; color: white; text-transform: capitalize; @media (max-width: 60rem) { margin: 80px; } @media (max-width: 768px) { margin: 10vw; } }}.button{padding-block:.5em;margin-block:1rem;a { display: inline-block; justify-content: center; align-items: center; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 0.6rem 1.4rem; margin: 0; width: auto; color: white; border-radius: 4px; background-color: var(--accent); }}.split-container{display:flex;gap:3rem;padding-block:1rem;margin-block:1.5rem;.split-left, .split-right { flex: 1; & > * { margin-inline: 0; } & > :first-child { margin-top: 0; } & > :last-child { margin-bottom: 0; } }}@media(min-width:calc(768px + 1px)){.split-container{&.exp-left { margin-left: auto; } &.exp-right { margin-right: auto; } &.exp-all { margin-inline: auto; }}}@media(max-width:768px){.split-container{flex-direction:column;gap:2rem;&.ms-rev { flex-direction: column-reverse; }}}.timeline-event{display:grid;grid-template-areas:"textbox line img";grid-template-columns:1fr auto 1fr;margin-block:3rem;.textbox { grid-area: textbox; height: fit-content; align-self: center; margin-block: 25px; padding: 0.5rem 50px; border-radius: var(--box-radius) 0 0 var(--box-radius); background-color: var(--bg-dark); } .line { grid-area: line; background-color: var(--accent); width: 5px; } .img { grid-area: img; display: flex; align-items: center; margin-block: 25px; .bar { height: 5px; width: 50px; flex: 0 0 auto; background-color: var(--accent); } img { object-fit: contain; width: 100%; height: fit-content; border-radius: var(--image-radius); } }}.timeline-event.flip{grid-template-areas:"img line textbox";.textbox { border-radius: 0 var(--box-radius) var(--box-radius) 0; } .img { flex-direction: row-reverse; }}@media(max-width:768px){.timeline-event,.timeline-event.flip{grid-template-areas:"line textbox" "line img";.textbox { margin-inline: 0; margin-block: 25px 0; padding-inline: 30px; border-radius: 0 var(--box-radius) 0 0; } .img { margin-block: 0 25px; margin-inline: 0; background-color: var(--bg-dark); padding: 0 30px 30px 30px; border-radius: 0 0 var(--box-radius) 0; img { border-radius: var(--image-radius); } .bar { display: none; } }}}.timeline-label{display:flex;height:5rem;position:relative;justify-content:center;align-items:center;margin-block:3rem;.label { position: absolute; font-size: 2em; font-weight: bold; line-height: 50px; margin: 0 50px; background-color: var(--bg); } .label.right { left: 50%; } .label.left { right: 50%; } .line { width: 5px; height: 100%; background-color: var(--accent); flex-shrink: 0; }}@media(max-width:768px){.timeline-label{justify-content:left;.label { margin: 0 30px; position: initial; }}}[class*=timeline-]~[class*=timeline-]{margin-top:-3rem}