site.css

:root{
  --width      : 36;
  --rounding   : 4px;
  --accent     : #696;
  --dark-grey  : #ddd;
  --grey       : #eee;
  --light-grey : #f8f8f8;
}

@font-face{
  font-family : 'Proza';
  font-weight : 400;
  src         : url('/proza-regular.woff2') format('woff2');
}

@font-face{
  font-family : 'Proza';
  font-weight : 300;
  src         : url('/proza-light.woff2') format('woff2');
}

@font-face{
  font-family : 'Proza';
  font-weight : 300;
  font-style  : italic;
  src         : url('/proza-light-italic.woff2') format('woff2');
}

*,
::before,
::after{
  box-sizing : border-box;
  margin     : 0;
}

html{
  height                   : 100%;
  font-family              : Proza,sans-serif;
  font-weight              : 300;
  font-size                : clamp(16px, calc(100vw / var(--width)), 20px);
  font-feature-settings    : 'onum','pnum';
  line-height              : 1.5;
  -webkit-text-size-adjust : none;
  text-size-adjust         : none;
}

body{
  display            : grid;
  grid-template-rows : max-content 1fr max-content;
  height             : 100%;
  background         : var(--accent);
  color              : #fff;
}

header,
footer{
  font-weight : 400;
}

header{
  display               : grid;
  grid-template-columns : 30px calc(min(100vw, 1rem * var(--width)) - 60px - 2rem) 30px;
  justify-content       : center;
  align-items           : center;
  padding               : 0 1rem;
}

header > a{
  line-height : 24px;
}

header svg{
  fill : #fff;
}

nav ul{
  display           : grid;
  grid-auto-flow    : column;
  grid-auto-columns : min-content;
  justify-content   : center;
  padding           : 1rem;
}

nav li{
  display : block;
}

nav a{
  display         : block;
  padding         : 0 0.5rem;
  border-radius   : 0.75rem;
  color           : inherit;
  text-decoration : none;
}

nav a.section{
  background : #fff;
  color      : var(--accent);
}

main{
  padding-bottom : 1rem;
  background     : #fff;
  color          : #000;
}

footer{
  padding    : 1rem;
  text-align : center;
}

h1,
h2,
h3,
p,
dl,
ol,
ul,
table,
figure,
form,
main > div{
  max-width  : calc(1rem * var(--width));
  margin     : 0 auto;
  padding    : 1rem 1rem 0;
}

h1,
h2,
h3{
  font-weight : 400;
  line-height : 1.1;
}

h1{
  font-size : 2rem;
}

h2{
  padding-top : 2rem;
  font-size   : 1.5rem;
}

h3{
  padding-top : 2rem;
  font-size   : 1.1rem;
}

dl{
  padding : 0 2rem;
}

dt{
  padding-top : 1rem;
}

dd{
  padding-left : 1rem;
}

ol,
ul{
  padding : 1rem 2rem 0 3rem;
}

ul ul{
  padding : 0 0 0 1rem;
}

table{
  margin-top            : 1rem;
  border-collapse       : collapse;
  font-feature-settings : 'lnum','tnum';
}

thead{
  position : sticky;
  top      : 0;
}

th,
td{
  padding : 0.25rem 0.5rem;
}

.numeric :where(th, td),
:where(th, td).numeric{
  text-align : right;
}

th{
  background  : var(--accent);
  color       : #fff;
  font-weight : 400;
  text-align  : left;
}

tr:nth-child(even) td{
  background : var(--grey);
}

figure,
form{
  width : max-content;
}

form > div{
  padding       : 1rem;
  border-radius : var(--rounding);
  background    : var(--grey);
}

pre,
code{
  font                  : 0.8rem/1.2rem 'Consolas',Menlo,monospace;
  font-feature-settings : 'lnum','tnum';
}

a{
  color                     : var(--accent);
  text-decoration-color     : var(--accent);
  text-decoration-thickness : 1px;
  text-underline-offset     : 2px;
}

a:visited{
  color : inherit;
}

abbr{
  font-variant   : small-caps;
  text-transform : lowercase;
}

code{
  padding       : 4px 6px 2px;
  border-radius : var(--rounding);
  background    : var(--grey);
}

