/* Global Reset and Box Sizing */
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 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0.5em;
    background-color: black;
    font-size: 1.2em; /* Restored original desktop size */
    line-height: 1.5;
    font-family: Verdana, Georgia, sans-serif;
}

/* Paragraph Styling */
p {
    line-height: 1.5;
    word-spacing: 2px;
}

/* Header Styling */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4em 0;
    width: 100%;
    color: Coral;
    background-color: #213e69;
    margin-bottom: 3rem;
}

/* Heading Styles */
h1 {
    padding-left: 0.5em;
    font-size: 2em; /* Original size */
    font-weight: 400;
}

h2 {
    font-size: 1.5em; /* Original size */
    color: #F1C232;
    text-align: center;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
}

/* Blog Container */
.blog-container {
    list-style-type: none;
    padding: 2em;
    max-width: 100em;
    border-radius: 0.25em;
    background-color: black;
    width: 90%;
}

/* Blog Item */
.blog-item {
    display: flex;
    padding: 1em 0.5em;
}

/* Blog Image */
.blog-image {
    flex-shrink: 0;
}

.blog-image img {
    border-radius: 10px;
    height: 150px; /* Original size */
    width: 150px; /* Original size */
}

/* Blog Entry */
.blog-entry {
    flex-grow: 1;
    padding-left: 1em;
}

.blog-entry h4 {
    color: LightSkyBlue;
    font-size: 1.5em; /* Original size */
}

.blog-entry p {
    color: LightCyan;
}

/* General Text Styling */
div {
    font-family: Verdana, Georgia, sans-serif;
    color: ghostwhite;
    text-align: justify;
    margin-bottom: 0.5em;
}

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

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

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

/* Pull Quote Styling */
.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; /* Original size */
    font-style: italic;
    color: ghostwhite;
}

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

/* List Items */
li {
    display: inline-block;
    padding-right: 1em;
    color: ghostwhite;
}

li:first-child {
    padding-left: 1em;
}

/* Responsive Typography */

/* Tablets */
@media (max-width: 768px) {
    body {
        font-size: 1em; /* Slightly smaller */
    }
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.3em;
    }
    .blog-image img {
        height: 120px;
        width: 120px;
    }
    .pullquote {
        width: 70%;
        font-size: 1.2em;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    body {
        font-size: 0.8em; /* 30% smaller */
    }
    h1 {
        font-size: 1.4em; /* 30% smaller */
    }
    h2 {
        font-size: 1.1em; /* 30% smaller */
    }
    .blog-image img {
        height: 100px; /* 30% smaller */
        width: 100px; /* 30% smaller */
    }
    .pullquote {
        width: 90%;
        font-size: 1em; /* 30% smaller */
    }
    .first-paragraph::first-letter {
        font-size: 3.5em; /* 30% smaller */
    }
}