/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
  --text: #666;
  --bold: black;
  --italic: #343A40;
  --links: #6969bd;
  --link-select:#a1a1f7;
  --bgColour: #fff;
  --select: #DEE2E6;
}

main {
  width: 50%;
}
/* if mobile, use 100% */
@media (max-width: 600px) {
  main {
    width: 100%;
  }
}
#homeimg {
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

s {
  color: var(--text);
    display: inline;
}

nav {
  white-space: nowrap
}
nav a {
  border-bottom: 1px dotted;
}
a {
  color: var(--links);
  text-decoration: none;
}
a:hover {
  color: var(--link-select);
}
nav a {
    width: fit-content;
}
ul {
  margin: 0;
  padding: 0 0 1em 0;
  list-style: '✧ ' inside;
}

body {
  background-color: #eeede7;
  padding: 2em;
  /* system sans */
  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 
}
p {
  margin: 0;
}
main p {
  margin-bottom: 0.5em;
}

h1 {
  margin: 0;
  /* system serif */
  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 
}

h2 {
  margin: 0.8em 0 0 0;
  font-size: 1.1em;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  /* justify-content: right; */

  /* for line right of nav */
  border-right: 1px solid #bbb;
  padding-right: 2em;
}

#content{
  display: flex;
  flex-direction: column;
}

#main {
  display: flex;
  gap: 2em;
}

#blog {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.postlist {
  /* 
  for future use
  display: flex;
  flex-direction: column; 
  */
  margin: 0.5em 0;
  list-style: '✧ ' inside;
}
.postlist li {
  color: var(--links);
}

.postdate {
  color: var(--text);
  font-size: 0.8em;
}

.blogcontent ul {
  list-style: '✧ ' inside;
  margin: 0;
  padding-left: 1em;
}
.blogcontent ul a {
  border-bottom: 1px dotted;
}
.blogpost {
  width: 65vw;
  max-width: 800px;
  margin: 0 auto; /* center the blog post */
  padding: 0 2em;
}

@media (max-width: 600px) {
  .blogpost {
    width: 100%;
    padding: 0 1em;
  }
}