/* 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." */
* {
  box-sizing: border-box;
}

:root {
  --header-bg: #B57550;
  --nav-bg:  	#EFEAE5;
  --article-bg: #EFEAE5;
  --border-color: #967e76;
  --sidebar-text-color: #25161b;
  --article-text-color: #262A3E;
  --article-heading-color: #62915C;
  --link-color: #62915C;
  --darker-border-color: #B57550;
}

body {
  background-color: var(--article-bg);
  background-image: url('../images/travelboard.png');
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 105%;
  font-size: 15px;
  font-family:"Courier Prime", monospace;
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html,
body,
a:link,
a:hover,
a:visited,
a:active {
  cursor: url('../images/pencil.png'), auto;
}

img,
picture,
video {
  max-width: 100%;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  font-size: 1em;
}
#cont,
#cont p {
  line-height: 1.6em;
  font-size: 16px;
  text-indent: 20px;
  margin: 3px auto;
}

hr {
  border: 1px dashed var(--darker-border-color);
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}

.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

/* LINKS */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: #262A3E;
  text-decoration: line-through;
  font-weight: bold;
}
a:visited {
  opacity: 0.6;
  color: #672a4e;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Bilbo Swash Caps", cursive;
  color: var(--article-heading-color);
}
::-moz-selection {
    color: var(--article-text-color);
    background-color: #f2a246;
}
::selection {
    color: var(--article-text-color);
    background-color: #f2a246;
}

/* FONTS */
.bilbo-swash-caps-regular {
  font-family: "Bilbo Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

.courier-prime-regular {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: normal;
}

.courier-prime-bold {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-style: normal;
}

.courier-prime-regular-italic {
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: italic;
}

.courier-prime-bold-italic {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-style: italic;
}

/* END FONT */

#postTitleH1 {
  font-family: "Bilbo Swash Caps", cursive;
  color: var(--article-heading-color);
}

.subtitle {
  margin-bottom: 5px;
  padding-left: 3px;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
  max-width: 650px;
  background-color: var(--article-bg);
  background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#C6C8CA .1em, transparent .1em);
    background-size: 100% 1.2em;
  color: var(--article-text-color);
  outline-color: var(--darker-border-color);
  outline-style: transparent;
  outline-width: 1px;
  outline-offset: 0;
  box-shadow: 0 4px 8px 0 rgba(38, 42, 62, 75%);
}

#content {
  padding: 10px 5% 20px 5%;
}

/*HEADER STYLE*/
#header {
  background-color: var(--header-bg);
  padding: 0 5%;
}
#header ul {
  list-style-type: none;
  padding: 0.3em 0;
  margin: 0;
}
#header li {
  font-size: 1em;
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a,
#header li a:active {
  text-transform: uppercase;
  color: var(--nav-bg);
  text-decoration: none;
  background-color: inherit;
  cursor: pointer;
}
#header li a:hover {
  color: #262A3E;
  text-decoration: line-through;
}
#header li::before {
  content: "✎";
  color: var(--nav-bg);
  margin: 0 3.5px;
  text-decoration: none;
  opacity: 100%;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.1em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.1em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/* STORY LIST */
.story-list ul,
.story-list li {
  list-style-type: none;
}
.story-list li a:link {
  color: #a22d2d;
  opacity: 100%;
  list-style: none;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  margin-top: 5px;
}
.story-list li a:visited {
  color: #672a4e;
}
.story-list li::before {
  content: "\02726";
  color: #a22d2d;
  margin-right: 2px;
}

/* SERIES OVERVIEW */
.series {
  font-size: 1rem;
  font-family: "Courier Prime", monospace;
  color: var(--nav-bg);
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
  background-color: var(--header-bg);
  text-align: left;
}
.series::before {
  content: "\02726";
  color: var(--nav-bg);
  margin-right: 5px;
}
.logline {
  font-size: 0.8rem;
  margin: auto 5px;
  padding-left: 5px;
  padding-right: 9px;
  border: 1.5px dashed var(--darker-border-color);
  background-color: rgba(239, 234, 229, 70%);
}

/* DETAILS */
details {
  font-size: 1em;
  font-family: "Times New Roman", serif;
  border: 1px solid #4f0e0e;
  padding: 0;
  margin-bottom: 1.5px;
  background-color: var(--nav-bg);
}
details > p {
  padding: 0 18px;
}
details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "\02726"; /* Unicode character for "minus" sign (-) */
  color: var(--nav-bg);
  font-family: serif;
}
details:first-of-type summary::hover::marker {
  content: "\02726";
  color: var(--nav-bg);
}
details[open]:first-of-type summary::marker {
  content: "\02726";
}
details[open]:first-of-type summary:hover::marker,
details[open]:first-of-type summary:active::marker {
  content: "\02726";
  color: var(--nav-bg);
}
details:nth-child(1n + 1) summary::marker {
  content: "\02726";
}
*/ details:last-of-type summary {
  list-style: none;
  &::before {
    content: "\02726 ";
    color: var(--nav-bg);
    font-weight: bold;
    padding: 0;
    margin-right: 5px;
  }
  [open] &::before,
  [open] &::before:active {
    content: "\02726 ";
    margin-right: 5px;
  }
}
details:last-of-type summary::-webkit-details-marker {
  display: none;
}
summary {
  color: var(--nav-bg);
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-bg);
  cursor: pointer;
  padding: 5px;
  margin: 0;
  width: 100%;
  text-align: left;
  font-family: "Spectral", serif;
  outline: none;
  font-size: 1.2rem;
  line-height: 1rem;
  transition: 0.4s;
  font-weight: bold;
}
summary:hover,
summary:active {
  background-color: #4f0e0e;
  color: var(--nav-bg);
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

/* Track */
.logs::-webkit-scrollbar-track {
/*    background: var(--article-bg); */
    background: var(--darker-border-color);
    border-left: 2px solid var(--nav-bg);
    border-right: 2px solid var(--nav-bg);
    background-clip: content-box;
}

/* Handle */
.logs::-webkit-scrollbar-thumb {
    width: 3px;
    height: 3px;
    background: #a22d2d;
    border: 1px solid #a22d2d;
}

/* Handle on hover */
.logs::-webkit-scrollbar-thumb:hover {
    background: var(--article-heading-color);
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 1.5vh;
  padding: 0 5% 10px 5%;
}

@media only screen and (width <= 450px) {
    body {
        background-size: auto;
    }
    #footer {
        font-size: 1vh;
    }
}