@charset "UTF-8";
html {
  font: 24px/170% Helvetica, Arial, Geneva, sans-serif;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  color: #444;
}

body {
  margin: 0;
  background-color: #fff;
}

footer, html {
  background-color: #aaa;
}

main {
  background-color: #fff;
}

header {
  padding: 0 0 0.5rem 0;
  text-align: center;
}

footer {
  clear: both;
}

header > div, p, h1, h2, h3, h4, ul, ol, nav, div.audio, div.video p, div.comments {
  width: 90%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4 {
  line-height: 1.2;
}

main h1 {
  text-align: center;
  margin-top: 0;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

img {
  /*	display: block;*/
  max-width: 100%;
  /*	margin: 0 auto;*/
}

iframe {
  width: 100%;
  max-width: 90vw;
  height: 55vw;
  display: block;
  margin: 0 auto;
  background: #000;
}

/*audio*/
div.audio, div.video {
  margin: 2rem auto;
  text-align: center;
}

div.audio > h4 {
  margin: 0.5rem 0;
  width: 100%;
}

audio, video {
  display: block;
  margin: 0 auto;
  width: 100%;
}

video {
  /*	max-width: 60rem;*/
  width: 90%;
}

div.video p {
  font-size: 0.8rem;
  margin-top: 0;
}

q, blockquote {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3rem;
  line-height: 1.5;
  color: hsl(220, 30%, 40%);
  /*	font-style: italic;*/
  background: hsl(220, 30%, 98%);
  padding: 0.1rem 0;
}

.poem {
  margin: 1rem 2rem 3rem;
  font-size: 1rem;
  line-height: 1.7rem;
  font-weight: lighter;
  /*	font-family: Times New Roman, Times, Serif;*/
}

/*this is how I handle images with captions*/
/*the markdown is clean; the generated html is a <p> tag with an image and text*/
p img {
  display: block;
  margin: 0 auto;
}

p:has(> img) { /* parent selector, unfortunately, doesn't work in Firefox as of 2023 */
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 2rem;
  /*	width: 100%;*/
}

p:has(> img.full) { /* parent selector, unfortunately, doesn't work in Firefox as of 2023 */
  font-size: 0.8rem;
  text-align: center;
  max-width: 100%;
  width: 100%;
  margin: 0;
}

img.full, figure.full img {
  width: 90%;
}

/* image gallery */
div.gallery {
  background: #000;
  color: #aaa;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: center;
  padding: 1rem;
  clear: both;
}

div.gallery.light {
  background: #fff;
}

div.gallery > * {
  flex: 1 0 auto;
  width: 15rem;
  margin: 0;
}

div.gallery > .full, div.gallery figure.full img {
  width: 100%;
  margin: 0;
}

div.gallery p {
  margin: 0 auto;
}

/*float things left and right*/
.left {
  float: left;
}

.right {
  float: right;
}

figure {
  text-align: center;
  margin: 0;
}

img.left, img.right, figure.left, figure.right {
  width: 20rem;
  max-width: 30vw;
}

figure.right, figure.left {
  margin: 1rem 5%;
}

img.left {
  margin: 1rem 2rem 2rem -5rem;
}

img.right {
  margin: 1rem -5rem 2rem 2rem;
}

figcaption {
  font-size: 0.7rem;
  font-weight: lighter;
  line-height: 1.5;
}

.center {
  text-align: center;
}

header h1 {
  margin: 0 auto 0 auto;
  padding-top: 0.5rem;
}

nav a {
  margin-right: 1rem;
}

footer {
  font-size: 0.8rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
}

@media screen and (min-width: 1700px) {
  figure.right, img.right {
    margin-right: calc(50vw - 33rem);
    margin-left: 3rem;
  }
  figure.left, img.left {
    margin-left: calc(50vw - 33em);
    margin-right: 3rem;
  }
}
@media screen and (max-width: 750px) {
  html {
    font-size: 18px;
  }
}
/*background colors*/
/*text colors*/
header {
  background-color: hsl(210, 10%, 100%);
}

main {
  background-color: hsl(210, 0%, 100%);
}

footer, html {
  background-color: hsl(210, 10%, 60%);
}

html {
  color: hsl(210, 20%, 30%);
}

h1, h2, h3 {
  color: #3d4d5c;
}

a {
  color: hsl(220, 80%, 50%);
  text-decoration: none;
}

a:hover {
  color: #6699ff;
}

h1 {
  font-family: "Georgia", "Times New Roman", Times, Serif;
}

header {
  color: #73808c;
}

header a {
  color: #b3bfcc;
}

header a:hover {
  color: #668099;
}

header h1 a {
  color: #668099;
}

header h1 a:hover {
  color: #3d4d5c;
}

header {
  padding: 0.5rem 0;
  line-height: 1;
}

header h1 {
  font-size: 1.1rem;
  display: inline-block;
  width: initial;
  margin: 0 1rem 0 0;
  padding: 0;
}

header nav {
  font-size: 0.8rem;
  display: inline-block;
  width: initial;
}

header nav a, footer nav a {
  margin: 0 0.5rem;
}

footer {
  color: #c7ccd1;
  text-align: center;
}

footer a {
  color: #e3e6e8;
}

footer a:hover {
  color: white;
}

footer {
  padding-bottom: 3rem;
}

footer p {
  margin-top: 0;
  margin-bottom: 0;
}

time {
  font-size: 0.7rem;
}

time.published {
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 1rem;
  opacity: 0.6;
  font-weight: normal;
}

ul.blog_posts time {
  display: inline-block;
  width: 6rem;
  text-align: right;
  margin: 0 1rem 0 0;
}

ul.blog_posts {
  padding: 0;
  margin-top: 0rem;
  margin-bottom: 3rem;
}

ul.blog_posts li {
  list-style: none;
  line-height: 1.2;
  display: table;
  margin: 0.5rem 0;
}

ul.blog_posts a {
  display: table-cell;
}

ul.blog_topics {
  margin: 0rem auto 2rem auto;
  padding: 0;
}

ul.blog_topics li {
  list-style: none;
  display: inline;
  margin: 0 1rem;
  padding: 0;
}

div.tags, div.previous_next {
  line-height: 1.5;
  font-size: 0.5rem;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: normal;
}

div.tags {
  text-align: center;
}

div.tags ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
  width: 100%;
  display: inline;
}

div.tags li {
  margin: 0;
  display: inline;
}

div.previous_next {
  text-align: center;
  margin: 0 auto 1rem auto;
}

div.previous_next span {
  display: block;
  margin: 0 0.5rem;
}

hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: 1px solid #c2ccd6;
  text-align: center;
  max-width: 60rem;
  margin-top: 3rem;
}

