body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: #7fb07a;
color: #1f3d2b;
margin: 0;
padding: 0;
position: relative;
}


body::before {

  content: "";

  position: fixed;

  inset: 0;

  background-image: url("SFZBackground3.jpg");

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  opacity: 0.15;

  pointer-events: none;

  z-index: 0;

}








.container {
max-width: 850px;
margin: 0 auto;
padding: 24px;
}

.topbar {
background: #12141a;
padding: 15px 0;
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
}






.links a {
color: #b9bcc6;
text-decoration: none;
margin-left: 15px;
}

.links a:hover {
color: #ffffff;
}

.hero {
padding: 12px 0;
}

.card {
background: #fdfbd4;
color: #1f3d2b;
padding: 12px;
border-radius: 12px;
margin-bottom: 12px;
}


.cat-card {padding: 20px;}

h1 {
font-size: 36px;
margin-bottom: 15px;
}

.btn {
display: inline-block;
padding: 10px 15px;
background: #e6c36a;
color: #000;
text-decoration: none;
border-radius: 6px;
margin-right: 10px;
}

.btn:hover {
opacity: 0.9;
}

sup {
font-size: 0.5rem;
}



.main-nav a {
text-decoration: none;
color: inherit;
}

.main-nav a:hover {
text-decoration: underline;
}


.ml-embedded {
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}

/* DESKTOP */
.main-nav{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
padding: 12px 0;
}

.main-nav a{
text-decoration: none;
}

.main-nav a.active { text-decoration: underline; }

/* MOBILE */
@media (max-width: 700px){
.main-nav{
display: block;
text-align: center;
}

.main-nav a{
display: block;
padding: 10px 0;
}
}



.footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #2a2f3a;
color: #888;
font-size: 14px;
}