/* 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." */

/* fonts: */

@font-face {
  font-family: "Mono";
  src: url("Fonts/AtkinsonHyperlegibleMono.woff2") format("woff2");
}

@font-face {
  font-family: "HomemadeApple";
  src: url("/Fonts/HomemadeApple.woff2") format("woff2"); 
}

::selection {
  background: palevioletred;
  color: white;
}

body.hico-theme ::selection {
  background: red;
  color: white;
}

body {
  font-family: "Mono";
  font-size: 1em;
  background: rosybrown;

  /* background-image: url("100_1383.JPG"); */
  /* background-size: cover; */
  /* background-position: center; */
 /*  background-repeat: no-repeat; */
}

.post-desc {
  color: darkkhaki;
  }

#candide{
  color: palevioletred;
  }


body.hico-theme #candide {
  color: black;
  background: lime;
  }
  
  
#updates {
  border: 1px solid darkkhaki;
  box-shadow: inset 4px 4px 0 0px antiquewhite;
  }
  
#updates p {
  border: 1px solid darkkhaki;
  box-shadow: 4px 4px 0 0px antiquewhite;
  margin-bottom: 10px;
  padding: 5px;
  }
  
  #last-poster {
  box-shadow: 10px 7px 0 0px antiquewhite;
    }

body.hico-theme #last-poster {
  box-shadow:10px 7px 0 0px lime;
  }

 #book-cover {
    box-shadow: 7px 7px 0 0px antiquewhite;
   }
   
body.hico-theme #book-cover {
  box-shadow: 7px 7px 0 0px lime;
  }
 
 .youtube {
   box-shadow: 7px 7px 0 0px antiquewhite;
   }
   
body.hico-theme .youtube {
  box-shadow: 7px 7px 0 0px lime;
  }
 
 
  
.date-time {
  color: darkkhaki;
  font-weight: bold;
  } 
  
body.hico-theme  #updates {
  border: 1px solid lime;
  box-shadow: inset 4px 4px 0 0px black;
  }
  
body.hico-theme  #updates p {
  border: 1px solid lime;
  box-shadow: 4px 4px 0 0px lime;
  }

body.hico-theme .date-time {
  color: lime;
  font-weight: bold;
  } 

main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  align-content: start;
}

div .embed-block p.lyrics {
  font-style: italic;
  
}

.embed-block > p:first-of-type {
  margin-top: 10px;
}


.full {
  grid-column: span 12;
}

.half {
  grid-column: span 6;
}

.third {
  grid-column: span 4;
}

.quarter {
  grid-column: span 3;
}

.two-thirds {
  grid-column: span 8;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid darkkhaki;
}

.divider {
  grid-column: span 12;
  border-top: 1px dashed darkkhaki;
  width: 100%;
  margin: 10px 0;
}

.third img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.half img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

div .embed-block p {
  color: darkkhaki;
  }


details.full {
  grid-column: span 12;
  min-width: 0;
}

.album-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  margin-top: 10px;
}

.album-row .quarter {
  grid-column: span 3;
}


details summary::marker {
  color: darkkhaki;
}


main br {
  display: block;
  content: "";
  margin-bottom: 0.7em;
}

#star-rating {
  color: darkkhaki;
  }


img { 
  border: 1px solid brown;
  box-shadow: 7px 7px 0 0px antiquewhite;
  } 

#container {
  border: 1px solid brown;
  margin: 40px auto;
  max-width: 1100px;
  background: mistyrose;
  box-shadow: 10px 10px rgba(57, 35, 35, 0.2);
  }
  
header {
  background: seashell;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid palevioletred;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23fff5eeff'/><path d='M1.624 19.09l6.597-1.595a.503.503 0 11.238.98L2.145 20l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM-.911 18.377l-1.595-6.597a.504.504 0 11.98-.237L0 17.856l1.526-6.313a.503.503 0 11.98.237L.911 18.377l3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 000 7.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM-11.535 16.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM.911 21.625l1.595 6.597a.504.504 0 11-.98.237L0 22.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386zM31.624 19.09l6.597-1.595a.503.503 0 11.238.98L32.145 20l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM29.089 18.377l-1.595-6.597a.504.504 0 11.98-.237L30 17.856l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0030 7.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM18.465 16.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM30.911 21.625l1.595 6.597a.504.504 0 11-.98.237L30 22.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386zM16.624 39.09l6.597-1.595a.503.503 0 11.238.98L17.145 40l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM14.089 38.377l-1.595-6.597a.504.504 0 11.98-.237L15 37.856l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0015 27.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM3.465 36.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM15.911 41.625l1.595 6.597a.504.504 0 11-.98.237L15 42.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.1a4.584 4.584 0 006.475 0l1.099-1.1a3.813 3.813 0 000-5.386zM16.624-.91l6.597-1.595a.503.503 0 11.238.98L17.145 0l6.314 1.526a.504.504 0 01-.238.98L16.624.912l3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM14.089-1.623L12.494-8.22a.504.504 0 11.98-.237L15-2.144l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0015-12.875a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM3.465-3.237a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0L13.376.912 6.779 2.507a.501.501 0 01-.609-.371.504.504 0 01.372-.609L12.855.001 6.542-1.525a.504.504 0 11.237-.98L13.376-.91 9.95-4.336a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM15.911 1.625l1.595 6.597a.504.504 0 11-.98.237L15 2.146 13.474 8.46a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386z'  stroke-width='1' stroke='none' fill='%23eee8aa83'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
  }
  