hr:after {
  color: #c2ccd6;
  content: "❦";
  display: inline-block;
  position: relative;
  top: -0.6em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: hsl(210, 0%, 100%);
}

div.draft {
  text-align: center;
  padding: 0.1rem;
  background: yellow;
}

/*dark style*/
/*background colors*/
/*text colors*/
html.dark {
  color: hsl(205, 0%, 70%);
  background-color: hsl(205, 0%, 0%);
}

html.dark main {
  font-weight: lighter;
}

html.dark body, html.dark main, html.dark footer {
  background-color: hsl(205, 0%, 0%);
}

html.dark header {
  background-color: hsl(205, 20%, 10%);
}

html.dark h1, html.dark h2, html.dark h3 {
  color: hsl(205, 0%, 95%);
}

html.dark header a {
  color: #668499;
}

html.dark header a:hover {
  color: #a3b5c2;
}

html.dark header h1 a {
  color: #8f9ba3;
}

html.dark header h1 a:hover {
  color: #c2ced6;
}

html.dark main a, html.dark footer a {
  color: hsl(210, 30%, 60%);
}

html.dark main a:hover, html.dark footer a:hover {
  color: #b3cce6;
}

html.dark footer {
  color: #666666;
}

@media screen and (max-width: 1200px) {
  img.right {
    margin-right: 0;
  }
  img.left {
    margin-left: 0;
  }
}

/*# sourceMappingURL=styles.css.map */