/* Font(s) */
@import url('https://fonts.cdnfonts.com/css/old-standard-tt-4');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

:root {
    /* TODO: Junko's Color Scheme */
    --darkest-color: #070707;
    --not-so-dark-color: #202123;
    --middle-color: #a0a8ae;
    --not-so-bright-color: #63687b;
    --brightest-color: #fafbf8;

    /* TODO: Hmm */
    --page-size: 1000px;
}

/* Main  */
body {
    background-color: var(--darkest-color);
    color: var(--brightest-color);
}

/* Header */
.header {
    width: 100%;
    height: 32px;
    box-shadow: inset 0 -2px white;
    text-decoration: none
}

.header-logo {
    position: absolute;
    left: 20px;
    font-family: 'Old Standard TT', sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
}

.header-logo a {
    color: var(--brightest-color);
}

/* Story */
.story-body {
    width: var(--page-size);
}

.story-cover {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #000;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    -webkit-transition: opacity 3s ease-out;
    -moz-transition: opacity 3s ease-out;
    transition: opacity 3s ease-out;
}

.story-title {}

.story-title h1,
h2,
h3,
h4,
h5 {
    font-family: 'Old Standard TT', sans-serif;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
}

.story-title h1 {
    font-size: 4rem;
}

.story-title h4 {
    opacity: 75%;
}

.story-title hr {
    color: var(--middle-color);
    text-align: left;
    width: 7rem;
    margin-left: 0;
    margin-top: 0;
}

/* Story-chapter */
.story-chapter {
    margin-top: 32px;
}

.story-chapter h1 {
    font-family: 'Old Standard TT', sans-serif;
    margin-bottom: 1rem;
}

/* Story-content */
.story-content {
    font-family: 'PT Serif', serif;
}

.big {
    margin: 0 0 0 0;
    font-size: 2rem;
    font-weight: bold;
    font-family: 'Old Standard TT', sans-serif;
    line-height: 10px;

}

.story-chapter-title-anchor {
    color: var(--not-so-bright-color);
    text-decoration: none;
    font-size: 1.5rem;
    margin-left: -1.5rem;
}

.story-chapter-title-anchor:hover {
    cursor: pointer;
    color: var(--middle-color);
}

.story-decor {
    text-align: center;
}

.story-middle {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.story-content-hack {
    margin-top: -30px;
    width: var(--page-size);
    font-family: 'PT Serif', serif;

}

/* Chapter button */
.story-next {
    text-align: right;
    font-size: 1.5rem;
    font-family: 'Old Standard TT', sans-serif;
}

/* Hacks */
.absolute-center {
    left: 0;
    right: 0;

    margin: auto;
}

.no-link {
    text-decoration: none;
}

.story-hr {
    border: 2px dashed var(--middle-color);
    border-style: none none dashed;
    width: 700px;
}

.link-when-hovered {
    text-decoration: none;
    color: var(--middle-color)
}

.link-when-hovered:hover {
    text-decoration: underline;
    color: var(--brightest-color)
}