style.css

@import url(https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&display=swap);*{box-sizing:border-box;font-family:Assistant,sans-serif}body,html{color:#000;font-size:13pt;height:100%;margin:0;width:100%}a{color:#007bff}a:active,a:hover,a:visited{color:#0056b3}article,blockquote,ol,p,pre,table,time,ul{line-height:1.5em;margin-bottom:1em;text-align:justify}ol,ul{padding-left:1em}ol li,ul li{margin-bottom:1em}time{font-style:italic}img{max-width:100%}blockquote{margin-left:0;margin-right:0;padding:.1em 2em}pre{overflow-x:auto;padding:1em}code{padding:.25em .35em}code,pre{font-family:monospace;background-color:#ddd;font-size:10pt;border-radius:.25em}table{border-collapse:collapse;display:inline-block;margin:0 auto;overflow-y:auto;width:100%}table td,table th{border:1px solid #eee;padding:.5em}table th{border-bottom-width:3px}table tr:hover{background-color:#f5f5f5}.project-link{display:block;margin-top:1em;margin-bottom:-0.5em;font-size:18pt;font-weight:bold;font-style:italic}header{align-items:center;background-blend-mode:multiply;background:rgba(0,0,0,.6) url(/img/bg.jpg) center/cover;color:#fff;display:flex;flex-direction:row;font-weight:600;justify-content:center;overflow:hidden;padding:2em 5vw;position:relative;text-align:center;width:100%}header img{border:3px solid rgba(255,255,255,.25);border-radius:5em;height:10em;margin-bottom:2em;width:10em}header h1{margin:0 1em;white-space:nowrap}header a{color:#fff!important}header a:active,header a:hover,header a:visited{opacity:.75}header h1 a{text-decoration:none}header nav{line-height:2em}header nav a{margin:0 .5em}main{margin:0 auto;max-width:60em;padding:1em 5vw}article{display:flex;flex-direction:row}article time{min-width:6em}#projects{column-count:1;column-gap:1em}article.project{text-align:left;break-inside:avoid}article.project a{color:#000;text-decoration:none}article.project a:hover{text-decoration:underline}article.project a:hover img{filter:brightness(1.25)}article.project span{display:block;font-weight:700;padding-bottom:.5em}article.project img{width:100%;border-radius:.25em}footer{color:#888;padding:0 5vw 2em 5vw;text-align:center}@media only screen and (min-width:700px){pre{padding:2em}#projects{column-count:2}}@media only screen and (min-width:900px){#projects{column-count:3}}@media only screen and (prefers-color-scheme:dark){body,html{background-color:#000;color:#fff}code,pre,table tr:hover{background-color:#333}article.project a{color:#fff}}