:root {
      --bg2: #272838;
      --accent1: #A0EEC0;
      --accent3: #FF8360;
      --text-light: #F2DFAF;
      --size: 150px;
    }

    .btn-primary{
      color: white;
      border-color: var(--accent1);
      background-color: var(--accent3);
    }

    .title {
      font-size: 48px;
    }

    h1, h2 {
      color: var(--accent1);
      letter-spacing: 1px;
      font-size: 36px;
    }

    p {
      font-size: 20px;
    }

    .container {
      max-width: 1024px;
      margin: 0 auto;
      padding: 80px 20px;
    }

    header {
      margin-bottom: 40px;
    }

    html, body {
      height: 108%;
      margin: 0;
      background-color: var(--bg2);
      font-family: "Host Grotesk", sans-serif;
      color: var(--text-light);
      background-image:
        radial-gradient(
          circle at center,
          transparent 0%,
          rgba(39, 40, 56, 0.25) 35%,
          rgba(39, 40, 56, 0.75) 65%,
          #272838 100%
        ),
        repeating-linear-gradient(0deg, rgba(160,238,192,0.08) 0, rgba(160,238,192,0.12) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(160,238,192,0.08) 0, rgba(160,238,192,0.12) 1px, transparent 1px, transparent 40px);

      background-attachment: local;
    }

    /* Section styling comes AFTER */
    section {
      min-width: 440px;
      position: relative;
      margin: 100px 0;
      border: 1px solid rgba(160, 238, 192, 0.2);
      border-radius: 16px;
      padding: 40px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(39, 40, 56, 0.675);
      opacity: 67%;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px); /* Safari */
      z-index: 0;
    }

    section * {
      position: relative;
      z-index: 1;
    }


    img {
        width: 400px;      /* adjust size as needed */
        opacity: 1;      /* 0 = invisible, 1 = fully opaque */
        transition: opacity 0.3s; /* smooth fade on hover */
    }

     .img-container {
        text-align: center;
        margin: 48px;
      }

    .macaroon-float {
      position: fixed;
      top: 30px;
      right: 40px;
      width: var(--size);
      height: var(--size);
      pointer-events: none;
      z-index: 1000;
      transform-origin: center;
      will-change: transform;
    }

    svg {
      width: 100%;
      height: 100%;
      stroke: var(--accent1);
      fill: none;
      stroke-width: 1.5;
    }

    .wire { opacity: 0.95; stroke: var(--accent1); }
    .filling { stroke: var(--accent3); opacity: 0.85; }


    #article-title-section, #article-content-section {
      background-color: white;
      padding: 24px;
    }


  #article-title-section {
    margin-top: 40px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }

  #article-content-section {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    margin-bottom: 40px;
  }

.article-title-img {
  width: 95%;
}

#article-title-section h1 {
  font-size: 44px;
  color: #272838;
}

#article-content-section h3 {
  font-size: 28px;
  color: #FF8360;
  margin-bottom: 24px;
}

#article-content-section ul li{
  color: #272838;
}

#article-title-section sub {
  font-size: 16px;
}

#article-content-section p {
  color: #272838;
  font-size: 20px;
}

nav ol.breadcrumb li.breadcrumb-item {
    font-size: 20px !important;
}

.breadcrumb-item.active {
  color: #A0EEC0 !important;
}


article img {
  width: 100%;
}

article h2 {
  color: white;
}

article.card {
  background-color: transparent !important;
}

article .content {
  background-color: #27283880;
  color: white;
  padding: 12px;
  text-align: left;
}

article .content p {
  color: #A0EEC0;
}

article .content a {
  color: #FF8360;
}

.art-img-full {
    width: 100% !important;
}

hr {
    margin-top: 24px;
    margin-bottom: 24px;
    border: none;
    height: 1px;
    background-color: #FF8360;
}

.form-group label {
    color: #A0EEC0;
}