/* Add a default font for the whole page */
body {
    font-family: 'Droid Serif', 'Palatino', 'Times New Roman', serif;
    background-color: #dfe7d9; /* pale green */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Make the images responsive */
img {
    max-width: 100%;
    height: auto;
}

blockquote {
    font-style: italic;
}

.copyright {
    font-size: 0.7rem;
}

/* Add a "hero" image */
.hero {
    background-image: url('/images/HeaderImage-KIN014.jpeg');
    background-size: cover;
    height: 300px;
    margin-bottom: 20px;
}

/* Add responsive design for different screen sizes */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
        margin: 16px; /* roughly equivalent to 0.25" */
    }
    .hero {
        background-image: url('/images/HeaderImage-KIN014.jpeg');
        background-size: cover;
        height: 200px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 16px;
        margin: 32px; /* roughly equivalent to 0.5" */
    }
    .hero {
        background-image: url('/images/HeaderImage-KIN014.jpeg');
        background-size: cover;
        height: 250px;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1025px) {
    body {
        font-size: 18px;
        margin: 96px; /* roughly equivalent to 1" */
    }
    .hero {
        background-image: url('/images/HeaderImage-KIN014.jpeg');
        background-size: cover;
        height: 300px;
        margin-bottom: 20px;
    }
}