/*
    plagiarism (noun)

        - Cambridge Dictionary:
        the process or practice of using another person's ideas or work and pretending that it is your own

        - Merriam-Webster:
        the act of using another person's words or ideas without giving credit to that person
    
        See also: https://www.plagiarism.org/article/what-is-plagiarism

    Please do NOT copy, redistribute or use any part of my work without permission,
    be it content or design, including texts, graphics and code.
    Any resources used in making this site are listed and credited at the end of the site in the credits section.
    If you have questions, ask.
*/

@font-face {
    font-family: "ZallmanCaps";
    src: url(zallmancaps.ttf);}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;}

::-webkit-scrollbar-thumb {
    background: #000;}

::-webkit-scrollbar-track {
    background: url(bg.png);}

::selection {
    color: #fff7fe;
    background: #9274a5;}

::-moz-selection {
    color: #fff7fe;
    background: #9274a5;}

/* -----------------------
FRAME
----------------------- */

body {
    margin: 0;

    background: url(bg.png);
    color: #807d86;
    font-family: "Manuale", serif;
    font-size: 16px;
    line-height: 1.9em;
    text-align: justify;}

#content {
    box-sizing: border-box;
    margin: 0 auto;
    width: 760px;}

header {
    margin: 60px auto 0;
    width: 922px;
    height: 449px;

    background: url(friederike.png) no-repeat;}

footer {
    margin: 0;
    padding: 5px;

    background: #000;
    text-align: center;}

/* -----------------------
NAVIGATION FROM HELL
----------------------- */

nav {
    margin: 0 auto;
    padding-top: 20px;
    width: 1000px;
    height: 275px;

    background: url(heading.png) no-repeat top center;
    font-family: "Playfair Display", serif;
    font-style: italic;}

#left {
    float: left;
    width: 200px;
    text-align: right;}

#right {
    float: right;
    width: 200px;
    text-align: left;}

nav ul {
    display: inline;
    padding-left: 0;
    line-height: 40px;}

nav ul li {list-style-type: none;}

#left li:nth-child(1) {margin-right: 0;}
#left li:nth-child(2) {margin-right: -15px;}
#left li:nth-child(3) {margin-right: -30px;}
#left li:nth-child(4) {margin-right: -60px;}
#left li:nth-child(5) {margin-right: -90px;}

#right li:nth-child(1) {margin-left: 0;}
#right li:nth-child(2) {margin-left: -15px;}
#right li:nth-child(3) {margin-left: -30px;}
#right li:nth-child(4) {margin-left: -60px;}
#right li:nth-child(5) {margin-left: -90px;}

nav a {
    padding: 5px;

    font-size: 19px;
    text-decoration: none;
    text-transform: lowercase;}

nav a:hover {color: #826693;}

#left a:hover:before {
    position: relative;
    top: 5px;
    left: -10px;

    content: url(navleft.png);}

#right a:hover:after {
    position: relative;
    top: 5px;
    right: -10px;

    content: url(navright.png);}

/* -----------------------
DESIGN
----------------------- */

#heading {text-align: center;}

#heading h1 {
    margin: 0 auto auto;

    color: #000;
    font-family: "Crushed", cursive;
    font-size: 40px;
    letter-spacing: 2px;}

#heading h1:before {
    position: relative;
    top: 25px;
    left: -30px;
    content: url(hleft.png);}

#heading h1:after {
    position: relative;
    top: 25px;
    right: -30px;
    content: url(hright.png);}

#heading h2 {
    display: inline-block;
    margin: 15px auto;
    padding: 5px;

    background: #a692b3;
    color: #fff7fe;
    font-family: "Playfair Display", serif;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 3px;
    line-height: 13px;
    text-transform: uppercase;}

h3 {
    margin: 30px auto;

    color: #000;
    font-family: "Crushed", cursive;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;}

h3:before {
    position: relative;
    top: 0;
    left: -30px;
    content: url(navleft.png);}

h3:after {
    position: relative;
    top: 0;
    right: -30px;
    content: url(navright.png);}

#content > p:first-of-type::first-letter {
    float: left;
    margin: 15px 5px auto 0;

    color: #000;
    font-family: "ZallmanCaps", serif;
    font-size: 55px;}

b, strong {color: #8d2f82;}

i, em {color: #659b2b;}

u, q {
    padding: 0;

    background: #f1eaf5;
    color: #826693;
    text-decoration: none;}

.small {font-size: 14px;}

.def {
    border-bottom: 1px dotted #a692b3;}

a {
    color: #bf66ab;
    text-decoration: none;
    transition: 0.5s;}

#content a {
    border-bottom: 1px dotted #a692b3;
    padding-bottom: 2px;}

#content a:hover, footer a:hover {
    background: #f4eff7;
    color: #826693;}

/* -----------------------
INSERTS
----------------------- */

hr {
    margin: 30px auto;
    width: 473px;
    height: 40px;

    background: url(hr.png) no-repeat;
    border: 0;}

#content > blockquote {
    margin: 30px auto;
    width: 80%;
    min-height: 100px;

    color: #826693;
    font-family: "Playfair Display", serif;
    font-size: 20px;}

#content > blockquote:before {
    display: block;
    float: left;
    margin: 5px 15px 0 0 ;
    content: url(blockquote.png);}

cite {
    display: block;
    margin: 20px 0 0 160px;

    color: #807d86;
    font-family: "Faustina", serif;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;}

cite:before {
    content: "\2014 \2009";}

/* PAGE-LEAFING */

#leafingbox {
    margin: 45px auto;
    text-align: right;}

