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

:root{
    --colorbg:#172030;
    --colorbase0:#070A0E;
    --colorbase1:#0E131D;
    --colorbase2:#151D2B;
    --colorbase3:#1F2A3F;
    --colorbase4:#5D636E;
    --colorbase5:#64727d;
    --colorbase6:#B16E75;
    --colorbase7:#E8E9EB;
    --colorfg:#F0F4FC;
    --colorred:#C6797E;
    --colorlred:#DB6E8F;
    --colororange:#EABE9A;
    --coloryellow:#F7E3AF;
    --colorgreen:#A3B09A;
    --colorteal:#7ea9a9;
    --colorcyan:#88C0D0;
    --colordcyan:#507681;
    --colorblue:#6e94b9;
    --colordblue:#1E6378;
    --colorviolet:#5D80AE;
    --colormagenta:#b18bb1;
    --colorsalmon:#F9B5AC;

    --body-font:"Bitter", serif;
    --body-weight:500;
    --header-font:"Fjord", serif;
    --demi-font:"Bitter", serif;
    --demi-style:italic;
    --demi-weight:bold;

    --box-base:var(--colorbg);
    --box-top:var(--colorbase5);
    --box-side:var(--colorbase3);
    --box-bottom:var(--colorbase5);
}

html{
    color:var(--colorfg);
    font-family:var(--body-font);
    font-weight:var(--body-weight);
    font-size:16px;
    background-color:var(--colorbase0);
    background-image:url("https://haunteddolly.neocities.org/images/bg-rosetile.png")
}

::selection{
    color:var(--colorbase1);
    background-color:var(--colorbase6);
}

main,nav,aside {
  background-color:var(--box-base);
  /* border-color:var(--colorbase5); */
  /* border-style:outset; */
  border-style:solid;
  border-radius:8px;
  border-top-width:1px;
  border-left-width:4px;
  border-right-width:4px;
  border-bottom-width:1px;
  border-top-color:var(--box-top);
  border-left-color:var(--box-side);
  border-right-color:var(--box-side);
  border-bottom-color:var(--box-bottom);
}

main{
    padding: 0.2rem 3rem 2rem 3rem;
    max-width:50%;
    margin-left:auto;
    margin-right:auto;
}

article{
    margin-left:auto;
    margin-right:auto;
}

p{
    text-align:justify;
    text-justify:inter-word;
    text-indent:1.5rem;
    margin:1rem auto 1rem auto;
    padding:0 1rem 0 1rem;
    max-width:35rem;
    line-height:1.5;
    font-variant-numeric:oldstyle-nums;
}

aside{
  max-width:300px;
  padding:0.2rem 0.1rem 0.5rem 0.1rem;
  color:var(--colorbase7);
  margin: 0 1rem 0 1rem;
}
aside p{
    font-size:0.95rem;
    font-weight:500;
    text-align:left;
    padding:0 2rem 0 2rem;
}

header, footer{
  margin-top:50;
  margin-bottom:90px;
  margin-left:20%;
  margin-right:20%;
  width: 60%;
  text-align:center;
}
footer{
    margin-top:90px;
}

h1,h2,h3,h4,h5,h6{
    font-family:"Fjord";
    font-weight:bold;
    font-style:normal;
    color:var(--colorbase6);
    text-align:center;
    margin:1.5rem 3rem 0.25rem 3rem;
    text-indent:none;

    border-bottom-color:var(--colorbase6);
    border-bottom-style:solid;
    border-bottom-width:1px;
}
h1{
    color:var(--colorlred);
    font-size:3.5rem;
    border-bottom-style:double;
    border-bottom-width:3px;
}
h2{
    color:var(--colorlred);
    font-size:2rem;
}
h3{
    font-size:1.75rem;
    color:var(--colorred);
}
h4{
    font-size:1.5rem;
}
h5{
    font-size:1.25rem;
    font-family:"Literata";
}
h6{
    font-size:1rem;
    font-family:"Literata";
}

/* Bolder font for labels, keywords, &c */
th, dt, .keyword{
    font-family:var(--demi-font);
    font-weight:var(--demi-weight);
    font-style:var(--demi-style);
    color:var(--colorcyan);
}


hr{
    border:none;
    width:100%;
    text-align:center;
    margin-top:1rem;
    margin-bottom:1rem;
}

ul{
    list-style-type:none;
    list-style-postion:outside;
    background-color:var(--colorbase3);
    border-radius:6px;
    margin:1px;
}

li{
    margin-bottom:0.02rem;
    color:var(--colorbase7);
}
table{
    width:100%;
}
th, dt, .keyword{
}
li .keyword::after{
    content:" ";
}
td{
    color:var(--colorbase7);
    margin-bottom:0.5rem;
}
th{
    text-align:right;
}
td{
    text-align:left;
}

.flavor{
    font-style:italic;
    text-align:center;
    font-weight:normal;
    margin:0.5rem auto 1rem auto;
    color:var(--colorred);
    max-width:20rem;
}

.workitem{}
.workitemtitle{}
.workitemsynopsis{}

nav{
  font-size:1.1rem;
  border-radius:20px;
  border-left-width:4px;
  border-right-width:4px;
  border-bottom-width:4px;
  border-bottom-color:var(--colorbase3);
}

.navlinks{
  text-align:center;
}
.navlinks li{
  font-size:1.75rem;
  display:inline-block;
  padding-left:30px;
  padding-right:30px;
}

.flex{
    display:flex;
}
.flexwrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    align-items:flex-start;
    align-content:flex-start;
}
.flexwrap div, .flexwrap section{
    max-width:45%;
}

.columns{
    columns:2;
}

a{
    text-decoration-color:var(--colorbase5);
}

a:link{
    color:var(--coloryellow);
}
a:visited{
    color:var(--colororange);
}
a:hover{
    color:var(--colorlred);
}

abbr{
  font-family:font-variant-caps small-caps;
}

.supporter-l, .supporter-r{
    margin-top:100px;
}
.supporter-l{
    margin-left:30px;
    margin-right:5px;
}
.supporter-l::after{
    content:url(https://haunteddolly.neocities.org/images/support-l-angel.png);
}
.supporter-r{
    margin-right:30px;
    margin-left:5px;
}
.supporter-r::after{
    content:url(https://haunteddolly.neocities.org/images/support-r-angel.png);
}

figure{
    text-align:center;
    margin:auto;
    border-bottom-style:solid;
    border-color:var(--colorbase2);
}
figcaption{
    font-family:"Literata";
    padding:0.5rem;
    font-size:0.8rem;
    font-style:italic;
    font-weight:500;
    color:var(--colorbase5);
    border-width:2px;
    border-style:solid;
    border-color:var(--colorbase3);
}
.keyword::after{
    content:" ";
}

blockquote{
    width:60%; 
    margin-left:5rem;
    font-size:0.9rem;
}

/* DINGBATS */

hr::after, .navlinks::after, .navlinks::before, li::marker{
    font-family:var(--header-font);
    font-weight:bold;
    font-size:1.5rem;
    color:var(--colorbase5);
}
li::marker{
    font-size:1.2rem;
    font-family:"IBM Plex Math";
    font-weight:normal;
    content:"⎰ ";
}
hr::after{
    content:"* * *";
    color:var(--colorred);
}
.navlinks::before{
    content:"›";
}
.navlinks::after{
    content:"‹";
}