@import "../fonts/inter/inter.css"; *, *::before, *::after { box-sizing: border-box; font-style: inherit; } :root { --brand: #66cc00; --text: #000000de; --text-00: #ffffffde; --bg-00: #000000; --bg-01: #dedede; --link: #0066ffde; } body { font-family: "Inter var experimental", "Inter var", "Inter", sans-serif; color: var(--text); margin: auto; margin-top: 4rem; padding: 1rem; font-weight: 350; font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08"; max-width: 90rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-gap: 1rem; } body > div { column-width: 20rem; column-gap: 1rem; } body > div.info {grid-column: 1} body > div.cv {grid-column: 2 / -1} @media (max-width: 40rem) { body {grid-template-columns: 1fr} body > div.cv {grid-column: 1} } h1, h2, h3 {font-weight: 250} h1 { font-size: 3rem; letter-spacing: -.1rem; } h2 {font-size: 2.3rem} h3 {font-size: 1.7rem} h4, h5, h6 {font-weight: 700} h4 {font-size: 1.2rem} h5 {font-size: 1rem} h6 {font-size: .8rem} p {line-height: 1.3rem} em {font-variation-settings: 'slnt' -5} strong {font-weight: 550} a { color: var(--link); text-decoration: none; } a:hover {text-decoration: underline;} nav { position: fixed; top: 0; left: 0; right: 0; height: 4rem; line-height: 2rem; background: var(--bg-00); color: var(--text-00); font-variant: small-caps; white-space: nowrap; overflow-x: auto; } nav > * { height: 4rem; padding: 1rem; padding-right: 0; display: inline-block; vertical-align: middle; } nav a { color: inherit; } nav a.active { font-weight: 550; } nav img { height: 2rem; } ul {list-style-type: "–"} ol {list-style-type: decimal-leading-zero} li {padding-left: .5rem} .img-block { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .2rem; grid-auto-rows: auto; } .img-block > img { width: 100%; aspect-ratio: 1; object-fit: cover; } footer { background: var(--bg-01); grid-column: 1 / -1; text-align: center; height: 4rem; padding: 1rem; line-height: 2rem; margin: 0 -1rem -1rem -1rem; }