/* sections */
body.horror {
    --background: #282828;
    --text: #fff;
    --accent: #535353;
    --commentColor: #ff99ff;
}

body.horror a:link {
    color: #3399ff;
}
body.horror a:visited {
    color: #ff00ff;
}

body.vampire {
    --background: #000;
    --text: #fff;
    --accent: #353535;
    --commentColor: #ffcccc;
}

body.vampire a:link {
    color: #6699ff;
}

body.vampire a:visited {
    color: #DF9DFF;
}

body.vampire a:active {
    color: #ff0000;
}

body.were {
    --background: #282828;
    --text: #fff;
    --accent: #535353;
    --commentColor: #ffcccc;
}

body.were a:link {
    color: #3366ff;
}

body.were a:visited {
    color: #ff00ff;
}
body.were a:active {
    color: #ff0000;
}

body.ghost {
    --background: #a2a2a2;
    --text: #000000;
    --accent: #535353;
    --commentColor: #660066;
    background-image: url("/ghost/images/cloud2.jpg");
}

body.demon {
    --background: #ff0000;
    --text: #000;
    --accent: #D9FFD9;
    --commentColor: #9900CC;
}

body.demon #qvamp {
    background-color: var(--accent);
    border-radius: 5px;
    margin-right: 5rem;
    padding: 8px;
}

body.demon a:link {
    color: #0000ff;
}

body.monster {
    --background: #000;
    --text: #fff;
    --accent: #535353;
    --commentColor: #ffcccc;
}

body.monster a:link {
    color: #6699ff;
}
body.monster a:visited {
    color: #DF9DFF;
}
body.monster a:active {
    color: #ff0000;
}

body.monster #qvamp {
    background-color: var(--accent);
    border-radius: 0.5rem;
    padding: 15px;
    box-shadow: inset 3px 3px 5px #313131,
                inset -3px -3px 5px #aaa;
    margin-right: 5rem;
}

body.thriller {
    --background: #b88db3;
    --text: #000;
    --accent: #61245a;
    --commentColor: #330033;
}

body.dystopia {
    --background: #282828;
    --text: #fff;
    --accent: #535353;
    --commentColor: #ffcccc;
}

body.dystopia a:link {
    color: #3366ff;
}

body.dystopia a:visited {
    color: #ff00ff;
}
body.dystopia a:active {
    color: #ff0000;
}

/* standard styles for all pages */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--background);
    color: var(--text);
}

#header {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    margin-bottom:2rem;
}

#logo {
    width: 100px;
    height: 100px;
    border:0;
}

#bigTitle {
    text-align: center;
}

#tags span {
    margin: 10px 10px 2em 10px;
    border: 1px solid var(--accent);
    border-radius: 1rem;
    background-color: var(--background);
    padding: 0.3rem 1rem;
}

#overview, #centerContent, #warns, #misc, #ratings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: center;
}

#overview {
    grid-template-columns: 1fr min-content;
}

#orientations img {
    margin-top: 1rem;
    width:75px;
    height:75px;
}

#smallTitle {
    list-style-type: none;
    font-weight: 550;
}

#info ul li div {
    margin-left:10px;
}


#imgHolder img {
    border-radius: 1rem;
}

#otherImgs {
    text-align: right;
}

#centerContent {
    grid-template-columns: 1fr min-content;
}

#warnTitle {
    text-align: center;
}

#warns {
    grid-template-columns: min-content 107px;
}

#warns img {
    width:107px;
    height:31px;
}

#warns div.label {
    text-align: right;
}

#miscWarn {
    grid-column: span 2;
}


#misc, #description, #stories {
    margin-top: 1rem;
}

#misc {
    grid-template-columns: 4fr 1fr;
}

#descTitle {
    margin-bottom: 0.5rem;
}

#qvamp {
    color: var(--commentColor);
}

#qvampQuote {
    margin: 0.5rem 0 0 0.6rem;
    font-style: italic;
}

#ratings {
    padding: 0.3rem;
    border: 1px solid var(--accent);
    border-radius: .4rem;
}

#ratings {
    row-gap: 8px;
    row-rule: 1px solid var(--accent);
}

#stories #storiesTitle span {
    margin-left: 5rem;
    font-size: .8rem;
}

.storyTitle {
    font-style: italic;
}

#userRatingTitle {
    margin-bottom: 0.5rem;
}

#userRatings .ratings span {
    margin-right: 3rem;
}

#userRatings .grade {
    font-weight: bold;
}

#userRatings .description {
    margin: 1rem 0 2rem 2rem;
}

#interactions {
    margin-top: 1em;
    text-align: right;
}
#interactions div {
    margin: .5rem 0;
}

#footer {
    color: var(--accent);
    margin-top: 2rem;
    font-size: .75rem;
}

#footer hr, #userRatings hr {
    width: 75%;
}