/* :root {
  --bg-color: rgb(248, 245, 242);
  --clr-bright-text:rgb(223, 11, 11);
  --clr-text:rgb(8, 8, 8);
  --clr-introbg:rgb(245, 238, 235);
  --clr-blogtitle-bg:rgb(250, 234, 232);
  --clr-xes:rgb(214, 178, 176);
  --bg-image: url(images/bg_pink2.png);
  --clr-hilite: rgba(255, 240, 155, 0.2);
} */

::selection {
  background: rgba(255, 221, 221, 0.4);
  color: #441a15;
}

#display {display:inline-block;}

body {
  margin: 0 1.5em;;
  font-family: var(--font-main);
  font-size: var(--font-body-size);
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-blend-mode:var(--blend-mode);
  background-position: bottom;
  color: var(--clr-text);
}

a {
  color: var(--clr-text);
  text-decoration:none;
  background-color: var(--bg-color);
}

.source {
  font-size:.75em;
  text-align:right;
  margin:-2em 0 1em 3em;
  padding:0;
}

.center-this {margin: 0 auto;text-align:center;}
.align-right {margin: 0;margin-right:4em;text-align:right;}

img {width:100%;margin:1em 0;}

.manicule {
  width:2em;
  margin:0 0 0 .4em;
  padding: 0;
  position:relative;
  top:.25em;
}

.img-1em {width:1em;}
.img-2em {width:2em;}
.img-3em {width:3em;}
.img-4em {width:4em;}
.img-8em {width:8em;}
.img-10px {width:10px;}
.img-16em {width:16em;}

._1em {font-size:1em;}
._1.5em {font-size:1.5em;}
._2em {font-size:2em;}


/* PIXEL ANIMATED CROW */
.pillcrow {margin:0;padding:0;height:1.25em;width:auto;}
.stars {height:4em;width:10em;padding-bottom:2em;}

/* FOR INLINE PARAGRAPHS */
.pilcrow {color:var(--clr-firstline);}
.pilcrow::before {content:" ¶ ";}

p {margin:.5em 0 0 0;text-wrap:pretty;}
blockquote {color: #752626;}

.no-firstline-indent {text-indent:0;}

.box_text {
  border:1px solid rgba(0, 0, 0, 0.31);
  padding:5px;}


/*
blockquote {
  border-left:1em solid rgba(255, 232, 155, 0.7);
  text-indent:-2.5em;
}

blockquote::before {
  content: "❝";
  font-size:5em;
  position:relative;
  left:0em;
  top:.5em;
  color:rgba(201, 154, 122, 0.699);
}
*/

.double-border {
  border:8px double black;
  width:95%;
}

.rotate-grayscale {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition:filter 2s, box-shadow 2s, rotate 2s ease-in-out;
  rotate: 0deg;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.rotate-grayscale:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition:filter 2s, box-shadow 2s, rotate 2s ease-in-out;
  rotate: -2deg;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.253);
}

.gray, .grey {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

#title, #title a {
  color:var(--clr-bright-text);
  font-family: 'Press Start 2P', cursive;
  font-size:1.25rem;
  text-decoration: none;
  background-color: var(--bg-color);
  position:sticky;
  margin:0 auto 1em auto;
  display:block;
  top:1em;
  padding:.5em;
  width:min-content;
  z-index:3;
  border-radius: 20px;
  border:1px solid rgba(202, 43, 43, 0.123);
  box-shadow: -3px 3px 3px rgba(83, 62, 62, 0.116);
}

#title::before {
  content: "¶.MONSTER/";
}

/* #title.horizontal-shake:hover {
  animation: horizontal-shaking 0.35s infinite;
} */

.description {
  font-family: 'Press Start 2P', cursive;
  font-size:.6em;
  margin:0 auto 2em auto;
  padding:2em;
  text-align:center;
  line-height:1.75em;
  width:85%;
  color:#0000006e;
  border:1px dashed #00000023;
  border-radius:20px;
  background-color: var(--clr-introbg);
}

.content, .dandyaster {
  width:34em;
  line-height:1.5em;
  margin:0 auto;
  display:block;
  padding:1.5em 2.5em 0 2.5em; /* for border */
  border:1px dashed #ffffff;
  border-top:0;
  border-radius:20px 20px 0 0;
  /* border-right:1px solid #75262621; */
  background-color: var(--clr-content-bg);
}

.dandyaster {background-color: rgb(242, 225, 196);}

.content::after {
  font-size:.75em;
  font-family: 'Press Start 2P', cursive;
  content:"© reinhart mmxxvi";
}

/* .content a {
  background-color: var(--bg-color);
}
  */

/* FOR DROPDOWN MENU!! */

.Dropdown {
  display:block;
  margin:0 auto;
  text-align:center;
  font-size:.75em;
  font-family: 'Press Start 2P', cursive;
  color:rgba(0, 0, 0, 0.34);
  text-decoration: none;
}

