* { font-size: 1em; font-weight: normal; margin:0; padding:0 }
body { font: 1em sans-serif; max-width: 810px; margin: auto; padding: .5em }
a:hover { opacity: .7 }

p { margin: .5em 0 }
a { color: black }
ul { margin: .5em 0 .5em 1.5em; list-style-type: square }
li { margin-bottom: .3em }
hr { margin: 1em 0 }
nav { margin-bottom: 1em }
main * { font-size: .9rem }
h2 { font-size: .8rem; margin-top:1rem  }
img { max-width: 100% }

.i { width: 48%; display: inline-block; vertical-align: top }
nav * { font-size: .85rem }
nav ul { list-style-type: none }
nav b { margin-left: -.5rem }
nav li { margin-bottom: 0em; padding: .1em .4em; }
nav .ba { padding:1em }

ul code, ul span a { font-size: .7rem; font-family: monospace }

.ark { margin-top: 2em; margin-left: 0 }
/*.ark li {
  display: inline-block; 
  width: 150px;
  max-width: 32%;
  vertical-align: top;
  margin-bottom: 1em
}
.ark img { height: 150px; width: 150px; object-fit: cover } */
.ark li { margin: 2em 0 }
.ark span a { font-size: .6rem; display: block }
.ark a + br { display: none }

.rec img { 
  width: 400px;
  max-width: 100%;
  height:150px;
  object-fit: cover;
  image-rendering: crisp-edges;
  outline: 1px solid black;
  margin: .3em 0;
}

.rec li { 
  margin-bottom: 1.5em;
  padding: .5em;
}


@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: darkgray;
  }

  a { color: lightgray }
  
}