/* ==========================================================================
Nua.CSS Website Styling

nua-css.pages.dev
========================================================================== */

body {
background: #ffffff;
color: #1f2937;
}

/* Layout container */
.container {
width: min(1100px, 92%);
margin: 0 auto;
}

/* Header */
header {
padding: 3rem 0 2rem;
text-align: center;
}

.logo-img {
width: 220px;
margin: 0 auto 1rem;
}

.header-content h1 {
margin-bottom: 0.5rem;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
}

.header-content p {
max-width: 700px;
margin: 0 auto;
font-size: 1.125rem;
color: #4b5563;
}

/* Sections */
section {
margin: 3rem 0;
}

h2,
h3 {
margin-bottom: 1rem;
color: #111827;
}

p {
margin-bottom: 1rem;
}

/* Decorative separator */
.center-decorative {
text-align: center;
font-size: 1.6rem;
margin: 2rem 0;
color: #64748b;
}

/* Images */
.center-image {
display: flex;
justify-content: center;
}

.responsive-image {
border-radius: 12px;
}

/* Links */
a {
color: #005fcc;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* Horizontal line */
hr {
margin: 2rem 0;
}

/* Footer */
footer {
margin-top: 4rem;
padding: 2rem 0;
border-top: 1px solid #e5e7eb;
text-align: center;
background: #fafafa;
}

footer p {
margin: 0;
font-size: 0.95rem;
color: #6b7280;
}

/* Mobile first improvements */
@media (max-width: 768px) {
header {
padding-top: 2rem;
}

section {
margin: 2rem 0;
}

.logo-img {
width: 170px;
}

.header-content p {
font-size: 1rem;
}
}

/* Larger desktop screens */
@media (min-width: 1200px) {
body {
font-size: 1.05rem;
}
}
/* EOF */