html { box-sizing:border-box; }
*, *:before, *:after { box-sizing:inherit; }

html, body { margin:0; padding:0; height:100%; }
body { color: CanvasText; color-scheme: light dark; background:#222; display: flex; flex-direction: column; }

a { color:dodgerblue; }

header { background:black; border-bottom:1px solid rgba(255,255,255,.3); }
header img { display:inline-block; }
main { flex:1; }
footer { border-top:1px solid rgba(255,255,255,.1); padding: 10px 40px; }
#logo { max-width:190px; }

label { display:inline-block; min-width: 140px; }
textarea { font-family:inherit; font-size:inherit; }
input[type=number] { width:60px; }

.row::after { content:""; clear:both; display:table; }
[class*="col-"] { float:left; width:100%; }
.col-1 { width:8.33%; }
.col-2 { width:16.66%; }
.col-3 { width:25%; }
.col-4 { width:33.33%; }
.col-5 { width:41.66%; }
.col-6 { width:50%; }
.col-7 { width:58.33%; }
.col-8 { width:66.66%; }
.col-9 { width:75%; }
.col-10 { width:83.33%; }
.col-11 { width:91.66%; }
.col-12 { width:100%; }