img,
svg{
  vertical-align : bottom;
}

input,
textarea,
select{
  border        : 2px solid var(--dark-grey);
  border-radius : var(--rounding);
  background    : #fff no-repeat center center;
  color         : #000;
}

:is(input, textarea, select):where(:active:not(:disabled), :focus){
  border-color : var(--accent);
  outline      : none;
}

:is(input, textarea, select):disabled{
  background : var(--grey);
  color      : #000;
}

input:where([type="password"], [type="text"]),
textarea,
select{
  padding               : calc(0.25rem - 2px) calc(0.5rem - 2px);
  font-family           : Proza,sans-serif;
  font-weight           : 300;
  font-size             : 1rem;
  font-feature-settings : 'lnum','tnum';
  line-height           : 1.5;
}

input:where([inputmode="numeric"], [inputmode="decimal"]){
  text-align : right;
}

select{
  -webkit-appearance  : none;
  appearance          : none;
  height              : 2rem;
  padding-right       : 30px;
  background-image    : url('/select.svg');
  background-position : right;
}

input:where([type="checkbox"], [type="radio"]){
  -webkit-appearance : none;
  appearance         : none;
  width              : 22px;
  height             : 22px;
  margin             : calc(0.75rem - 11px) 0.25rem 0 0;
  vertical-align     : top;
}

input[type="checkbox"]:checked{
  background-image : url('/checkbox.svg');
}

input[type="radio"]{
  border-radius : 50%;
}

input[type="radio"]:checked{
  background-image : url('/radio.svg');
}

input[type="file"]{
  position : absolute;
  left     : -100vw;
}

button{
  margin      : 0;
  padding     : 0;
  border      : 0;
  background  : transparent;
  font-family : inherit;
  font-size   : inherit;
  line-height : inherit;
}

button:-moz-focus-inner{
  padding : 0;
  border  : 0;
}

button:where(:active, :focus){
  outline : none;
}

button > span,
.button{
  display             : inline-block;
  padding             : 0 0.5rem;
  border              : 2px solid var(--accent);
  border-radius       : calc(0.75rem + 2px);
  background          : var(--accent);
  color               : #fff;
  font-weight         : 400;
  -webkit-user-select : none;
  user-select         : none;
  cursor              : pointer;
}

button:where(:active, :focus) > span,
.button:where(:active, :focus),
input[type="file"]:where(:active, :focus) + .button{
  background : #fff;
  color      : var(--accent);
}

.highlight > div{
  background    : var(--light-grey);
  overflow      : hidden;
  padding-right : 0.8rem;
  border-radius : var(--rounding);
}

.highlight table{
  --horizontal : 0.8rem;
  --vertical   : 0.6rem;
  width        : 100%;
  margin       : 0;
  padding      : 0;
}

.highlight tr{
  display               : grid;
  grid-template-columns : max-content 1fr;
  gap                   : var(--horizontal);
}

.highlight td:first-child{
  padding    : var(--vertical) var(--horizontal);
  background : var(--grey);
  color      : #aaa;
}

.highlight td:last-child{
  overflow   : auto;
  padding    : var(--vertical) 0;
  background : transparent;
}

.highlight code{
  display    : block;
  padding    : 0;
  background : transparent;
}

.highlight :where(.c, .c1, .cm){
  color      : #aaa;
  font-style : italic;
}

.highlight :where(.o, .p){
  color : #aaa;
}

.highlight :where(.fm, .k, .kc, .kd, .nt),
.highlight .language-css :where(.nc, .nd, .nn, .s2){
  color : #e91e63;
}

.highlight :where(.na, .nb, .nf, .nv),
.highlight .language-css :where(.k, .kc, .kp, .kt),
.highlight .language-javascript .nx{
  color : #8bc34a;
}

.highlight :where(.cp, .nc, .ni, .nx),
.highlight .language-css :where(.n, .nv){
  color : #ff9800;
}

.highlight :where(.m, .mf, .mh, .mi, .s, .s1, .s2, .sr){
  color : #2196f3;
}

.photo{
  float         : right;
  margin        : 0 0 1rem 1rem;
  border        : 2px solid var(--dark-grey);
  border-radius : 50%;
  padding       : 2px;
}