header a {
  text-decoration: none;
  color: darkkhaki;
  font-size: 1.9em;
  font-family: "HomemadeApple";
  margin-left: 12px;
  text-shadow: 0px 0px 10px seashell
;
  word-spacing: 8px;
  }
  
main p {
  margin: 0px;
  }
  
main h3 {
  margin: 0px;
  }
  
#content {
  display: flex;
  
  }
  
#sidebar {
  min-width: 220px;
  margin: 20px 0px 20px 20px;
  border: none;
  }
  
#sideimg {
  margin-bottom: 12px;
  border: 1px solid palevioletred;
  background: seashell;
  background-image: url("side-img.jpg");
  background-size: cover;
  background-position: center center;
  height: 220px;
  max-width: calc(100% - 2px);
  }  

.navlink a {
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid palevioletred;
  background: antiquewhite;
  text-decoration: none;
  color: #36312D;
  transition: all 0.4s ease;
  font-size: 1.1em;
  }
  .navlink a:hover {
  color: #36312D;
  text-shadow: 0 0 0px ;
  background: seashell;
  }
 
 .navlink a {
  position: relative;
  padding-left: 8px;
  transition: padding-left 0.4s ease;
}

.navlink a::before {
  content: ">";
  color: darkkhaki;
  position: absolute;
  left: 8px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.navlink a:hover {
  padding-left: 25px;
}

.navlink a:hover::before {
  opacity: 1;
}
  
main {
  border: 1px solid palevioletred;
  padding: 20px 20px 20px 20px;
  margin: 20px;
  width: 100%;
  background: seashell;
  color: #36312D;
  box-sizing: border-box;
  min-width: 0;
  }
  
 h1 {
  margin: 0px;
  font-size: 2em;
  font-weight: 450;
  padding-bottom: 10px;
  border-bottom: 1px solid darkkhaki;
  }

main a {
  text-decoration: none;
  color:darkkhaki; 
  }
  
.hico-link {
  color: darkkhaki;
  }
  
.hico-arrow {
  color: darkkhaki;
  }
  
.hico-disclaimer {
  color: darkkhaki;
  }
  


  
      main .disclaimer{
        padding-bottom: 20px;
        border-bottom: 1px dashed darkkhaki;
        }
        
        main pre {
          overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0px;
          }
  
  
footer {
  background: seashell;
  padding: 15px;
  margin-bottom: 0;
  justify-content: space-between;
  display: flex;
  align-items: center;
  border-top: 1px solid palevioletred;
   background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23fff5eeff'/><path d='M1.624 19.09l6.597-1.595a.503.503 0 11.238.98L2.145 20l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM-.911 18.377l-1.595-6.597a.504.504 0 11.98-.237L0 17.856l1.526-6.313a.503.503 0 11.98.237L.911 18.377l3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 000 7.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM-11.535 16.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM.911 21.625l1.595 6.597a.504.504 0 11-.98.237L0 22.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386zM31.624 19.09l6.597-1.595a.503.503 0 11.238.98L32.145 20l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM29.089 18.377l-1.595-6.597a.504.504 0 11.98-.237L30 17.856l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0030 7.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM18.465 16.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM30.911 21.625l1.595 6.597a.504.504 0 11-.98.237L30 22.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386zM16.624 39.09l6.597-1.595a.503.503 0 11.238.98L17.145 40l6.314 1.526a.504.504 0 01-.238.98l-6.597-1.595 3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM14.089 38.377l-1.595-6.597a.504.504 0 11.98-.237L15 37.856l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0015 27.125a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM3.465 36.763a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0l3.426-3.426-6.597 1.595a.501.501 0 01-.609-.371.504.504 0 01.372-.609l6.313-1.526-6.313-1.526a.504.504 0 11.237-.98l6.597 1.595-3.426-3.426a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM15.911 41.625l1.595 6.597a.504.504 0 11-.98.237L15 42.146l-1.526 6.313a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.1a4.584 4.584 0 006.475 0l1.099-1.1a3.813 3.813 0 000-5.386zM16.624-.91l6.597-1.595a.503.503 0 11.238.98L17.145 0l6.314 1.526a.504.504 0 01-.238.98L16.624.912l3.426 3.426a3.813 3.813 0 005.386 0l1.1-1.1a4.584 4.584 0 000-6.475l-1.1-1.099a3.814 3.814 0 00-5.386 0zM14.089-1.623L12.494-8.22a.504.504 0 11.98-.237L15-2.144l1.526-6.313a.503.503 0 11.98.237l-1.595 6.597 3.426-3.426a3.813 3.813 0 000-5.386l-1.1-1.099A4.548 4.548 0 0015-12.875a4.547 4.547 0 00-3.238 1.341l-1.099 1.099a3.813 3.813 0 000 5.386zM3.465-3.237a4.584 4.584 0 000 6.476l1.1 1.099a3.813 3.813 0 005.385 0L13.376.912 6.779 2.507a.501.501 0 01-.609-.371.504.504 0 01.372-.609L12.855.001 6.542-1.525a.504.504 0 11.237-.98L13.376-.91 9.95-4.336a3.796 3.796 0 00-2.693-1.113c-.975 0-1.95.37-2.693 1.113zM15.911 1.625l1.595 6.597a.504.504 0 11-.98.237L15 2.146 13.474 8.46a.505.505 0 01-.98-.237l1.595-6.597-3.426 3.426a3.813 3.813 0 000 5.386l1.1 1.099a4.584 4.584 0 006.475 0l1.099-1.099a3.813 3.813 0 000-5.386z'  stroke-width='1' stroke='none' fill='%23eee8aa83'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
  }
  
footer p {
  margin-left: 5px;

  color: darkkhaki;
  font-size: 0.9em;
  }
  
  footer .ph-envelope {
  font-size: 20px;
  color: darkkhaki;
  margin-right: 5px;
  }
  
  footer a {
    text-decoration: none;
  }
  
  
  
  
  
  
  
  /* HI-CO Theme settings */
  
  body.hico-theme {
  background: black;
}

body.hico-theme #container {
  background: black;
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='%23000000ff'/><path d='M10 15a5 5 0 110-10 5 5 0 010 10z'  stroke-width='0.5' stroke='%2300ff00ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  border-color: lime;
}

