/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --color-primary: #0d6efd;
  --color-bg: #006D6B;
  --color-text: #212529;
  --bg-green: #006D6B;
  --bg-green-light: #2D7877;
  --bg-yellow: #FCE052;
  --nav-height: 64px;
}

/* ============================================================
   Base
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding-top: var(--nav-height);
  background: repeating-linear-gradient(45deg,
      var(--bg-green) 0px,
      var(--bg-green) 80px,
      var(--bg-green-light) 80px,
      var(--bg-green-light) 160px);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  background-color: var(--bg-yellow);
}

.navbar .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--bg-green);
}

.navbar-toggler {
  border: none;
  box-shadow: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23006D6B' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (min-width: 1920px) {
  :root {
    --nav-height: 80px;
  }

  body {
    background: repeating-linear-gradient(
      45deg,
      var(--bg-green) 0px,
      var(--bg-green) 120px,
      var(--bg-green-light) 120px,
      var(--bg-green-light) 240px
    );
  }

  .container {
    max-width: 1600px;
  }
}