/* Main styles for computer screens */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f1f3f5;
    color: #222;
}

header {
    background-color: #24486b;
    color: white;
    text-align: center;
    padding: 25px;
}

header h1 { margin: 0; }

nav {
    background-color: #17324c;
    text-align: center;
    padding: 14px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 18px;
}

main {
    max-width: 950px;
    margin: 25px auto;
    padding: 0 20px;
}

.welcome, .story {
    background-color: white;
    border: 1px solid #ddd;
    padding: 18px;
    margin-bottom: 20px;
    overflow: auto;
}

.welcome img, .story img {
    float: left;
    width: 250px;
    height: 160px;
    object-fit: cover;
    margin-right: 20px;
}

h2 { color: #24486b; margin-top: 0; }
p { line-height: 1.5; }

footer {
    background-color: #24486b;
    color: white;
    text-align: center;
    padding: 12px;
}

/* Tablet screens */
@media screen and (min-width: 400px) and (max-width: 800px) {
    main { margin: 15px auto; padding: 0 12px; }
    .welcome, .story { padding: 12px; }
    .welcome img, .story img {
        width: 40%;
        height: 145px;
        margin-right: 14px;
    }
    nav a { margin: 0 10px; }
    h2 { font-size: 21px; }
}

/* Small phone screens */
@media screen and (max-width: 399px) {
    header { padding: 14px 8px; }
    header h1 { font-size: 24px; }
    nav { padding: 10px 4px; }
    nav a { margin: 0 5px; font-size: 12px; }
    main { margin: 10px auto; padding: 0 6px; }
    .welcome, .story { padding: 10px; margin-bottom: 10px; }
    .welcome img, .story img { display: none; }
    h2 { font-size: 18px; }
    p { font-size: 14px; }
    footer { padding: 8px; }
}