.CenterContent {
  background-color: #fdf9e9;
  border: 3px solid #3a7336;
  padding: 10px 15px 10px 15px;
  box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.4);
  margin-bottom: 50px;
  border-radius: 20pt;
  margin-top: 20px;
  transition: transform 0.3s ease;
  will-change: transform;
  position: relative;
}
.CenterContent > h1 {
  font-size: 21pt;
  font-weight: 600;
  color: darkgreen;
}
hr {
  border-color: darkgreen;
}
.navbar a {
  margin: auto;
}
.logo {
  margin-top: 10px;
  margin-bottom: 10px;
  max-height: 80px;
}
.main {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
body {
  min-height: 100vh;
  font-family: "Times New Roman", serif;
}
/* Footer */
.footer {
  padding: 10px 0;
  background: #333a19;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Times New Roman", serif;
}
.footer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.footer-links {
    margin-bottom: 10px;
    text-align: center;
    color:white;
}
.footer-links > a, .footer-links > a:hover {
    color: #ddd;
    text-decoration: none;
    margin: 0 5px;
}
.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-social img {
    width: 32px;
    height: 32px;
    margin: 0 5px;
    border-radius: 50%;
}
:root { --drawer-width: 255px; } /* keep in sync with JS DRAWER_WIDTH */
/* XS <576px */
@media (max-width: 575.98px) {
  .CenterContent { border: 3px solid #abc987; margin-top: 2%; }
  #CenterTwo { margin-top: -5%; }
}

/* SM 576–767 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .CenterContent { border: 3px solid #d7cf94; margin-top: 2%; }
  #CenterTwo { margin-top: -5%; }
}

/* MD 768–991 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .CenterContent { border: 3px solid #a99570; margin-top: 2%; }
  #CenterTwo { margin-top: -5%; }
}

/* LG 992–1199 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .CenterContent { border: 3px solid green; margin-top: 5%; }
  body.sidenav-open .CenterContent { transform: translateX(var(--drawer-width)); }
}

/* XL 1200–1399 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .CenterContent { border: 3px solid gray; margin-top: 5%; }
  body.sidenav-open .CenterContent { transform: translateX(var(--drawer-width)); }
}

/* XXL ≥1400 */
@media (min-width: 1400px) {
  .CenterContent { border: 3px solid white; margin-top: 5%; }
  body.sidenav-open .CenterContent { transform: translateX(var(--drawer-width)); }
}
/* avoid horizontal scroll when sliding */
.main { overflow-x: clip; }

/* === Theme tokens (keep/edit as needed) === */
:root{
  --rr-yellow: #ecd5a8;
  --rr-green:  #939f7a;
  --rr-modal:  #c0ded0;
}
.CenterContent::-webkit-scrollbar {
  width: 10px;
}

.CenterContent::-webkit-scrollbar-thumb {
  background-color: #8caf99;
  border-radius: 10px;
  border: 2px solid #fdf9e9;
}

.CenterContent::-webkit-scrollbar-track {
  background-color: #fdf9e9;
  border-radius: 10px;
}
/* === General helpers === */
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; white-space: nowrap; }