#leafing {
    background: url(navleft.png) no-repeat left center;
    display: inline-block;
    padding: 0 0 0 60px;

    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-style: italic;
    text-align: right;}

#leafing a {border-bottom: 0;}

/* IMAGES */

.sideimg img, .centerimg img {
    padding: 3px;
    border: 3px solid #000;}

.sideimg img {
    width: 200px;
    height: 140px;}

.sideimg {
    width: 235px;
    height: 152px;}

.right {
    float: right;
    margin: 15px -22px auto 15px;
    background: url(imgright.png) no-repeat right center;}

.left {
    float: left;
    margin: 15px 15px auto -22px;
    background: url(imgleft.png) no-repeat left center;}

/* invisible default settings are out to ruin your game */
.left img {float: right;}

.centerimg img {
    width: 360px;
    height: 250px;}

.centerimg {
    margin: 15px auto;
    padding-left: 40px;
    width: 452px;
    height: 262px;

    background: url(imgcenter.png) no-repeat right center;}

.display {overflow: auto;}

.display blockquote {
    max-width: 70%;

    background: #000;
    color: #fff7fe;
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.9em;
    padding: 3px;
    text-align: center;}

.display blockquote.top {margin: 15px auto -18px;}

.display blockquote.bottom {margin: -18px auto 15px;}

/* -----------------------
PAGE: INDEX
----------------------- */

#info {
    margin: 30px auto;
    width: 80%;

    background: url(navleft.png) no-repeat left center, url(navright.png) no-repeat right center;
    text-align: center;
    word-spacing: 2px;}

#info span {padding: 0 20px;}

#event, #event a, #event a:hover {
    margin: -15px auto 30px;
    width: 200px;
    height: 40px;

    background: none;
    border-bottom: 0;}

/* -----------------------
PAGE: INTRO
----------------------- */

/* PROFILES */

.profiles {
    margin: 30px auto;
    overflow: auto;}

.profile {
    float: left;
    width: 50%;
    text-align: center;}

.profile img, .profileside img {
    display: block;
    margin: auto;
    width: 210px;
    height: 210px;}

.profile h1, .profileside h1 {
    display: inline-block;
    margin: 15px auto;
    padding: 5px;
    width: 130px;

    background: #000;
    color: #fff7fe;
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 3px;
    line-height: 14px;
    text-transform: uppercase;}

.profile p, .profileside p {
    margin: auto;
    width: 80%;}

/* VOLUME DROPDOWN */

#overview-show {
    border-bottom: 1px dotted #a692b3;
    color: #bf66ab;
    padding-bottom: 2px;
    text-decoration: none;
    transition: 0.5s;}

#overview-show:hover {
    background: #f4eff7;
    color: #826693;}

#overview-hidden {display: none;}

/* VOLUME BOXES */

.volumes {
    margin: 30px auto;
    overflow: auto;}

.chapters {
    float: left;
    width: 50%;}

.chapters ul {
    margin: auto;
    width: 65%;}

.chapters ul li {
    list-style-type: none;
    padding-left: 15px;}

.chapters ul li:first-of-type {
    display: inline-block;
    margin-bottom: 15px;
    padding: 5px 0 5px 15px;
    width: 170px;

    background: #000;
    color: #fff7fe;
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 3px;
    line-height: 14px;
    text-transform: uppercase;}

.chapters ul li:first-of-type:before {content: none;}

.chapters ul li:before {content: "— ";}

.volumes + p {
    margin: 30px auto;
    width: 80%;}

/* -----------------------
PAGE: GALLERY
----------------------- */

#gallery {
    margin: 30px auto 15px;
    width: 80%;
    text-align: center;}

#gallery img {
    margin: 15px;
    padding: 3px;
    width: 100px;
    height: 100px;

    border: 3px solid #e4dbed;}

#gallery a:hover img {
    border: 3px solid #a692b3;
    transition: 0.3s;}

#gallery a {
    border-bottom: 0;
    padding-bottom: 0;}

#gallery a:hover {background: none;}

#gallery a:focus {outline: 0 !important;}

/* -----------------------
PAGE: KINDRED
----------------------- */

/* the rest is under intro */
.profileside {
    margin: auto 0 15px 15px;
    overflow: auto;
    float: right;
    width: 210px;
    text-align: center;}

/* -----------------------
PAGE: THE FAIRY TALE
----------------------- */

table {
    margin: 30px auto;
    width: 98%;
    border-spacing: 12px;}

th {
    width: 50%;
    padding: 3px 12px;

    background: #000;
    color: #fff7fe;
    font-family: "Playfair Display", serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 21px;
    text-align: left;
    text-transform: uppercase;
    vertical-align: top;}

td {
    padding: 3px 12px;

    color: #908498;
    background: #f4eff7;
    text-align: left;
    vertical-align: top;}

/* -----------------------
PAGE: LINKS
----------------------- */

#credits {margin: 30px auto;}

#credits li {list-style-type: none;}

#credits li:before {content: "— ";}

#links {
    margin: 30px auto;
    text-align: center;}

#links img {
    margin: auto 3px;
    padding: 3px;
    border: 3px solid #e4dbed;}

#related {
    margin: 30px auto;
    width: 90%;}

#related > p {
    margin-top: 30px;}

#related img {
    float: left;
    margin: 5px 10px auto 0;
    padding: 3px;
    width: 200px;
    height: 40px;

    border: 3px solid #e4dbed;}

#links img:hover, #related img:hover {
    border: 3px solid #a692b3;
    transition: 0.3s;}