/* Some basic sheet for the page to look nice */

:root{
    --bg: #f5f7f9;
    --card: #ffffff;
    --primary: #1a41c2;
    --muted: #6b7280;
    --text: #0f172a;
}

/* Layout */
body{
    margin:0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

h1{ color:var(--primary); font-size:2.25rem; margin-top:0 }
h2{ color: #111827 }

p{ line-height:1.7; color: #111827 }

a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }

.mx-auto{margin-left:auto;margin-right:auto}

.navbar{background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.navbar-brand{color:var(--primary);font-weight:700}
.nav-link{color:var(--muted);padding:.25rem .5rem}
.nav-link:hover{color:var(--text)}

/* Cards */
.card{background:var(--card);border:1px solid rgba(15,23,42,0.04);border-radius:.75rem;padding:1.25rem}
.card + .card{margin-top:1rem}

.lead{font-size:1.125rem;color:var(--muted)}

/* Buttons */
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#0b7f72}

/* Footer */
.footer{font-size:.95rem;color:var(--muted);padding:1.25rem 0}

/* Responsive tweaks */
@media (max-width:575.98px){h1{font-size:1.5rem}.card{padding:1rem}}