Create a new version of paste:

<!DOCTYPE html>

<!----------------------------------------------------------------------------

ÁGORA by codematurgy. don't claim this code as your own. feel free to point out any issues or suggest any changes to make it easier to use and browse through.

----------------------------------------------------------------------------->

<html dir="ltr" class="match_accents dark_sidebar" lang="{block:English}en{/block:English}{block:German}de-DE{/block:German}{block:French}fr-FR{/block:French}{block:Italian}it-IT{/block:Italian}{block:Japanese}ja-JP{/block:Japanese}{block:Turkish}tr-TR{/block:Turkish}{block:Spanish}es-ES{/block:Spanish}{block:Russian}ru-RU{/block:Russian}{block:Polish}pl-PL{/block:Polish}{block:PortuguesePT}pt-PT{/block:PortuguesePT}{block:PortugueseBR}pt-BR{/block:PortugueseBR}{block:Dutch}nl-NL{/block:Dutch}{block:Korean}ko-KR{/block:Korean}{block:ChineseSimplified}zh-CN{/block:ChineseSimplified}{block:ChineseTraditional}zh-TW{/block:ChineseTraditional}{block:ChineseHK}zh-HK{/block:ChineseHK}{block:Indonesian}id-ID{/block:Indonesian}{block:Hindi}hi-IN{/block:Hindi}">
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        <meta name="description" content="{MetaDescription}"/>
        
        <meta name="viewport" content="width=device-width"/>
        
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"/>
        
        <style>
            /*********************** GENERAL STYLING ***********************/
            
            /* HEADER IMAGE */
            
            .use_header_image #header_container {
                background-image:url('https://maquinadeescreverdotcom.files.wordpress.com/2017/06/dm-masses-e1497697488852.jpg');
            }
            
            /* COLORS */
            
            /* general */
            
            body {
                color:gray; /* default font color for the page. you won't see it used in this page unless you place anything outside the main container. */
                background-color:#efefef; /* main background color. */
            }
            
            #article_content {
                color:rgba(0, 0, 0, 0.7); /* font color for main text area. */
                background-color:white; /* background for main text area. */
            }
            
            #article_content figure figcaption { color:rgba(0, 0, 0, 0.55); } /* font color for figure captions. */
            
            #article_content > section::after, #article_content pre, #article_content code, #article_content .article_section article { background-color:rgba(0, 0, 0, 0.125); } /* background color for a few elements inside the main text area. the way it comes by default will always turn it slightly darker than the background for the main text area. */
            
            /* first accent color */
            /* change the value of all of these to the same color! */
            
            a, .match_accents #table_of_contents ol li::before { color:#fb7949; }
            
            #article_content aside, #article_content .article_section article { border-color:#fb7949; }
            
            .match_accents #header_container, .accent_sidebar.match_accents #main_container, #main_container #article_content h1:target::before, #main_container #article_content h2:target::before, #main_container #article_content h3:target::before, #main_container #article_content h4:target::before, #main_container #article_content h5:target::before, #main_container #article_content h6:target::before { background-color:#fb7949; }
            
            /* second accent color */
            /* change the color of all of these to the same value! */
            /* this page really isn't meant to be used with many colors. this is available mostly in case you feel like the first accent needs to be slightly corrected! */
            
            #table_of_contents ol li::before { color:#fb7949; }
            
            #header_container, .accent_sidebar #main_container { background-color:#fb7949; }
            
            /* text over accent color */
            /* you'll only see it if you're not using the use_header_image class or if you're using the accent_sidebar class. */
            
            #header_container, .accent_sidebar #main_container { color:white; }
            
            /* FONTS */
            
            html { font-size:13px; } /* base font size. */
            
            body { font-family:Lucida Console, Consolas, Menlo, monospace; } /* base font used. notice the default font comes with more than one value, because the following ones are "fallbacks" in case a font isn't available in that system. */
            
            h1, h2, h3, h4, h5, h6 { font-family:Work Sans, Trebuchet MS, Helvetica, Arial, sans-serif; } /* secondary font. if you want it to match the base font, you can change those values to simply "inherit"; this way, "font-family" will inherit the "font-family" value of its parent(which should be the base font). */
            
            /* ROUNDED BORDERS */
            
            /* main container rounded borders */
            
            #main_container { border-radius:7px; }
            
            #header_container, #header_container > *:first-child {
                border-top-left-radius:7px;
                border-top-right-radius:7px;
            }
            
            #main_container > footer {
                border-bottom-left-radius:7px;
                border-bottom-right-radius:7px;
            }
            
            /* main text section rounded borders */
            
            #article_content { border-radius:5px; }
            
            /* minor elements rounded borders */
            
            #article_content pre, #article_content .article_section article { border-radius:3px; }
            
            /* THE FOLLOWING ARE A PART OF GENERAL STYLING(in the sense they involve many page elments) BUT YOU LIKELY WON'T TOUCH THEM */
            
            /* margins */
            
            #header_container > header > *:first-child, #article_content > *:first-child, #article_content > section:first-child > *:first-child { margin-top:0; }
            #header_container > header > *:last-child, #article_content > *:last-child, #article_content > section:last-child > *:last-child { margin-bottom:0; }
            
            /* link underline */
            
            #sidebar_content a, #article_content .article_section article nav a, #main_container > footer a { text-decoration:none; }
            
            #sidebar_content a:hover, #sidebar_content a:focus, #article_content .article_section article nav a:hover, #article_content .article_section article nav a:focus, #main_container > footer a:hover, #main_container > footer a:focus { text-decoration:underline; }
            
            /* generic navigations */
            
            .article_section article nav a, #main_container > footer a { color:inherit; }
            
            .article_section article nav a::after, #main_container > footer nav a::after {
                content:"";
                display:inline-block;
                vertical-align:middle;
                width:0.4em;
                height:0.4em;
                margin:0 1em;
                background-color:currentColor;
                border-radius:100%;
                opacity:0.2;
            }
            
            .article_section article nav a:last-child::after, #main_container > footer nav a:last-child::after { content:none; }
            
            /********************* END GENERAL STYLING *********************/
            
            /* DEFAULT HTML ELEMENTS */
            
            iframe.tmblr-iframe { display:none; }
            .tmblr-iframe-pushdown { padding-top:0!important; }
            
            body {
                margin:0;
                line-height:1.75em;
            }
            
            a { text-decoration:underline; }
            
            h1 { font-size:2.5em; }
            h2 { font-size:1.75em; }
            h3 { font-size:1.5em; }
            h4 { font-size:1.25em; }
            h5 { font-size:1em; }
            
            h1, h2, h3, h4, h5, h6 {
                line-height:1.5em;
                margin:1rem 0;
            }
            
            h3, h4, h5, h6 { font-weight:normal; }
            
            h4, h5, h6 { position:relative; }
            
            h4::before, h5::before, h6::before {
                content:"";
                position:absolute;
                display:block;
                top:0.75em;
                width:0.4em;
                height:0.4em;
                margin-top:-0.2em;
                border-radius:5px;
                background-color:currentColor;
                opacity:0.25;
            }
            
            ul { list-style-type:square; }
            
            /* SCREEN READER SENTENCES */

            .screen_reader_sentences {
                position:absolute;
                margin:0 0 0 -9999px;
            } /* some things are easily understood for those with good sight, while it is actually quite confusing for those using screen readers. the sentences indicated in the code with this class are invisible on the screen, but will be rendered when using screen readers to make understanding easier. */
            
            /* ICON FONT */
            
            i.material-icons { font-size:inherit; vertical-align:bottom; }
            
            /* MAIN CONTAINER */
            
            #main_container {
                position:relative;
                width:1000px;
                margin:5% auto;
            }
            
            /* HEADER */
            
            #header_container {
                background-size:cover;
                background-position:center;
            }
            
            /* header content */
            
            #header_container > header {
                box-sizing:border-box;
                padding:5%;
            }
            
            #header_container > header h1 + h2, #header_container > header h1 + h3 {
                font-weight:normal;
                margin-top:-0.5rem;
            }
            
            /* main text container margin */
            
            #header_container > *:last-child { padding-bottom:8%; }
            
            /* DOUBLE COLUMN */
            
            #double_column { background-color:inherit; }
            
            #double_column > * {
                display:inline-block;
                vertical-align:top;
                box-sizing:border-box;
            }
            
            #double_column > *:first-child { width:30%; }
            #double_column > *:first-child + * { width:70%; }
            
            /* SIDEBAR NAVIGATION */
            
            #sidebar_content {
                padding:4%;
                background-color:inherit;
                position:-webkit-sticky;
                position:sticky;
                top:0;
            }
            
            #sidebar_content a { color:inherit; }
            
            #sidebar_content > * > *:first-child { margin-top:0; }
            #sidebar_content > * > *:last-child { margin-bottom:0; }
            
            #sidebar_content > #table_of_contents ~ * { margin-top:2rem; }
            #sidebar_content > #table_of_contents:empty + * { margin-top:0; }
            
            #sidebar_content ol { list-style:none; }
            
            #sidebar_content > * > ol {
                position:relative;
                margin-left:1px;
            }
            
            #sidebar_content > * > ol::before {
                content:"";
                position:absolute;
                left:-1px;
                width:1px;
                height:100%;
                background-color:currentColor;
                opacity:0.2;
            }
            
            /* table of contents */
            
            #button_of_contents {
                display:none;
                position:fixed;
                bottom:10vw;
                right:10vw;
                padding:0.4em;
                font-family:inherit;
                font-size:24px;
                line-height:1;
                background-color:inherit;
                color:inherit;
                border:1px solid transparent;
                border-radius:3px;
            }
            
            #button_of_contents i.material-icons + .screen_reader_sentences + .screen_reader_sentences { display:none; }
            #button_of_contents.open_contents i.material-icons + .screen_reader_sentences + .screen_reader_sentences { display:inline; }
            #button_of_contents.open_contents i.material-icons + .screen_reader_sentences { display:none; }
            
            #table_of_contents ol { counter-reset:item; }
            #table_of_contents ol li::before { counter-increment:item; }
            #table_of_contents ol li::before { content:counter(item)" "; }
            #table_of_contents ol ol li::before { content:counters(item, ".")" "; }
            
            /* ARTICLE CONTENT CONTAINER */
            
            #article_content {
                padding:2% 3%;
                margin:-3% 0;
            }
            
            #article_content > section > *:first-child { margin-top:3rem; }
            #article_content > section > *:last-child { margin-bottom:3rem; }
            
            /* ARTICLE CONTENT SECTIONS */
            
            #article_content > section { position:relative; }
            
            #article_content > section::after {
                content:"";
                display:block;
                margin:0 35%;
                height:3px;
                border-radius:3px;
            }
            
            #article_content > section:last-child::after { content:none; }
            
            /* ARTICLE ELEMENTS */
            
            #article_content section > * {
                margin-top:1rem;
                margin-bottom:1rem;
            }
            
            /* targeted headings */
            
            #article_content h1, #article_content h2, #article_content h3, #article_content h4, #article_content h5, #article_content h6 {
                position:relative;
                clear:both;
            }
            
            #article_content h1:target::before, #article_content h2:target::before, #article_content h3:target::before, #article_content h4:target::before, #article_content h5:target::before, #article_content h6:target::before {
                content:"";
                position:absolute;
                top:0.75em;
                margin-top:-5px;
                display:block;
                width:10px;
                height:10px;
                border-radius:100%;
                opacity:1;
            }
            
            /* float classes */
            
            #article_content figure, #article_content aside { clear:both; }
            
            #article_content .left_float, #article_content .right_float {
                max-width:30%;
                margin:1rem 2rem;
                margin-top:0;
            }
            
            #article_content blockquote.left_float, #article_content blockquote.right_float { font-size:inherit; }
            
            #article_content .left_float {
                float:left;
                margin-left:0;
            }
            
            #article_content .right_float {
                float:right;
                margin-right:0;
            }
            
            /* images and their wrappers */
            
            #article_content img {
                max-width:100%;
                height:auto;
            }
            
            #article_content figure {
                text-align:center;
                line-height:0;
                margin:2rem 0;
            }
            
            #article_content figure figcaption {
                line-height:1.5em;
                margin-top:1em;
            }
            
            /* asides */
            
            #article_content aside {
                box-sizing:border-box;
                padding:1em;
                border-width:1px;
                border-style:solid;
                border-radius:5px;
            }
            
            /* quotes */
            
            #article_content blockquote {
                font-size:1.2em;
                margin-left:3%;
                margin-right:3%;
                position:relative;
            }
            
            #article_content blockquote::before {
                font-family:Helvetica, Arial, sans-serif;
                font-size:5rem;
                opacity:0.2;
                position:absolute;
                margin-top:1rem;
            }
            
            /* pre and code */
            
            #article_content pre {
                padding:0.75em 1em;
                overflow-y:auto;
                font-family:Consolas, Menlo, monospace;
            }
            
            #article_content code {
                padding:2px 4px;
            }
            
            /* GALLERY SECTION */
            
            #article_content .gallery_section figure {
                display:inline-block;
                vertical-align:middle;
                width:30%;
            }
            
            /* ARTICLE SECTION */
            
            #article_content .article_section article {
                display:inline-block;
                vertical-align:top;
                width:47.5%;
                box-sizing:border-box;
                padding:1rem;
                border-top-width:3px;
                border-top-style:solid;
            }
            
            #article_content .article_section article * {
                margin-top:1em;
                font-size:1rem;
            }
            
            #article_content .article_section article p { font-size:calc(1rem - 1px); }
            
            #article_content .article_section article img, #article_content .article_section article header { margin-top:0; }
            
            #article_content .article_section article img:first-child, #article_content .article_section article img:first-child + header { display:inline-block; }
            
            #article_content .article_section article header:first-child {
                position:relative;
                line-height:1.75em;
            }
            
            #article_content .article_section article header:first-child::before {
                content:"";
                position:absolute;
                display:block;
                top:0;
                width:3.5em;
                height:3.5em;
                background-color:currentColor;
                opacity:0.2;
                border-radius:100%;
            }
            
            #article_content .article_section article img:first-child { max-width:30%; }
            
            #article_content .article_section article img:first-child + header {
                max-width:70%;
                box-sizing:border-box;
                padding:0 1rem;
            }
            
            #article_content .article_section article header ~ * {
                margin-left:0.5rem;
                margin-right:0.5rem;
            }
            
            /* article icon portraits class */
            
            #article_content .article_section.icon_portrait article img:first-child, #article_content .article_section.icon_portrait article img:first-child + header { vertical-align:middle; }
            
            #article_content .article_section.icon_portrait article img:first-child { border-radius:100%; }
            
            #article_content .article_section.icon_portrait article img:first-child + header { padding:0 1rem; }
            
            /* article tall portraits class */
            
            #article_content .article_section.tall_portrait article img:first-child, #article_content .article_section.tall_portrait article img:first-child + header { vertical-align:top; }
            
            #article_content .article_section.tall_portrait article img:first-child { border-radius:3px; }
            
            #article_content .article_section.tall_portrait article img:first-child + header { padding:0.5rem 1rem; }
            
            /* FOOTER */
            
            #main_container > footer {
                padding:2%;
                padding-top:5%;
                text-align:center;
                color:inherit;
                background-color:rgba(0, 0, 0, 0.125);
            }
            
            .dark_sidebar #main_container > footer { background-color:#181818; }
            .light_sidebar #main_container > footer { background-color:#cccccc; }
            
            /* MOBILE STYLING */
            
            @media (max-width: 1080px) {
                #main_container {
                    width:800px;
                }
            }
            
            @media (max-width: 880px) {
                #main_container {
                    margin:0;
                    width:100%;
                }
                
                #main_container, #header_container, #header_container > *:first-child, #main_container > footer {
                    border-radius:0;
                }
            }
            
            @media (max-width: 780px) {
                #double_column > *:nth-child(n) {
                    display:block;
                    width:100%;
                }
                
                /* table of contents */
                
                #sidebar_content {
                    position:static;
                    top:auto;
                    margin-left:auto;
                    width:100%;
                    padding:0;
                }
                
                /* table of contents */
                
                #lightbox { z-index:4; }
                
                iframe.tmblr-iframe { z-index:2!important; }
                
                #button_of_contents {
                    display:inline-block;
                    z-index:3;
                }
                
                #table_of_contents {
                    display:none;
                    position:fixed;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%;
                    padding:5%;
                    box-sizing:border-box;
                    background-color:inherit;
                    overflow:auto;
                    z-index:2;
                }
                
                #button_of_contents.open_contents { border-color:currentColor; }
                #button_of_contents.open_contents + #table_of_contents { display:block; }
                
                /* article content */
                
                #article_content {
                    margin:0;
                    padding:5%;
                }
                
                /* GENERAL STYLING */
                
                #article_content {
                    border-radius:0;
                }
                
                /* footer extra padding */
                
                #main_container > footer { padding:3%; }
            }
            @media (max-width: 550px) {
                #article_content .left_float, #article_content .right_float {
                    max-width:100%;
                    float:none;
                    margin:2rem 0;
                }
                
                /* GALLERY SECTION */
            
                #article_content .gallery_section figure { width:47.5%; }
                
                /* ARTICLE SECTION */
                
                #article_content .article_section article {
                    display:block;
                    width:100%;
                }
                
                #article_content .article_section article > img { max-width:20%; }
                
                /* FOOTER */
                
                #main_container > footer { padding:5%; }
            }
            
            @media (max-width: 360px) {
                #header_container > header, #article_content {
                    padding:7%;
                }
                
                /* GALLERY SECTION */
            
                #article_content .gallery_section figure {
                    display:block;
                    width:100%;
                    box-sizing:border-box;
                    padding:0 1em;
                }
            }
            
            /*************************** OPTIONS ***************************/
            
            /* PAGE ALIGNMENT */
            
            /* header width limitation */
            
            html[dir="ltr"] #header_container > header { padding-right:20%; }
            html[dir="rtl"] #header_container > header { padding-left:20%; }
            
            /* double column side padding */
            
            html[dir="ltr"] #double_column { padding-right:3%; }
            html[dir="rtl"] #double_column { padding-left:3%; }
            @media (max-width: 880px) {
                html[dir="ltr"] #double_column, html[dir="rtl"] #double_column { padding-left:0; padding-right:0; }
            }
            
            /* sidebar lists */
            
            html[dir="ltr"] #sidebar_content ol { padding-left:1em; }
            html[dir="rtl"] #sidebar_content ol { padding-right:1em; }
            
            html[dir="ltr"] #sidebar_content > * > ol { margin-left:1px; }
            html[dir="rtl"] #sidebar_content > * > ol { margin-right:1px; }
            
            html[dir="ltr"] #sidebar_content > * > ol::before { left:-1px; }
            html[dir="rtl"] #sidebar_content > * > ol::before { right:-1px; }
            
            /* headings */
            
            html[dir="ltr"] h4, html[dir="ltr"] h5, html[dir="ltr"] h6 { margin-left:1em; }
            html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { margin-right:1em; }
            html[dir="ltr"] h4::before, html[dir="ltr"] h5::before, html[dir="ltr"] h6::before { left:-1em; }
            html[dir="rtl"] h4::before, html[dir="rtl"] h5::before, html[dir="rtl"] h6::before { right:-1em; }
            
            html[dir="ltr"] #article_content h1:target::before, html[dir="ltr"] #article_content h2:target::before, html[dir="ltr"] #article_content h3:target::before, html[dir="ltr"] #article_content h4:target::before, html[dir="ltr"] #article_content h5:target::before, html[dir="ltr"] #article_content h6:target::before { left:-1.75rem; }
            html[dir="rtl"] #article_content h1:target::before, html[dir="rtl"] #article_content h2:target::before, html[dir="rtl"] #article_content h3:target::before, html[dir="rtl"] #article_content h4:target::before, html[dir="rtl"] #article_content h5:target::before, html[dir="rtl"] #article_content h6:target::before { right:-1.75rem; }
            
            html[dir="ltr"] #article_content h1:target, html[dir="ltr"] #article_content h2:target, html[dir="ltr"] #article_content h3:target, html[dir="ltr"] #article_content h4:target, html[dir="ltr"] #article_content h5:target, html[dir="ltr"] #article_content h6:target { margin-left:1.75rem; }
            html[dir="rtl"] #article_content h1:target, html[dir="rtl"] #article_content h2:target, html[dir="rtl"] #article_content h3:target, html[dir="rtl"] #article_content h4:target, html[dir="rtl"] #article_content h5:target, html[dir="rtl"] #article_content h6:target { margin-right:1.75rem; }
            
            /* blockquotes */
            
            html[dir="ltr"] #article_content blockquote { padding-left:1.75rem; }
            html[dir="ltr"] #article_content blockquote::before {
                margin-left:-0.4em;
                content:"\201C";
            }
            
            html[dir="rtl"] #article_content blockquote { padding-right:1.75rem; }
            html[dir="rtl"] #article_content blockquote::before {
                margin-right:-0.4em;
                content:"\201D";
            }
            
            /* gallery section */
            
            html[dir="ltr"] #article_content .gallery_section figure + figure { margin-left:5%; }
            html[dir="rtl"] #article_content .gallery_section figure + figure { margin-right:5%; }
            
            html[dir="ltr"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-left:0; }
            html[dir="rtl"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-right:0; }
            
            @media (max-width: 550px) {
                html[dir="ltr"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-left:5%; }
                html[dir="rtl"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-right:5%; }
                
                html[dir="ltr"] #article_content .gallery_section figure:nth-of-type(2n + 1) { margin-left:0; }
                html[dir="rtl"] #article_content .gallery_section figure:nth-of-type(2n + 1) { margin-right:0; }
            }
            
            @media (max-width: 360px) {
                html[dir="ltr"] #article_content .gallery_section figure + figure, html[dir="ltr"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-left:0; }
                html[dir="rtl"] #article_content .gallery_section figure + figure, html[dir="rtl"] #article_content .gallery_section figure:nth-of-type(3n + 1) { margin-right:0; }
            }
            
            /* article section */
            
            html[dir="ltr"] #article_content .article_section article + article { margin-left:5%; }
            html[dir="rtl"] #article_content .article_section article + article { margin-right:5%; }
            
            html[dir="ltr"] #article_content .article_section article:nth-of-type(2n + 1) { margin-left:0; }
            html[dir="rtl"] #article_content .article_section article:nth-of-type(2n + 1) { margin-right:0; }
            
            @media (max-width: 550px) {
                html[dir="ltr"] #article_content .article_section article + article, html[dir="rtl"] #article_content .article_section article + article {
                    margin-left:0;
                    margin-right:0;
                }
            }
            
            html[dir="ltr"] #article_content .article_section article header:first-child { margin-left:4.5em; }
            html[dir="rtl"] #article_content .article_section article header:first-child { margin-right:4.5em; }
            
            html[dir="ltr"] #article_content .article_section article header:first-child::before { left:-4.5em; }
            html[dir="rtl"] #article_content .article_section article header:first-child::before { right:-4.5em; }
            
            /* HEADER IMAGE */
            
            .use_header_image #header_container > * {
                color:white;
                background-color:rgba(0, 0, 0, 0.3);
            }
            
            .use_header_image #header_container > header { min-height:40vh; }
            @media (max-width: 550px) {
                .use_header_image #header_container > header { min-height:30vh; }
            }
            
            /* SIDEBAR COLORS */
            
            .dark_sidebar #main_container {
                background-color:black;
                color:white;
            }
            
            .light_sidebar #main_container {
                background-color:#dedede;
                color:#606060;
            }
            
            .accent_sidebar #table_of_contents ol li::before {
                color:inherit;
                opacity:0.7;
            }
        </style>
        <!------------------------- LIGHTBOX STYLING ------------------------->
        <style>
            #lightbox {
                display:none;
                position:fixed;
                top:0;
                left:0;
                box-sizing:border-box;
                width:100%;
                height:100%;
                padding:1%;
                text-align:center;
                color:white;
                background-color:rgba(0, 0, 0, 0.8);
            }
            
            #lightbox.lightbox_open { display:block; }
            
            #lightbox::before, #lightbox #lightbox_content {
                display:inline-block;
                vertical-align:middle;
                line-height:0;
            }
            
            #lightbox::before {
                content:"";
                height:100%;
                width:1px;
                margin-left:-1px;
            }
            
            #lightbox #lightbox_image {
                max-width:100%;
                max-height:80vh;
            }
            
            #lightbox #lightbox_content > * { line-height:1.75em; }
            
            #lightbox #lightbox_image_information { margin-top:3vh; }
            #lightbox #lightbox_caption > * { color:inherit; }
            #lightbox #lightbox_caption:empty { display:none; }
            
            .alternative_lightbox #lightbox #lightbox_image { max-height:100%; }
            
            .alternative_lightbox #lightbox #lightbox_image_information {
                position:absolute;
                bottom:5%;
                left:50%;
                width:60%;
                margin-left:-30%;
                margin-top:0;
            }
            
            .alternative_lightbox #lightbox #lightbox_caption {
                display:inline-block;
                padding:0.3em 0.8em;
                color:white;
                background-color:rgba(0, 0, 0, 0.5);
                border-radius:3px;
            }
            
            #lightbox #lightbox_menu {
                position:absolute;
                top:3vh;
                right:3vh;
                font-size:30px;
            }
            
            #lightbox button {
                background:none;
                border:none;
                font-family:inherit;
                font-size:inherit;
                color:inherit;
            }
        </style>
        <!-------------------- FALLBACK FOR NO JAVASCRIPT -------------------->
        <noscript>
            <style>
                #main_container { width:800px; }
                #double_column { padding:0 3%; }
                @media (max-width: 880px) { #main_container { width:100%; } }
                @media (max-width: 780px) { #double_column { padding:0; } }
                #double_column #sidebar_content { display:none; }
                #double_column #article_content { width:100%; }
            </style>
        </noscript>
        <!--------------------- TABLE OF CONTENTS SCRIPT --------------------->
        <script>
        function tableOfContents(options) {
            if (isNaN(options.minimumHeaderSize) || options.minimumHeaderSize < 1 || options.minimumHeaderSize > 6) { options.minimumHeaderSize = 6; }
            
            // possible headings
                var possibleHeadings = [];
                for (headingNumber = 1; headingNumber <= options.minimumHeaderSize; headingNumber++) { possibleHeadings.push("h" + headingNumber); }
            
            // list generator
            function generateList(parent) {
                var list = document.createElement("ol");
                parent.appendChild(list);
            }
            
            // list item generator
            function generateItem(isHeading, heading, list) {
                var item = document.createElement("li");
                var itemLink = document.createElement("a");
                
                if (isHeading === true) { itemTitle = heading.childNodes[0].nodeValue; } else { itemTitle = options.defaultSectionTitle; }
                
                var itemId = itemTitle.replace(" ", "_");
                if (isHeading === false) {
                    var previousUnnamedSection = document.querySelectorAll("*[id^='" + itemTitle + "_']");
                    if (previousUnnamedSection.length > 0) {
                        var unnamedSectionNumber = Number(previousUnnamedSection[previousUnnamedSection.length - 1].id.slice(previousUnnamedSection[previousUnnamedSection.length - 1].id.indexOf("_") + 1)) + 1;
                    } else { var unnamedSectionNumber = 1; }
                    itemId += "_" + unnamedSectionNumber;
                }
                
                heading.id = itemId;
                itemLink.href = "#" + heading.id;
                
                itemLink.innerHTML = itemTitle;
                item.appendChild(itemLink);
                list.appendChild(item);
            }
            
            // find where to append new item or list
            function appendFinder() {
                var appendTo = tableOfContents.querySelector("ol");
                while (appendTo.hasChildNodes()) {
                    if (appendTo.lastChild.tagName === "A") { break; }
                    appendTo = appendTo.lastChild;
                }
                return appendTo;
            }
            
            // set navigation title and first list
            var tableOfContentsTitle = document.createElement("h2");
            var tableOfContentsTitleLink = document.createElement("a");
            tableOfContentsTitleLink.href = "#main";
            var mainHeading = document.querySelector("#header_container > header > h1");
            if (mainHeading && options.useHeaderTitleAsTableTitle) { tableOfContentsTitleLink.innerHTML = mainHeading.innerHTML; } else { mainHeading = document.querySelector("#header_container > header"); tableOfContentsTitleLink.innerHTML = options.defaultTableTitle; }
            mainHeading.id = "main";
            tableOfContentsTitle.appendChild(tableOfContentsTitleLink);
            
            var tableOfContents = document.querySelector(options.tableParent);
            tableOfContents.appendChild(tableOfContentsTitle);
            generateList(tableOfContents);
            
            // section searcher
            var articleSection = document.querySelectorAll("#article_content > section");
            for (i = 0; i < articleSection.length; i++) {
                var headingCollection = articleSection[i].querySelectorAll(possibleHeadings);
                var startingHeading = 1;
                
                if (headingCollection.length === 0) {
                    generateItem(false, articleSection[i], tableOfContents.querySelector("ol"));
                } else if (headingCollection.length === 1) {
                    generateItem(true, headingCollection[0], tableOfContents.querySelector("ol"));
                } else if (headingCollection.length > 1) {
                    // check if there is a main heading
                    for (j = 1; j < headingCollection.length; j++) {
                        if (headingCollection[0].tagName === headingCollection[j].tagName) {
                            startingHeading = 0;
                            generateItem(false, articleSection[i], tableOfContents.querySelector("ol"));
                            generateList(appendFinder());
                            break;
                        }
                    }
                    if (startingHeading === 1) {
                        generateItem(true, headingCollection[0], tableOfContents.querySelector("ol"));
                        generateList(appendFinder());
                    }
                    
                    // generate inner items and lists
                    for (j = startingHeading; j < headingCollection.length; j++) {
                        if (appendFinder().tagName === "OL") {
                            generateItem(true, headingCollection[j], appendFinder());
                        } else if (appendFinder().tagName !== "OL" && headingCollection[j - 1].tagName.slice(headingCollection[j - 1].tagName.length - 1) < headingCollection[j].tagName.slice(headingCollection[j].tagName.length - 1)) {
                            generateList(appendFinder());
                            generateItem(true, headingCollection[j], appendFinder());
                        } else if (appendFinder().tagName !== "OL" && headingCollection[j - 1].tagName.slice(headingCollection[j - 1].tagName.length - 1) > headingCollection[j].tagName.slice(headingCollection[j].tagName.length - 1)) {
                            generateItem(true, headingCollection[j], appendFinder().parentNode.parentNode.parentNode);
                        } else if (headingCollection[j - 1].tagName.slice(headingCollection[j - 1].tagName.length - 1) === headingCollection[j].tagName.slice(headingCollection[j].tagName.length - 1)) {
                            generateItem(true, headingCollection[j], appendFinder().parentNode);
                        }
                    }
                }
            }
        }
        </script>
        <!-------------------------- LIGHTBOX SCRIPT -------------------------->
        <script>
        function lightboxGenerator(options) {
            // class check function
            function classCheck(testedElement, testedClass) { if (new RegExp("^" + testedClass + " ").test(testedElement.className) || new RegExp(" " + testedClass + "$").test(testedElement.className) || new RegExp(" " + testedClass + " ").test(testedElement.className) || new RegExp("^" + testedClass + "$").test(testedElement.className)) { return true; } else { return false; } }
            
            // component generator function
            function elementGenerator(elementName, elementId, elementParent) { var currentElement = document.createElement(elementName); currentElement.setAttribute("id", elementId); elementParent.appendChild(currentElement); return currentElement; }
            
            // create lightbox structure
            var lightbox = elementGenerator("div", "lightbox", document.body);
            var lightboxContent = elementGenerator("div", "lightbox_content", lightbox);
            var lightboxImage = elementGenerator("img", "lightbox_image", lightboxContent);
            lightboxImage.setAttribute("tabindex", "0");
            var lightboxImageInformation = elementGenerator("div", "lightbox_image_information", lightboxContent);
            var lightboxCaption = elementGenerator("div", "lightbox_caption", lightboxImageInformation);
            var lightboxMenu = elementGenerator("div", "lightbox_menu", lightbox);
            var previousButton = elementGenerator("button", "lightbox_previous_button", lightboxMenu); previousButton.innerHTML = options.previousButtonContent;
            var nextButton = elementGenerator("button", "lightbox_next_button", lightboxMenu); nextButton.innerHTML = options.nextButtonContent;
            var lightboxCloseButton = elementGenerator("button", "lightbox_close_button", lightboxMenu); lightboxCloseButton.innerHTML = options.closeButtonContent;
            
            // lightbox update function
            var index;
            var initialIndex;
            
            function lightboxUpdater() {
                if (event.type === "click" || (event.type === "keypress" && (event.key === "Enter" || event.which === 13)) || (event.type === "keyup" && classCheck(lightbox, options.lightboxOpenClass) && ((event.key === "ArrowLeft" || event.which === 37) || (event.key === "ArrowRight" || event.which === 39)))) {
                    if(!classCheck(lightbox, options.lightboxOpenClass)) { lightbox.className += " " + options.lightboxOpenClass; }
                    
                    // define current index
                    if (selectableImages.indexOf(this) >= 0) { index = selectableImages.indexOf(this); initialIndex = selectableImages.indexOf(this); } else if (this === previousButton || (event.key === "ArrowLeft" || event.which === 37)) { index -= 1; } else if (this === nextButton || (event.key === "ArrowRight" || event.which === 39)) { index += 1; }
                    
                    // fix weird indexes
                    if (index === -1) { index = selectableImages.length - 1; } else if (index === selectableImages.length) { index = 0; }
                    
                    // lightbox content update
                    lightboxImage.focus();
                    lightboxImage.src = selectableImages[index].getAttribute("src");
                    if (selectableImages[index].hasAttribute("alt")) { lightboxImage.setAttribute("alt", selectableImages[index].getAttribute("alt")); } else { lightboxImage.setAttribute("alt", ""); }
                    if (selectableImages[index].parentNode.querySelector("figcaption")) { lightboxCaption.innerHTML = selectableImages[index].parentNode.querySelector("figcaption").innerHTML; } else { lightboxCaption.innerHTML = ""; }
                    
                    // event assignment to next/previous buttons
                    previousButton.removeEventListener("click", lightboxUpdater); previousButton.addEventListener("click", lightboxUpdater);
                    nextButton.removeEventListener("click", lightboxUpdater); nextButton.addEventListener("click", lightboxUpdater);
                    document.removeEventListener("keyup", lightboxUpdater); document.addEventListener("keyup", lightboxUpdater);
                }
            }
            
            // close function
            function closeLightbox() {
                if ((event.type === "click" && (this !== lightbox || (event.target === lightbox && event.target === this))) || (event.type === "keyup" && (event.key === "Escape" || event.which === 27))) { lightbox.className = ""; selectableImages[initialIndex].focus(); } }
            lightbox.addEventListener("click", closeLightbox);
            lightboxCloseButton.addEventListener("click", closeLightbox);
            document.addEventListener("keyup", closeLightbox);
            
            // add images to lightbox array as well as selectability
            var figures = document.querySelectorAll(options.imageSelector);
            var selectableImages = [];
            for (i = 0; i < figures.length; i++) { selectableImages.push(figures[i]); }
            for (i = 0; i < selectableImages.length; i++) {
                if (!classCheck(selectableImages[i], options.lightboxImagesClass)) {
                    selectableImages[i].className += " " + options.lightboxImagesClass;
                    selectableImages[i].setAttribute("tabindex", "0");
                    selectableImages[i].addEventListener("click", lightboxUpdater); selectableImages[i].addEventListener("keypress", lightboxUpdater);
                }
            }
        }
        </script>
    </head>
    <body>
        <article id="main_container">
            <div id="header_container">
                <header>
<!----------------------------- HEADER SECTION ----------------------------->
                    <h1>Music For The Masses</h1>
                    <h2>A compreheensive album review</h2>
<!--------------------------- END HEADER SECTION --------------------------->
                </header>
            </div>
            <div id="double_column">
                <div id="sidebar_content">
                    <button id="button_of_contents" onclick="this.className === '' ? this.className = 'open_contents' : this.className = ''"><i class="material-icons" aria-hidden="true">&#xe5d2</i><span class="screen_reader_sentences">{lang:Navigate}</span><span class="screen_reader_sentences">{lang:Close}</span></button>
                    <nav id="table_of_contents"></nav>
                </div><div id="article_content">
<!---------------------------- MAIN TEXT SECTION ---------------------------->
                    <section>
                    <h2>Introduction</h2>
                        <blockquote>I prefer you behind the wheel, and me the passenger...</blockquote>
                        <p>This is supposed to be a review on the groundbreaking  Depeche Mode album of 1987. The point of picking this subject is giving me a reason to endlessly talk about Depeche Mode without being criticized for it not being code-related.</p>
                        <p>It also feels a little more natural than just using Lorem Ipsum(sorry, you're still awesome).</p>
                    </section>
                    <section>
                        <h2>Album Visuals</h2>
                        <h3>Cover Art</h3>
                        <figure class="right_float"><img src="https://upload.wikimedia.org/wikipedia/pt/thumb/3/3e/Music_for_the_Masses.jpg/220px-Music_for_the_Masses.jpg"><figcaption>Album art, as taken from <a href="https://wikipedia.org">Wikipedia</a>.</figcaption></figure>
                        <p>Music For The Masses has a cover art featuring many elements while leaving great space among them, leaving a balanced feeling. The background is textured and cream/light yellow, with a margin before reaching the cover's main elements: a band logo, its title, the band's name, and a wide image; none of them perfectly vertically centered over the canvas.</p>
                        <aside class="left_float">The symbol in the center of the image is showcased in the era's videos, sometimes even keeping its red color while the rest of the video is in black and white.</aside>
                        <p>The typography choice mixes different styles, the text is centered, and the album plus the band title are justified, matching nicely with the format of the wide image that follows. The band logo is composed of the band's initials, matching the band's name font but with a ligther color, giving attention to the red symbol glued over it.</p>
                        <p>The red symbol not only is a nod to the contents of the wide image, but also matches its colors. The mix of the primary colors(the light yellow, the powerful blue that is spread over the image, and the bright red in its center points) create a wonderful balance.</p>
                        <h3>Videography</h3>
                        <p>I died watching the videos for this era. This is a ghost speaking</p>
                    </section>
                    <section>
                        <h2>Track Listing</h2>
                        <h3>Standard Edition</h3>
                        <ol>
                            <li>Never Let Me Down Again</li>
                            <li>The Things You Said</li>
                            <li>Strangelove</li>
                            <li>Sacred</li>
                            <li>Little 15</li>
                            <li>Behind The Wheel</li>
                            <li>I Want You Now</li>
                            <li>To Have and to Hold</li>
                            <li>Nothing</li>
                            <li>Pimpf</li>
                        </ol>
                        <h3>Deluxe Edition</h3>
                        <p>Including bonus tracks that would only appear on a re-release instead of the original deluxe version.</p>
                        <ol>
                            <li>Agent Orange</li>
                            <li>Never Let Me Down Again(Aggro Mix)</li>
                            <li>To Have and to Hold(Spanish Taser)</li>
                            <li>Pleasure, Little Treasure(Glitter Mix)</li>
                            <li>Pleasure, Little Treasure</li>
                            <li>Route 66</li>
                            <li>Stjarna</li>
                            <li>Sonata No.14 in C#m (Moonlight Sonata)</li>
                        </ol>
                    </section>
                    <section>
                        <h2>Actual Review</h2>
                        <h3>Lyrics</h3>
                        <p>Ever since Martin Gore became the main songwriter for the band and developed from his first album as such, certain themes can be expected in each song. It doesn't mean it gets repetitive, though: even if you feel like a certain word has been used for the hundreth time, it still manages to show up fresh with interesting timing, even when keeping the typical song structure known to pop.</p>
                        <p>In fact, structure wise, you may find a surprise in the mix of "Strangelove"; it starts pretty strong with its chorus on the popular single mix, but the album version shows a verse coming up before which may look a little out of place, even if it feels like the common sequence you'd expect.</p>
                        <p>A few songs feel up to interpretation or, even if it would seem like their subject is obvious, it's like they're begging to be given your own interpretation. Take anything you'd like from "Nothing": with its short but stretched out verses, the world is your imagination.</p>
                        <h3>Instrumental</h3>
                        <p>Most Depeche songs manage to keep this dark aura around it even when it feels bubbly(as you can definitely hear through "See You", in the "A Broken Frame" record) lyric-wise, and the same can be said reversing the roles. This album is no outlier, but it does manage to be dark while hitting hard; instead of being calm and broody, songs like the album version(yes, there is a different mix for the video!) of "Behind The Wheel" slap hard enough to get you pumped up.</p>
                        <p>But if you do look for something less pop-ish, this album does not dissapoint: instrumental tracks come in a good amount with the deluxe edition to get you thinking and a little sorrowful too, like the beautiful "Stjarna". Depeche Mode doesn't take instrumental tracks lightly: they tend to be as long as any other song, not a short interlude. If it were an interlude, it would simply be concatenated to the closest track, as seen in "Pimpf": its last moments contain a "hidden track".</p>
                        <p>Considering Depeche Mode's status as a synth-pop band, it feels appropriate to use terms like "pop-ish" to describe some tracks; however, this still has experimental aspects to it and, in fact, its title and cover are a joke: megaphones in the middle of nowhere, set to songs that aren't quite commercial as music we'd typically consider "pop". Where the beats show, not everyone might feel like dancing(though I would).</p>
                    </section>
                    <section class="article_section tall_portrait">
                        <h2>Band Members</h2>
                        <article>
                            <img src="https://freight.cargocollective.com/t/original/i/e0033044b7da60fd12386cd5ca0f7822876ac8761e21e5445e69c3c0119253b0/Dave-Gahan.jpg">
                            <header>
                                <b>Dave Gahan</b><br>Main singer
                            </header>
                            <nav><a href="/">Biography</a><a href="/">General tag</a><a href="/">Visual tag</a><a href="/">Miscellaneous</a></nav>
                        </article>
                        <article>
                            <img src="https://assets.mubi.com/images/cast_member/29340/image-original.jpg?1492786093">
                            <header>
                                <b>Martin Gore</b><br>Singer and songwriter
                            </header>
                            <nav><a href="/">Biography</a><a href="/">General tag</a><a href="/">Visual tag</a><a href="/">Miscellaneous</a></nav>
                        </article>
                        <article>
                            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKxRnqWDA0rS2dTc5hjEc7ohskmHZ4dc2neQFftCZ79latgtPq">
                            <header>
                                <b>Alan Wilder</b><br>Beeps and boops
                            </header>
                            <nav><a href="/">Biography</a><a href="/">General tag</a><a href="/">Visual tag</a><a href="/">Miscellaneous</a></nav>
                        </article>
                        <article>
                            <img src="https://i.pinimg.com/236x/4d/6a/6c/4d6a6cbb93053f9ca790cf100776de4e--depeche-mode-style-icons.jpg">
                            <header>
                                <b>Andy Fletcher</b><br>Keyboard player and actual angel
                            </header>
                            <nav><a href="/">Biography</a><a href="/">General tag</a><a href="/">Visual tag</a><a href="/">Miscellaneous</a></nav>
                        </article>
                    </section>
                    <section class="gallery_section">
                        <h2>Gallery</h2>
                        <p>The megaphone symbol is present amongst the entire era; ironically, the cover for Never Let Me Down Again is more similar to the original album art, but feels like an outlier when compared to other covers.</p>
                        <section>
                            <figure>
                                <img src="https://static.cloud-boxloja.com/lojas/yrfv6/produtos/71c0ff55-237e-44e5-8a11-e544630cd194.jpg" alt="A red megaphone against a black background with BONG 13 written in it in black.">
                                <figcaption>
                                    Vinyl cover for the Strangelove single.
                                </figcaption>
                            </figure>
                            <figure>
                                <img src="https://images.eil.com/large_image/DEPECHE_MODE_NEVER%2BLET%2BME%2BDOWN%2BAGAIN-66897.jpg" alt="Map background with a recreation of the album cover to the middle, with the same typography and center image but differently cropped and colored.">
                                <figcaption>
                                    Cover for the Never Let Me Down Again single.
                                </figcaption>
                            </figure>
                            <figure>
                                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/67/DepecheModeBehindTheWheel.jpg/220px-DepecheModeBehindTheWheel.jpg" alt="Tilted red square with silhouette of aforementioned red megaphone, while surrounding text is also tilted.">
                                <figcaption>
                                    Cover for the Behind The Wheel single
                                </figcaption>
                            </figure>
                            <figure>
                                <img src="https://img.discogs.com/f0bPaNDwDMrpE9RtsIeZtJJNgeo=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-58506-1241284115.jpeg.jpg" alt="Black background with two white papers over it; one has a black megaphone and the other has Little 15 written in it(little is written inside the 1)">
                                <figcaption>
                                    Vinyl cover for the Little 15 single.
                                </figcaption>
                            </figure>
                        </section>
                    </section>
<!-------------------------- END MAIN TEXT SECTION -------------------------->
                </div>
            </div>
            <footer>
                <nav>
                    <a href="{BlogURL}">{lang:Back}({Name})</a>{block:AskEnabled}<a href="{BlogURL}ask">{lang:Mail}</a>{/block:AskEnabled}{block:English}By{/block:English}{block:German}Von{/block:German}{block:French}Par{/block:French}{block:Italian}Da{/block:Italian}{block:Japanese}から{/block:Japanese}{block:Turkish}tarafından{/block:Turkish}{block:Spanish}Por{/block:Spanish}{block:Russian}от{/block:Russian}{block:Polish}Przez{/block:Polish}{block:PortuguesePT}Por{/block:PortuguesePT}{block:PortugueseBR}Por{/block:PortugueseBR}{block:Dutch}Door{/block:Dutch}{block:Korean}만든 이{/block:Korean}{block:ChineseSimplified}由{/block:ChineseSimplified}{block:ChineseTraditional}由{/block:ChineseTraditional}{block:ChineseHK}由{/block:ChineseHK}{block:Indonesian}Oleh{/block:Indonesian}{block:Hindi}द्वारा{/block:Hindi} <a href="https://codematurgy.tumblr.com">Codematurgy</a>
                </nav>
            </footer>
        </article>
        
        <!------------------------- PAGE SCRIPTS CALL ------------------------->
        <script>
        tableOfContents({
            tableParent: "nav#table_of_contents",
            minimumHeaderSize: 4,
            useHeaderTitleAsTableTitle: false,
            defaultTableTitle: "Content",
            defaultSectionTitle: "Section"
        });
        
        lightboxGenerator({
            imageSelector: "#article_content figure img",
            lightboxId: "lightbox",
            lightboxOpenClass: "lightbox_open",
            lightboxImagesClass: "selectable_lightbox_image",
            previousButtonContent: "<i class='material-icons' aria-hidden='true'>&#xe408</i><span class='screen_reader_sentences'>{lang:Previous}</span>",
            nextButtonContent: "<i class='material-icons' aria-hidden='true'>&#xe409</i><span class='screen_reader_sentences'>{lang:Next}</span>",
            closeButtonContent: "<i class='material-icons' aria-hidden='true'>&#xe5cd</i><span class='screen_reader_sentences'>{lang:Close}</span>"
        });
        
        // generic function for closing mobile menu when selecting a link.
            function closeMenu() { if(document.getElementById("button_of_contents").className === "open_contents") { document.getElementById("button_of_contents").className = ""; } }
        for (i = 0; i < document.querySelectorAll("#table_of_contents a").length; i++) { document.querySelectorAll("#table_of_contents a")[i].addEventListener("click", closeMenu); }
        </script>
    </body>
</html>