/* CSS for the plain style for TreadleOn web pages from 2021 */

body {
  background: hsl(60,100%,98%); /* #fffff5 */
  font-family: sans-serif;
}

/* Navigation bars; try to look a little like gold lettering on a black cylinder */
h1, nav, footer {
  background-color: black; /* Used if linear-gradient is not supported */
  background-image: linear-gradient(#202020,#505048 44%,black);
  color: #ffcf33; /* hsl(45,100%,60%); */
  font-weight:bold;
  padding: 0.3em;
}
h1 a, nav a, footer a {color: currentColor; text-decoration: none;}
h1 a:hover, nav a:hover, footer a:hover {text-shadow: 1px 1px 2px;}
footer * {display: inline;} /* flattens the search-form part */

/* Top page heading, with a round button */
h1 * {vertical-align: middle;}
h1 img {border-radius: 50%} /* clip to a circle */
h1 {
  margin-top: 0;
  padding: 0.1em;
  /* font-family: Georgia, serif; */
  /* font-variant: small-caps; */
}

figure {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  width: min-content;  /* Makes the figure take its width from the image, therefore wrap a long caption */
  margin-top: 4px;
  margin-bottom: 4px;
}
 
/* Make things-with-captions float alternately right and left */
body > figure {
  padding: 4px;
  border-style: dotted; /* was, double */
  border-width: medium;
}
body > figure:nth-of-type(odd) {
  float: right;
  margin-left: 10px;
}
body > figure:nth-of-type(even) {
  float: left;
  margin-right: 10px;
}

/* Make too-wide pictures scale onto a narrow screen */
img {
  max-width: 92vw; /* % the width of the viewport (i.e. screen or window)*/
  height: auto;  /* Needed to make height scale when width tweaked */
}

body > a {
  display: inline-block;
  vertical-align: middle;
}
a figure {
  border-style: solid;
  border-width: thin;
  border-radius: 5%;
  padding: 1px;
}
a figure img {
  border-radius: 5%;
}

h2, h3, footer {
  clear: both;
}

li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


*:target {border: solid red; border-radius: 10px;} /* Highlight the #id target */

/* Make text wrap either at the edges of the window for narrow windows
   or screens, or at about 78 characters wide for wider windows.
@media (min-width: 80ch) {
  p {width: 78ch;}
} */
p, li {max-width: 45em;}  /* Simpler way to get maximum width */