/* Global Reset */
html, body, abbr, article, aside, audio, blockquote, button,
canvas, code, div, dl, dt, embed, fieldset, figcaption,
figure, footer, form, h1, h2, h3, h4, h5, h6, header, iframe,
img, input, label, legend, li, nav, object, ol, option, p,
pre, q, section, select, table, tbody, td, tfoot, th, thead,
tr, ul, video {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    width: 96%;
    background-color: black;
    margin: 1.5em auto;
    font-size: 1.2em;
    overflow-x: hidden;
    font-family: Verdana, Georgia, sans-serif;
}

/* Headings */
h1 {
    font-size: 2em;
    color: DeepSkyBlue;
    text-align: center;
    margin-bottom: 0.2em;
}

h2 {
    font-size: 1.5em;
    color: DeepSkyBlue;
    text-align: center;
    margin: 0.7em 0 0.5em;
}

/* General Div Styling */
div {
    max-width: 96%;
    font-family: Verdana, Georgia, sans-serif;
    color: GhostWhite;
    text-align: justify;
    margin-bottom: 0.5em;
}

/* Links */
a {
    color: HotPink;
}

a:hover {
    color: Red;
    background-color: transparent;
    text-decoration: underline;
}

/* Alignment Utilities */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.left {
    display: block;
    margin-left: 3em;
    margin-right: auto;
}

/* First Paragraph Styling */
.first-paragraph::first-letter {
    float: left;
    padding: 0.1em;
    color: GhostWhite;
    font-size: 5em;
    line-height: 0.6em;
}

/* Pull Quote */
.pullquote {
    float: right;
    width: 50%;
    margin: 1.25em 0.1em 0.25em;
    padding-top: 0.5em;
    border-top: 1px solid White;
    border-bottom: 1px solid White;
    font-size: 1.5em;
    font-style: italic;
    color: GhostWhite;
}

.pullquote::before {
    content: "\0201c";
    float: left;
    padding: 0.1em 0.2em 0.4em 0;
    font-size: 5em;
    line-height: 0.45em;
}

/* First List Item Styling */
li:first-child {
    padding-left: 1em;
}

/* Literary Blockquote */
.literary-quote {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #f8f8ff;
    border-left: 4px solid #4682b4;
    margin: 1.5em 2em;
    padding: 0.5em 1.5em;
    background: rgba(70, 130, 180, 0.1);
}

.literary-quote p {
    margin: 0.2em 0;
}

.literary-quote footer {
    text-align: right;
    font-size: 0.9em;
    margin-top: 0.5em;
    color: #87cefa;
}

.literary-quote footer cite {
    font-style: normal;
}

/* Responsive Design */

/* Tablets */
@media (max-width: 768px) {
    body {
        margin: 1em;
        font-size: 1em;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.3em;
    }

    .pullquote {
        width: 70%;
        font-size: 1.2em;
    }

    .literary-quote {
        margin: 1em;
        padding: 0.5em;
    }

    .first-paragraph::first-letter {
        font-size: 4em;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    body {
        margin: 0.5em;
        font-size: 0.9em;
    }

    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
    }

    div {
        text-align: left;
    }

    .pullquote {
        float: none;
        width: 100%;
        margin: 1em 0;
        font-size: 1em;
        text-align: center;
    }

    .literary-quote {
        margin: 0.5em;
        padding: 0.3em;
    }

    .first-paragraph::first-letter {
        font-size: 3em;
    }
}