/* ---- Base Layout ---- */

body {
    background-image: url("images/html-greyscale-background.jpg");
    background-size: cover;
    text-align: center;
    background-position: center;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
}


/* ---- Mobile Responsive ---- */

@media (max-width: 700px) {
    .site-header h1 {
        font-size: 2.2rem;
    }

    .nav-links a {
        display: block;
        margin: 10px 0;
        font-size: 1.3rem;
    }

    .content-box {
        max-width: 92%;
        padding: 20px;
    }
}

@media (max-width: 450px) {
    .site-header h1 {
        font-size: 1.8rem;
    }

    .nav-links a {
        font-size: 1.1rem;
    }
}