:root {
  --text-color: #333;
}

body {
  /* background-color: #e8e3e3; */
  background-color: #e5dada;
  color: var(--text-color);
  max-width: 600px;
}



@media screen and (max-width: 850px) {
  body {
  }
}

@media screen and (max-width: 600px) {
  body {
    max-width: 400px;
  }

  .poem {
    font-size: 14pt !important;
  }
}

::selection {
  background:rgba(255,255,255,0.99);
}

::-moz-selection {
  background:rgba(255,255,255,0.99);
}

:hover {
  transition-duration: 0.2s;
}

h1 {
  font-weight: 700;
  color: #fefefe;
  margin-bottom: 0px;;
}

h1:hover {
  font-weight: 800;
  color: white;
}

a {
  color: #ba5555;
}

/** page title **/
h3 {
  font-weight: 700;
  color: #fff;
  font-size: 30pt;
  font-family: 'Lora';
  margin: 10px 0 10px 0;
}

h3:hover {

}

h2 {
  font-weight: 700;
  color: #fff;
  font-family: 'Lora';
}

/* h4 {
  font-weight: 700;
  color: #fff;
  /* font-size: 15pt; */
  /* font-family: 'Lora'; */
}  */

.sub {
  font-weight: 300;
  font-size: 15pt;
}

a {
  text-decoration: none;
}

div.link {
  /* Indents second line of link (if overflow) */
  padding-left:3.2em;
  text-indent:-3.2em;
}

.link a {
  font-family: 'Lora';
  line-height: 1.8;
  font-weight: 300;
  color: #ba5555;
  letter-spacing: 0.01em;
}

.link a:hover {
  background-color: #ba5555;
  transition-duration: 0.2s;
  color: #ba5555;
}

.link span.year{
  color: #fff;
  /* color: #ce8686; */
  font-family: 'Open Sans';
  padding: 0 10px 0 10px;
  font-size: 10pt;
  font-weight: lighter;
}

a.stealth-link {
  color: var(--text-color);
  text-decoration: none;
}

.title {
  font-family: 'Lora';
  height: 5pt;
  color:#fff;
  opacity: 1.0;
  padding-top: 10px;
  font-weight: 600;
  font-size: 13pt;
  letter-spacing: 0.5px;
}

p.title:hover {

}


.description {
  color: #353535;
  font-size: 9pt;
}

.sans-serif {
  font-family: 'Open Sans' !important;
}

.serif {
  /* font-family: 'Minion Pro'; */
  font-family: 'Garamond Pro';
  line-height: 1.3;
  font-size: 15pt;
}

.serif i {
  letter-spacing:0.01em;
}

.toc, .toc a {
  font-size: 13pt;
  line-height:1.5;
  color: black;
}

.toc a {
  color: black;
  /* font-style: italic; */
}


.secret, .secret a {
  color:  #e8e3e3;
}

.secret a:hover {
  background: #e8e3e3;
}


/**************************** poems *******************************/
.poem {
  font-family: 'Garamond Pro';
  margin: 0px;
  line-height: 1.3;
  font-size: 15pt;
  padding-bottom: 120px;
}

pre.poem {
  /* to wrap overflow poem lines */
  /* not sure if this is the best way to format this */
  white-space: pre-wrap;
}

.poem-title {
  font-weight: bold;
  padding-bottom: 10px;
}

.poetry-heading {
  font-family: 'Lora';
  font-size: 24pt;
  padding-bottom: 40px;

}

.poetry-footer {
  font-family: 'Garamond Pro';
  font-size: 15pt;
  color: white;
  font-style: italic;
}

.poem-link.poem {
  padding-bottom: 0px;
}

.poem-link a {
  font-weight: 300;
  color: #e8a7a7;
}

.poem-link a:hover {
  background-color: #e8a7a7;
  transition-duration: 0.2s;
}

/************************ prose *************************/
.indent {
  margin-left: 3em;
  margin-right: 3em;
}

.quote { /* Like an indent, but with a line on the left */
  padding-left: 15px;
  margin-left: 1em;
  border-left: 4px solid #ededed;
  margin-right: 1em;
  /* font-family: 'Open Sans';   */
  /* font-weight: 100; */
}

@media screen and (max-width: 600px) {
  .indent {
    margin-left: 2em;
    margin-right: 1em;
  }
  .quote {
    margin-left: 1em;
    margin-right: 1em;
  }
}



.fiction {
  line-height: 1.8;
  background-color: white;
}

.fiction i {
  /* letter-spacing: 0.01em; */
}

.fiction h1 {
  color: #e8e3e3;
  font-family: 'Josefin Sans';
  font-size: 25pt;
  letter-spacing: 3px;
  margin-bottom: 0px;
}

.fiction h3 {
  color: #e8e3e3;
  font-family: 'Josefin Sans';
  font-size: 18pt;
  margin: 0px;
}

.fiction ::selection {
  background-color: rgba(232, 227, 227, 0.99);
}

.fiction ::-moz-selection {
  background-color: rgba(232, 227, 227, 0.99);
}

.golden h1, .golden h3{
  color: #efd07f;
}

.june h1, .june h3{
  /* color: #8eb0d4; */
  /* color:black; */
  color: #111;
  /* font-family: 'Garamond Pro'; */
  letter-spacing: 0px;
}

.june > .toc a:hover {
  /* background-color: #f0f0f0; */
  color: black;
}

.june ol {
  counter-reset: item;
  list-style-type: none;
  /* color: grey; */
}

.june li:before {
  content: counter(item) "ㅤ"; /*Instead of ". " */
  counter-increment: item;
}

.june.red > h3 {
  color: #d49696;
}
.june.yellow > h3 {
  color: #efd07f;
}
.june.green > h3 {
  color: #95ba96;
}
.june.purple > h3 {
  color: #baabc7;
}

.june .red > a {
  color: #d49696;
}
.june .yellow > a {
  color: #efd07f;
}
.june .green > a {
  color: #95ba96;
}
.june .purple > a {
  color: #baabc7;
}


/************************ write home page link *************************/
.home {
  font-weight: 300;
  font-family: 'Garamond Pro';
  /* color: #ecc; */
  color:#e8a7a7;
  margin: 5px;
  font-size: 14pt;
}

.home:hover {
  /* font-weight:800; */
  /* background: #eee; */
  /* color: #e8a7a7; */
  /* color: #ba5555; */
  background-color: #e8a7a7;

  /* border-bottom: 4px solid #e8a7a7; */
  transition-duration: 0.2s;
}


/************** special dusk styling ****************/
body.dusk {
  background-color:rgb(223, 233, 243);
}

.dusk .poem {
  /* font-family: Georgia; */
  /* font-size: 12pt !important; */
}

a.dusk {
  color:rgb(118, 144, 217);
}

.dusk > .home {
  color:rgb(118, 144, 217);
}

.dusk > .home:hover {
  background-color:rgb(31, 60, 138);
}

/************** special screen styling ****************/
body.screen {
  background-color:rgb(250, 250, 255);
  max-width: 700px;
  font-size: 10pt;
}

.screen .poem {
  font-family: Georgia;
  font-size: 12.5pt !important;
  line-height: 1.2;
}

.screen .poem-title {
  font-weight: normal;
  padding-bottom: 1.5em;
  color:#9ab8a1;
  /* font-style: italic; */
  /* font-family: monospace; */
  /* font-size: 11pt !important; */
}

.screen .poetry-heading, .screen .poetry-footer {
  color: rgb(190, 200, 190);
}

.screen > .home {
  color:rgb(150, 150, 160);
}

.screen > .home:hover {
  background-color:rgb(60, 80, 60);
}