@media screen and (max-device-width: 720px) {
  .hljs {
    font-size: small;
  }
}
.about.card {
  background-color: maroon;
  color: white;
  padding-top: 0;
}
.about.card a {
  color: white;
}
.about.card .contents {
  padding-bottom: 1em;
}
.about.card:hover {
  background-color: black;
}
.about.card img {
  float: left;
  padding-right: 0.5em;
  width: 25%;
}
address {
  display: inline;
}
@media not (prefers-reduced-motion: reduce) {
  .blurb {
    view-transition-name: var(--transition-name);
  }
  body {
    view-transition-name: var(--transition-name);
  }
}
body {
  background: #f7f8f9;
}
.caption {
  font-size: 80%;
  margin-top: 0;
}
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 1px 1px 3px 0 grey;
  font-size: 125%;
  grid-row-end: span 23;
  overflow: hidden;
  padding: 1em;
  position: relative;
  text-overflow: ellipsis;
}
.card:hover {
  background: lightgrey;
}
.card > div > a {
  color: black;
  display: block;
  left: 0;
  height: 100%;
  position: absolute;
  text-decoration: none;
  top: 0;
  width: 100%;
}
.card > div > .contents a,
.card > div > .metadata a {
  position: relative;
}
.card h2 {
  text-decoration: none;
}
.card p {
  overflow-wrap: break-word;
  text-align: left;
  text-indent: 0;
  word-wrap: break-word;
}
.deck {
  display: grid;
  font-size: 75%;
  grid-auto-rows: 10px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.hero p {
  text-indent: 0;
}
.hero img,
img.hero {
  width: 100%;
}
.hero img.laconic {
  max-width: 352px;
}
.image img {
  max-width: 100%;
}
.image p {
  text-indent: 0;
}
kbd {
  background-color: lightgrey;
  border-radius: 3px;
  border: 1px solid black;
  font-family: sans;
  margin: 0 0.1em;
  overflow-wrap: break-word;
  padding: 0.1em 0.6em;
}
.labels a,
.labels a:link {
  color: grey;
}
.metadata {
  color: grey;
}
p {
  text-indent: 2em;
}
aside {
  text-align: left;
}
aside {
  border-left: 1px solid black;
  border-right: 1px solid black;
  display: block;
  font-size: 1.5em;
  font-style: italic;
  padding: 0 0 0 0.5em;
}
@media (min-width: 40em) {
  aside {
    border: initial;
    float: right;
    width: 10em;
  }
  aside::first-letter {
    initial-letter: 2;
  }
}
.startquote,
.startquote p {
  font-style: italic;
  margin-right: 0;
  text-align: right;
}
.weather-dashboard  img {
  max-width: 100%;
}