@import "https://haunteddolly.neocities.org/style/palette-cupcake.css";

@import "https://haunteddolly.neocities.org/style/fonts.css";

:root{

    --darkbg:var(--base0);
    --fg:var(--base7);

    /* shadow */
    --bg0:var(--base0);
    /* base */
    --bg1:var(--base1);
    /* highlight */
    --bg2:var(--base2);

    /* shadow */
    --lightbg0:var(--base0);
    /* base */
    --lightbg1:var(--base2);
    /* highlight */
    --lightbg2:var(--base5);

    --modebar0:var(--base5);
    --modebar1:var(--base6);
    --modebar2:var(--base7);

    --main-border-color:var(--base5);
}

html{
    color:var(--fg);
    background-color:var(--base7);
    background-image:url("images/bdiamond4.png");
    font-size:16px;
    font-family:"IBM Plex Serif", "IBM Plex Math";
    font-weight:453;
}
body{
    margin:0;
}

::selection{
    color:var(--base7);
    background-color:var(--magenta);
}

main,  div#content{
    background-color:var(--base1);
    border-width:1px;
    border-left-style:solid;
    border-right-style:solid;
    border-left-color:var(--main-border-color);
    border-right-color:var(--main-border-color);
    border-bottom-style:solid;
    border-bottom-color:var(--base7);
    border-bottom-width:2px;
    max-width:50%;
    padding:0;
    margin-left:auto;
    margin-right:auto;
}

p{
    max-width:40rem;
    line-height:1.5;
    margin:0.5rem 5rem 0.5 5rem;
    margin-left:5rem;
    margin-right:5rem;
    padding:0 4rem 0 4rem;
    text-align:justify;
    text-justify:inter-word;
    text-indent:1.5rem;
    font-variant-numeric:oldstyle-nums;
}
em::before, i::before, cite::before{
    content:" "
}
em::after, i::before, cite::before{
    content:" "
}

h1, h2, h3, h4, h5, h6{

    margin:0;

    background-color:var(--base2);
    padding-top:5px;
    padding-bottom:3px;

    text-align:left;
    font-family:"CMU Concrete";
    font-size:1.3rem;
    font-weight:normal;
    font-style:italic;

}
h2{
    font-size:1.3rem;
    font-weight:600;
    background-color:var(--base3);
    margin-top:2rem;
}
h3{
    margin-top:1.25rem;
    font-size:1.27rem;
    padding-top:3px;
    padding-bottom:2px;
}
h4{
    font-size:1.2rem;
    padding-top:2px;
    padding-bottom:1px;
}
h5 {
    color:var(--base6);
}
h6 {
    color:var(--base5);
}

/* h1::before{ */
/*     content:"     *"; */
/*     padding-right:0.5rem; */
/* } */
/* h2::before{ */
/*     content:"    **"; */
/*     padding-right:1.5rem; */
/* } */
/* h3::before{ */
/*     content:"   ***"; */
/*     padding-right:2.5rem; */
/* } */
/* h4::before{ */
/*     content:"  ****"; */
/*     padding-right:3.5rem; */
/* } */
/* h5::before{ */
/*     content:" *****"; */
/*     padding-right:4.5rem; */
/* } */
/* h6::before{ */
/*     content:"*****"; */
/*     padding-right:5.5rem; */
/* } */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before{
    font-family:"Drafting* Mono";
    font-weight:bold;
    /* color:var(--base4); */
    font-size:1.6rem;
    font-style:normal;
    font-weight:bold;
    padding-left:9rem;
    padding-right:1em;
    position:relative;
    top:4px;
}
h2::before{
    content:"*";
    color:var(--base0);
}
h3::before{
    content:"**";
    color:var(--cyan);
}
h4::before{
    content:"***";
    color:var(--blue);
}
h5::before{
    content:"****";
    color:var(--magenta);
}
h6::before{
    content:"*****";
    color:var(--base4);
}
/* h6::before{ */
/*     content:"******"; */
/*     color:var(--base3); */
/* } */

code{
    font-family:"Drafting* Mono";
}

hr{
    margin:0 9rem 0 9rem;
    border-color:var(--base0);
}

