html, body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: url("../images/panoramic-modern-neighborhood.png") no-repeat fixed center / cover black;
}
.articles-start {
  height: 100vh;
  /*  color: #105139;*/
  min-height: 2rem;
  overflow: auto;
  /*background-color: hsl(0, 0%, 95%);*/
  background-color: #0E6952;
  width: 85%;
  /*max-width: 48rem;*/
  margin: auto;
  color: hsl(0, 0%, 20%);
  border: 1px solid hsl(0, 0%, 0%);
  border-radius: 1.5rem;
  /*text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);*/
  /*box-shadow:
          0 0 0.5rem hsl(300, 40%, 5%),
          0 6rem 4rem -2rem hsl(300, 40%, 5%),
          0 0.5rem 6rem hsl(200, 40%, 30%),
          0 0.5rem 10rem hsl(300, 40%, 30%);*/
}
.articles-header {
  background-image:url("../images/nature articles-head355b.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px;
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-radius: 1.375rem 1.375rem 0 0;
}
.disclosure-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
}
.articles-content {
  margin: 0 1.5rem 0 1.5rem;
}

.wide-click {
  display: flex;
  padding: 12px 16px;
}
button {
  display: block;
  padding: 12px 16px;
}
.left-side {
  overflow: auto;
  background: linear-gradient(to bottom, #105139 20%, #8bb89b 100%);
  border-color: hsl(0, 0%, 65%) hsl(0, 0%, 80%) hsl(0, 0%, 100%) hsl(0, 0%, 80%); /*Top, Right, Bottom, Left*/
}

.button-group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.button {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1rem;
  background: black;
  text-decoration: none;
  color: white;
  width: 50%;
  max-width: 8rem;
  border: 1px solid;
  border-radius: 2rem;
}
.button + .button {
  margin-left: 1.5rem;
}
.button:focus {
  outline: none;
}
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
  border-color: hsl(200, 100%, 15%);
  text-shadow: 0 1px hsl(200, 100%, 50%), 0 -1px hsl(200, 100%, 5%);
  box-shadow:
          inset 0 1px hsl(200, 100%, 45%),
          inset 0 -1px hsl(200, 100%, 10%);
}
.button-primary:hover,
.button-primary:focus{
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
  border-color: hsl(200, 100%, 10%);
  text-shadow:
          0 1px hsl(200, 100%, 45%),
          0 -1px hsl(200, 100%, 0%);
}
.button-primary:focus {
  box-shadow:
          inset 0 1px hsl(200, 100%, 45%),
          inset 0 -1px hsl(200, 100%, 10%),
          0 0 0 0.25rem hsl(200, 100%, 50%);
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
  border-color: hsl(200, 10%, 15%);
  text-shadow: 0 1px hsl(200, 10%, 50%), 0 -1px hsl(200, 10%, 5%);
  box-shadow:
          inset 0 1px hsl(200, 10%, 50%),
          inset 0 -1px hsl(200, 10%, 15%);
}
.button-secondary:hover,
.button-secondary:focus{
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
  border-color: hsl(200, 10%, 10%);
  text-shadow: 0 1px hsl(200, 10%, 45%), 0 -1px hsl(200, 10%, 0%);
  box-shadow:
          inset 0 1px hsl(200, 10%, 45%),
          inset 0 -1px hsl(200, 10%, 10%);
}
.button-secondary:focus {
  box-shadow:
          inset 0 1px hsl(200, 10%, 45%),
          inset 0 -1px hsl(200, 10%, 10%),
          0 0 0 0.25rem hsl(200, 100%, 50%);
}

.nature-overlay {
  background: rgba(0, 0, 0, 0.7);
  background-blend-mode: darken;
}
.nature-bg {
  filter: brightness(10%);
  background-size: cover; /* Scales image to cover container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents tiling */
}

/*** INSIDE ARTICLE DOCS ***/
.nature-header {
  /*font-family: 'Merriweather', serif;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: whitesmoke;
  text-shadow: 2px 2px 2px #0C0C0C;
  font-size: 48px;
  padding-bottom: 8px;
}
/*** INSIDE ARTICLE DOCS ***/
.nature-article {
/*  font-family: 'Merriweather', serif;*/
  color: #00401A; /*105139;*/
  font-size: 16px;
  /*text-shadow: .1rem .1rem .5rem #0C0C0C;*/
  padding: 0.75rem;
  text-align: justify;
    /*border-color: hsl(0, 0%, 65%) hsl(0, 0%, 80%) hsl(0, 0%, 100%) hsl(0, 0%, 80%); !*Top, Right, Bottom, Left*!
    box-shadow: 0 0 0.25rem hsl(0, 0%, 80%) inset,
  0 4rem 2rem -4rem hsl(0, 0%, 85%) inset,
  0 -4rem 2rem -4rem hsl(0, 0%, 85%) inset;*/
}
/*** INSIDE ARTICLE DOCS ***/
.google-sans-articles {
  font-family: "Google Sans", sans-serif;
  /*font-family: 'Merriweather', serif;*/
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "GRAD" 0;
}

/* ** Custom transparent button class ** */
.btn-transparent {
  /* Base styles */
  background: transparent !important; /* Override background (including gradients) */
  background-color: transparent !important; /* Fallback for older browsers */
  border-color: transparent !important; /* Remove border color */
  color: #212529 !important; /* Default text color (adjust to your theme) */
  box-shadow: none !important; /* Optional: Remove shadow */
}

/* Hover state */
.btn-transparent:hover {
  background: rgba(0, 0, 0, 0.1) !important; /* Light grey overlay on hover (adjust opacity) */
  border-color: transparent !important;
  color: #000 !important; /* Darken text on hover (optional) */
}

/* Focus state (for accessibility) */
.btn-transparent:focus {
  background: rgba(0, 0, 0, 0.1) !important;
  outline: none !important; /* Optional: Remove default focus outline */
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2) !important; /* Custom focus ring */
}
.btn-block-srr {
  display: inline-block;
  width: 100%;
  text-align: left !important;
}
.btn-block-srr-w {
  display: inline-block;
  width: 100%;
  text-align: left !important;
  color: whitesmoke !important;
}