/* 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 {
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --heading-color: #191919;
  --link-color: #4B121B;
  --visited-color: #4B121B;
  --blockquote-color: #fff1df;
}

body {
  background-color: #1E1C1C;
  background-image: url('../images/bg_diamond.png');
	background-position: top;
  font-size: 16px;
  font-family: Verdana, Tahoma, sans-serif;
  margin: 0;
}

p {
  line-height: 1.5em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

li {
   line-height: 1.4em;
   margin-bottom: 0.2em;
}

li ul {
   margin-top: 0.2em;
   margin-bottom: 0.3em;
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 700
}

a:hover { 
  text-decoration: underline;
}

img {
  display: block;        /* Forces the image onto its own line */
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;     /* Pushes from the left */
  margin-right: auto;
}
.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;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  color: var(--heading-color);
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 850px;
	background-color: #efefef;
  color: #353535; 
  outline-color: #c1c0b5;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5%;
}


/*HEADER STYLE*/
#header {
  background-color: #563d41;
  padding: 0 5%;
  border-color: #c1c0b5 ;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header a {
  color: white;
  text-decoration: none;
  font-weight: 400;
}
#header li a:hover {
  text-decoration: underline;
}

/*The All Posts thing at the bottom*/
#post-nav {
  text-align: center;
  margin-top: 1.4em;
}

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

/* Go To Top button */
#topBtn {
  display: none;
  position: fixed; 
  bottom: 20px;
  right: 30px;
  z-index: 900;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border: 3px solid;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  color: #000;
  cursor: pointer;
  padding: 0.25em 0.5em;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}
#topBtn:active {
  box-shadow: 0px 0px 0px 0px;
  transform: translate(2px, 2px);
}

/* blog post list */
ul.blog-posts {
  list-style-type: none;
  padding: 0.2em 0.25em 0.2em 1.5em;
}

ul.blog-posts li {
  display: flex;
  padding: 0.25em 0.01em;
  line-height: 1.1em;
}

ul.blog-posts a{
  font-weight: 600;
}

ul.blog-posts li span {
  flex: 0 0 130px;
}

ul.blog-posts li a:visited {
  color: var(--visited-color);
}

pre {
  background: rgb(223, 207, 207);
  margin: 1em 1.5em;
  padding: 0.5em;
  border-radius: 4px;
}

code {
  background: rgb(223, 207, 207);
}

pre, code {
  white-space: pre-wrap;       /* CSS3 */
  white-space: -moz-pre-wrap;  /* Firefox */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer */
  overflow-wrap: break-word;   /* Standard */
}


/* table of contents */

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 10px 20px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    font-size: 110%;
    text-align: left;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

/* Remove default bullets AND collapse the unneeded left spacing */
#toc_container ul {
    list-style: none !important;
    padding-left: 0;   /* <-- This removes the huge default indentation */
    margin-left: 0;    /* <-- Ensures no leftover browser margins are interfering */
}

#toc_container li {
    list-style: none !important;
}

/* Give nested lists a clean, consistent indent */
#toc_container ul ul {
    padding-left: 1.5em; 
}