/* Base Styles */
body {
    background-color: #fcfcfc; /* off-white */
    color: #333; /* Dark grey text for readability */
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Modern, readable across Windows, macOS, iOS, and Android */
    line-height: 1.6;
    padding: 1.3vw;
    margin: 0;
}

a {
    color: #007bff; /* Bootstrap's default blue for links */
    text-decoration: none; /* No underline */
}

a:hover {
    text-decoration: underline; /* Underline on hover for better user interaction */
}

/* Ensure that images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin-top: 0.2rem;
    font-family: 'Arial', sans-serif; /* Slightly different font for headings */
}

h1 {
    font-size: 2rem; /* Larger font size for main titles */
}

p {
    margin-bottom: 0.2rem;
}

/* Large Desktops (1920px and Above) */
@media (min-width: 1920px) {
    body { padding: 1.5vw; } /* Slightly increase padding for more spacing */

    h1 { font-size: 2.2rem; } /* Increase font size slightly */
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.6rem; }
    p { font-size: 1rem; } /* Increase paragraph readability */
}

@media (max-width: 1280px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    p { font-size: 0.9rem; }
}

@media (max-width: 1024px) {
    body { padding: 2vw; } /* Moved inside the grouped media query */
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    p { font-size: 0.85rem; }
}