/*
* ayushsplaining index V1.0
* Copyright 2022, Ayush Mukherjee
* Free to use under the MIT license.
* 11/22/2022
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Variables
- Typography
- Components
- Layout
- Utilities
- Media Queries
*/


/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.story {
    text-align: justify;
}

.story h2 {
    font-family: var(--ff-heading);
    font-size: 2rem;
    text-align: center;
    color: var(--color-primary);
    font-weight: var(--ff-bolder);
    filter: drop-shadow(0 0 1rem var(--color-accent-muted))
        drop-shadow(0 0 2rem var(--color-accent));
}

.story p,
.story blockquote {
    font-family: var(--ff-text);
    font-size: 0.8rem;
    color: var(--color-primary-light);
}

.story blockquote {
    white-space: pre-wrap;
    font-style: italic;
}

.story a {
    color: inherit;
    text-decoration: none;
}

.story .first-character,
.story blockquote::before {
    font-family: var(--ff-heading);
    color: var(--color-primary);
    float: left;
    font-size: 75px;
    line-height: 60px;
}

.info-content{
    text-transform: uppercase;
    text-align: center;
    font-style: oblique;
}

.info-content a{
    text-decoration: underline;
}

.story p.chapter-number {
    font-size: 1rem;
}


/* Components
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.infobox {
    border-bottom: 1px solid var(--color-accent);
}

.story {
    max-width: var(--max-viewport-width);
}

.story p {
    padding-inline: 15px;
}

.story blockquote {
    position: relative;
}

.story blockquote::before {
    content: '\2018';
    position: absolute;
    top: 0.5lh;
    left: -1ch;
}

.story p.scene-break {
    margin-inline: 40%;
    margin-block: 1lh;
    border-bottom: 1px solid var(--color-accent);
}

.story .first-character {
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}

:nth-child(1 of .story p.chapter-number) {margin-inline-start: 0%;}
:nth-child(2 of .story p.chapter-number) {margin-inline-start: 12.5%;}
:nth-child(3 of .story p.chapter-number) {margin-inline-start: 25%}
:nth-child(4 of .story p.chapter-number) {margin-inline-start: 37.5%}
:nth-child(5 of .story p.chapter-number) {margin-inline-start: 50%}
:nth-child(6 of .story p.chapter-number) {margin-inline-start: 62.5%}
:nth-child(7 of .story p.chapter-number) {margin-inline-start: 75%}
:nth-child(8 of .story p.chapter-number) {margin-inline-start: 87.5%}


/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes draw {
    from {stroke-dashoffset: 4500}
    to {stroke-dashoffset: 0}
}

.track {
    fill-opacity: 0.22;
    fill: var(--color-primary);
    stroke: var(--color-primary-light);
    stroke-width: 8px;
    stroke-opacity: 0.5;
    stroke-dasharray: 4500;
    stroke-dashoffset: 4500;
    animation: draw var(--transition-delay-long) ease-in-out infinite;
}

.background-img,
.background>svg {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    max-width: var(--max-viewport-width);
    z-index: -10;
}

.story {
    margin-inline: 10%;
    margin-block: 7%;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media(min-width: 900px) {
    .story {
        margin-inline: auto;
    }
    
    .story h2 {
        font-size: 3rem;
    }

    .story p,
    .story blockquote {
        font-size: 1rem;
    }

    .story p.chapter-number {
        font-size: 1.2rem;
    }

    .story:hover h2,
    .story:focus-within h2 {
        filter: drop-shadow(0 0 3rem var(--color-accent))
            drop-shadow(0 0 4rem var(--color-accent));
    }
}