*, *::before, *::after { box-sizing: border-box; }

/* base.css - Global styles and basic elements */

body {
  background: #111;
  margin: 0;
  font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
    height: 36px;
    min-width: 36px;
    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
    border: none;
    border-radius: 6px;
    background: #2ecc71;
    color: black;
    font-weight: normal;
    font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: 0 20px;
    margin: 0 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

button:hover,
button:focus {
    background: #28b765;
    transform: translateY(-1px);
    outline: none;
}

#menuBtn {
    font-size: 22px;
    padding: 4px 12px;
    height: 36px;
    background: #2ecc71;
    color: black;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

#menuBtn:hover {
    background: #28b765;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
  /* Global mobile safety guards (site-wide) */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
  }
  p, h1, h2, h3, h4, h5, h6, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Generic containers should respect screen width on mobile */
  .main-content,
  .homepage-container,
  .hero-section,
  .about-section {
    max-width: 100%;
    box-sizing: border-box;
  }
}