:root{--logo-width: 80px;--logo-padding: 20px;--stroke-width: 10px;--header-width: 500px}body{margin:0;font-family:Comic Sans MS}.grid{display:grid;grid-template-columns:[header] 500px [main] 1fr}header{position:sticky;grid-column:header;padding:0 2em;top:0;bottom:0;max-height:100vh;overflow:auto;background:#402780;background:#000;color:#fff}main{grid-column:main;grid-row:1;padding:0 110px}header h1{font-size:120px;line-height:.9;margin:0;padding:60px 0 30px}ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}.now{display:block;height:60px;width:60px;margin:var(--logo-padding) auto;border-radius:50%;text-align:center;border:2px solid black;padding:10px;line-height:60px;text-transform:lowercase}.now-container-ughhhh:after{content:"";background:no-repeat center/100% 100% url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20viewBox='0%200%20100%20100'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2099%201%20C%2099%2099,%201%201,%201%2099'%20stroke-width='4'%20vector-effect='non-scaling-stroke'%20stroke='black'%20fill='transparent'%20stroke-dasharray='10%204'%20/%3e%3c/svg%3e");height:200px;width:50%;display:block;box-sizing:border-box;border-left:calc(var(--logo-width) / 2 + var(--logo-padding)) solid transparent}.currently li{border:4px solid black;height:200px;width:300px;margin-right:60px}ul.timeline{display:block}.content-ughhh{display:flex;width:100%;align-items:center}li:nth-child(2n) .content-ughhh{flex-direction:row-reverse}.timeline li:not(:last-child):after{content:"";background:no-repeat center/100% 100% url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20viewBox='0%200%20100%20100'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%201%201%20C%201%2099,%2099%201,%2099%2099'%20stroke-width='4'%20vector-effect='non-scaling-stroke'%20stroke='black'%20fill='transparent'%20stroke-dasharray='10%204'%20/%3e%3c/svg%3e");height:200px;width:100%;display:block;box-sizing:border-box;border:0 solid transparent;border-width:0 calc(var(--logo-width) / 2 + var(--logo-padding))}.timeline li:not(:last-child):nth-child(2n):after{background:no-repeat center/100% 100% url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20viewBox='0%200%20100%20100'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M%2099%201%20C%2099%2099,%201%201,%201%2099'%20stroke-width='4'%20vector-effect='non-scaling-stroke'%20stroke='black'%20fill='transparent'%20stroke-dasharray='10%204'%20/%3e%3c/svg%3e")}.logo{flex-shrink:0;display:inline-block;padding:var(--logo-padding);width:var(--logo-width);height:var(--logo-width)}.timeline .info{display:inline-block;padding:6px 30px;border:4px solid black;margin:0 120px;position:relative}.timeline .info:before{content:"";position:absolute;top:50%;transform:translateY(-50%);height:4px;width:100px;display:block;background:#000}.timeline li:nth-child(odd) .info:before{right:100%}.timeline li:nth-child(2n) .info:before{left:100%}.lab{background:#000;color:#fff}.lab li{height:100px;flex-grow:1;flex-shrink:1;display:flex;align-items:center;justify-content:center;width:400px}.lab li:nth-child(2n){flex-direction:row-reverse}blockquote{position:relative;color:#fff;background:#000;margin:0;height:100vh;font-size:30px;display:flex;flex-direction:column;align-items:center;justify-content:center}blockquote:before,blockquote:after{content:"";height:80px;width:80px;position:absolute;left:var(--header-width);bottom:100%}blockquote:before{background:#000;border-radius:50% 50% 50% 0}blockquote:after{background:#fff;border-radius:0 0 0 50%}blockquote p{margin:0}@media(max-width:1200px){.content-ughhh{flex-direction:column!important}.now-container-ughhhh:after,.timeline li:not(:last-child):after{width:100%;border:0;background:no-repeat center/100% 100% url(./up.svg)!important}}