.highlighter {
  background-color: rgba(255, 240, 155, 0.3);
  text-decoration:underline solid orange;
  text-underline-offset: .25em;
}

.highlighter::after {content:" ➹"}
.hilite {background-color: rgba(255, 240, 155, 0.2);}
.article {text-indent:1.25em;}
.article::first-line {color:var(--clr-bright-text);text-transform:uppercase;}
.firstpara::before {content:"¶ ";}
p.firstpara {text-indent:0;}

.month, .year {
  font-size:1em;
  font-family: 'Press Start 2P', cursive;
  text-transform:uppercase;
  margin:0 0 1.5em 0;
  color:rgba(161, 71, 71, 0.384);
  text-align:center;
}
.month::after, .month::before {content:" ×———× "}
.year {font-size:1.5em;color:rgba(161, 71, 71, 0.384);}

.year::after, .year::before {content:" × "}

.Dropdown {cursor:pointer;}
/* .Dropdown:hover{border-bottom: 1em solid  #f13f3f2f;} */

.Dropdown::before{color:rgba(0, 0, 0, 0.4); content:"🡇 ";}
.Dropdown::after{color:rgba(0, 0, 0, 0.4); content:" 🡇";}

.Dropdown:hover{
  transition: all 0.5s ease-out;
}
.Dropdown:hover::before{color:var(--clr-bright-text); content:"🡇 ";}
.Dropdown:hover::after{color:var(--clr-bright-text); content:" 🡇";}




iframe {/* aspect-ratio:16 / 9; */width:100%;}

@media (max-width:43em) {
  .content {width: 90%;border:none;padding:0;}
  body {background: none;background-color: var(--bg-color);}
  #title {margin:0 auto 2em auto;}
}

@media (max-width:500px) {
  .month {font-size:.9em;}
  .month::after, .month::before {content:" × "}}

.inwhich {
  margin:1em auto 0 auto;
  text-align:center;
  width:85%;
  font-style:italic;
}

.inwhich::first-line {text-transform:capitalize;}

.date {
  /* margin:2em 2em; */
  text-transform:uppercase;
  background-color: rgba(255, 221, 221, 0.4);
  /* background: linear-gradient(90deg, rgba(255,221,221,1) 0%, rgba(255,255,255,0) 100%); */
  font-weight:600;
  font-size:0.75em;
  font-family: 'Press Start 2P', cursive;
  border-right: var(--bg-color) dashed .35em;
  /* another good red - #d25b5b */
}

.date a {background-color: red;}
.blurb {margin-bottom:2em;}
.blurb::after {content:"";font-size:1rem;}

a .blurb {
  text-decoration:none;
  background-color: var(--bg-color);
}

.asterism {text-align:center;margin-bottom:1em;}
.asterism::after {content:"⁂";}

.silcrow {text-align:center;margin-bottom:1em;}
.silcrow::after {content:"§";}

.fleuron {text-align:center;margin:1em 0;font-size:1em;}
.fleuron::after {content:"❦";}

.textred {color:red;}

.logo_pm {height:3em;width:3.01em;}

.smallcaps{font-variant: small-caps;}

code {
  background-color: rgb(255, 255, 255);
  border: 1px solid va(--clr-text);
  padding:.25em .5em;
  box-shadow: 2px 2px 2px #07070734;
  border-radius: 3px;
}
/* code::before {content:"[";}
code::after {content:"]";} */

.img-flex-lineup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: stretch;
    margin:0;
    max-width: 700px;
    gap:0;
  }

/* footer {margin:5.5em 0;} */
  
/* Scrollbar styles */
::-webkit-scrollbar {
  width: .65vw;
  height: .5em;
  }
  
::-webkit-scrollbar-track {border: 1px solid #ffffff00;}
::-webkit-scrollbar-thumb {background: #d25b5b6c;}
::-webkit-scrollbar-thumb:hover {background: #d25b5b;}



/* INK / INKY INKLE STYLINGS BELOW */

.buttons {
  font-family: 'Press Start 2P', cursive;
  font-size:.75rem;
  cursor: pointer;
}

#rewind:hover, #save:hover, #reload:hover {
  color:red;
}
/*
  Class applied to all choices
  (Will always appear inside <p> element by default.)
*/
.choice {
    text-align: center;
    line-height: 1.7em;
    border:1px #d25b5b dashed;
    border-radius:5px;
    padding:1em;
}

.choice:hover{
  color:#d25b5b;
  border:1px solid black;
}

/* 
  Class applied to first choice
*/
:not(.choice)+.choice {
    padding-top: 1em;
}

/*
  Class applied to choice links
*/
.choice a, .choice span {
    font-size: 1em;
}

/* 
  Built-in class:
    The End # CLASS: end
*/
.end {
    text-align: center;
    font-weight: bold;
    color: black;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* #controls {
    z-index: 4;
    font-size: 9pt;
    text-align: center;
    padding-bottom: 6px;
    position: fixed;
    right: 14px;
    top: 4px;
    user-select: none;
    background: white;
} */