body {
  padding: 0;
  margin: 0;
  margin: auto;
  max-width: 44em;
}

@keyframes fade {
	0% { opacity: 0}
	100% { opacity: 1}
}
#ct { animation: linear fade .5s; max-width: 40em }

* { cursor: url('/img/cursor.png'), auto; }

a {
  color: black;
}

a:hover {
  opacity: .5;
}

#ct {
  clear: both;
  padding: 1em;
}

#ct img {
  max-width: 100%;
}

#ct .flo img { width: auto }
#ct p { margin-bottom:.75em; line-height: 1.35; }

h1,h2,h3 {padding:0; margin:0 }

h1 { font-size: 1.5em }
h1,h2,h3,h4 { font-weight: normal }
h1,h2,h3,pre { margin-top:.75em }
h2 { font-size: 1.35em }
h3 { font-size: 1.2em }


.ico { 
  width: 64px;
  float: left;
}

nav p {
  padding:0;
  margin:0;
}

nav {
  padding:.5em;
}

.f { width: 100% }

nav li {
  line-height: 1.1;
}

nav ul { 
  float: left;
  padding: 0;
  margin: 0;
  padding-left: 0;
  max-width:33%;
  list-style-type: none;
  margin-left:.5em;
  margin-right:.5em;
}

nav ul a {
  text-decoration: none
}

.nav a, footer a {
  margin-left: .3em;
  margin-right: .3em;
}

p img { 
  max-width: 100%;
  display: block;
}

pre {
  overflow-x: auto;
  font-size: .9rem;
  padding:1em;
  background: #bbb;
  border-right: 3px solid gray;
  border-bottom: 3px solid gray;
  outline: 3px solid darkgray;
}

code { font-size: .9rem }

.but img { display: inline; filter: saturate(0) }
.but img:hover { display: inline; filter: saturate(1) }

footer {
  padding:.5em;
  max-width: 20em;
}

.flo {
}

.x {
  image-rendering: pixelated;
}

.flo img { display: inline-block;
  margin: 0;
  padding: 0;
 }

#topics {
  padding:0;
}

#topics li {
  list-style-type: none;
  margin-bottom: .25em;
}

.h {
  display: none;
}

@media (prefers-color-scheme: dark) {
body {
  background: #222;
  color: #bbb;
  }
a { color: #bbb }
.ico,.i { filter: invert(1); }
pre { color: black }

}