.site-title{
    font-family:"Drafting* Mono";
    font-weight:300;
    margin:20px auto 20px auto;
    font-size:1.2rem;
    font-style:normal;
    border-top-style:solid;
    border-top-color:var(--base0);
    border-bottom-style:solid;
    border-bottom-color:var(--base7);
    border-width:1px;
    border-bottom-width:2px;
    text-align:center;
    width:100%;
}
.site-title::before, .site-title::after{
    content:none;
}
header, footer{
    margin:0 auto 0 auto;
    max-width:50%;
    text-align:center;

    background-color:var(--base5);
    border-left-style:solid;
    border-right-style:solid;
    border-left-color:var(--main-border-color);
    border-right-color:var(--main-border-color);
    border-width:1px;
}
footer{
    padding-top:0;
}

.recessed{
    display:block;
    margin:0 0.5rem 0.5rem;
    padding-top:4px;
    color:var(--base7);

    background-color:var(--base3);
    border-style:solid;
    border-width:2px;
    border-top-color:var(--base7);
    border-bottom-color:var(--base0);
    border-left-color:var(--base2);
    border-right-color:var(--base2);
}
.overhang{
    background-color:var(--lightbg1);
    border-width:1px;
    border-radius:2px;
    border-top-style:solid;
    border-bottom-style:solid;
    border-top-color:var(--lightbg2);
    border-bottom-color:var(--lightbg0);
}

.blog-title, .blog-date, .post-title, .post-date{
    margin:0;
    padding:0;
    font-family:"Drafting* Mono";
    padding-top:5px;
    padding-bottom:5px;
    display:flex;
    max-width:100%;
}

.post-date{
    background-color:var(--base4);
    color:var(--base7);
    font-family:"Drafting* Mono";
    font-size:1rem;
    text-align:right;
    padding-right:0 0 0.5rem 0;
    font-weight:400;
}
.post-title{
    flex-grow:10;
    padding-left:0.5rem;
    text-align:left;
    font-size:1.1rem;
    color:var(--base4);
    font-weight:500;
    color:var(--base7);
    background-color:var(--base2);
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    border-top-color:var(--base0);
    border-left-color:var(--base4);
    border-right-color:var(--base4);
    border-bottom-color:var(--base6);
}
.post-title::before{
    content:none;
}
.post-title a:link{
    color:var(--base6);
}
.post-title a:hover{
    color:var(--base5);
}

.blog-tags, .taglist{
    text-align:right;
    padding-top:3rem;
    padding-bottom:1rem;
    border-top-style:solid;
    border-top-color:var(--base6);
    border-width:1px;
    font-family:"Drafting* Mono";
    color:var(--base4);
    background-color:var(--base4);
    font-weight:400;
    color:var(--base6);
}
.taglist a, .taglist a:link, .taglist a:visited{
    text-decoration:none;
    background-color:var(--base3);
    color:var(--base5);
    font-style:italic;
    padding:0 3px 0 3px;
}
.taglist a:hover{
    background-color:var(--yellow);
    color:var(--base7);
}


nav{
    margin:0 auto 0 auto;
    padding:1rem 0 3rem 0;
}
.navlinks{
    margin:0;
  text-align:center;
  padding:0;
}
.navlinks li{
    margin:0;
  display:inline-block;
  padding:0 30px 3px 30px;
  background-color:var(--base2);
  border-radius:3px;
  border-style:solid;
  border-width:1px;
  border-top-color:var(--base0);
  border-left-color:var(--base3);
  border-right-color:var(--base3);
  border-bottom-color:var(--base7);
}
.navlinks li a, .navlinks::before, .navlinks::after {
    font-weight:600;
    font-size:1.1rem;
    color:var(--magenta);
    font-family:"Drafting* Mono";
}
.navlinks li a:hover{
    color:var(--base0);
    color:var(--red);
}
.navlinks::before, .navlinks::after{
    position:relative;
    font-size:1rem;
    bottom:5px;
    color:var(--base3);
}

a{
    color:var(--blue);
    text-decoration-color:var(--base3);
}
a:link{
    color:var(--blue);
}
a:visited{
    color:var(--magenta);
}
a:hover{
    color:var(--base7);
    background-color:var(--base2);
}


.subtle{}

figure{
    text-align:center;
    margin:auto;
    border-bottom-style:solid;
    border-color:var(--base0);
}

blockquote{
    width:60%; 
    margin-left:5rem;
    font-size:1.1rem;
    font-style:italic;
}