body.hico-theme header {
  }
body.hico-theme header a {
  }
  
body.hico-theme .divider {
  border-color: lime;
  }
  

  
body.hico-theme main a{
  background-color: lime;
  color: black !important;
  }
  
  
body.hico-theme img { 
  border: 1px solid lime;
  box-shadow: 7px 7px 0 0px lime;
  } 
  
  body.hico-theme .hico-link {
 background-color: lime;
  color: black !important;
  }
  
 body.hico-theme .hico-arrow {
  color: lime;
  }
  
body.hico-theme .hico-disclaimer {
  color: lime;
  }
  
 body.hico-theme .youtube {
   border: 1px solid lime;
   } 
  
body.hico-theme footer {

  }
body.hico-theme #container {
  
  }

body.hico-theme #sideimg {
  border: 1px solid lime;
  background-image: url("/Img/skull.jpg");
  
  }

body.hico-theme main,
body.hico-theme header,
body.hico-theme header a,
body.hico-theme h1,
body.hico-theme .disclaimer,
body.hico-theme p,
body.hico-theme footer{
  background: black;
  color: lime;
  border-color: lime;
  text-shadow: none;
}

body.hico-theme main a,
body.hico-theme footer .ph-envelope {
  color: lime;
  text-shadow: none;
}

body.hico-theme main {
  color: lime;
}

body.hico-theme .navlink a{
  background: lime;
  color: black;
  border: 1px solid lime;
  }

body.hico-theme .navlink a::before {
  color: lime;
  }

body.hico-theme .navlink a:hover {
  background: black;
  color: lime;
  }
 
body.hico-theme .navlink a:hover::before {
  color: black;
  }
 
 
body.hico-theme details summary::marker{
  color:lime;
  }
 
body.hico-theme #star-rating {
  color: lime;
  }

 
 
  
  /* Responsiveness settings */
  
  
@media (max-width: 700px) {
  
  #container {
    margin: 10px;
  }

  #content {
   flex-direction: column;
  }

  #sidebar {
   min-width: 0;
    margin: 15px;
  }

  #sideimg {
   height: 200px;
  }

  main {
   box-sizing: border-box;
    width: auto;
    margin: 0 15px 15px;
    padding: 15px;
  }

}


@media (max-width: 700px) {
  pre {
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.9em !important;
  }
}


@media (max-width: 600px) {
  main {
    grid-template-columns: 1fr;
  }

  .full,
  .half,
  .third,
  .quarter,
  .two-thirds,
  .divider,
  details.full {
    grid-column: span 1;
  }
  
  .album-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .album-row .quarter {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  #last-watch {
    flex-direction: column;
  }

  #last-poster {
    flex: none;
    width: 150px;
  }

  #last-desc {
    width: 100%;
  }
}