/* Lime Theme: restrained green refresh for the portfolio without layout changes. */

/* Use Open Sans as the default font. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");

/* See https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables for variables to override. */
:root {
  --tf-green1: #1e5f3a;
  --tf-green2: #2f7a4a;
  --tf-green3: #6fb083;
  --tf-green4: #dcecdf;
  --tf-green5: #f3f8f2;
  --tf-green6: #eef6ef;
  --tf-green7: #c7dccb;
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-link-color: var(--tf-green1);
  --tf-pill-bg: var(--tf-green3);
  --tf-icon-fill: var(--tf-green1);
  --tf-icon-hover: var(--tf-green2);
  --tf-page-bg-color: var(--tf-green5);
  --tf-footer-bg-color: var(--tf-green4);
  --tf-projects-bg-color: var(--tf-green6);
}

h1,h2,h3,h4,h5 {
  color: var(--tf-green1);
}

body {
  background-color: var(--tf-green5);
  color: #17301f;
}

.bg-gradient {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) !important;
}

.navbar.bg-light,
footer.navbar.bg-light {
  background-color: #edf5ee !important;
}

.border-bottom,
.border-top {
  border-color: rgba(30, 95, 58, 0.12) !important;
}

.card {
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(30, 95, 58, 0.12);
  box-shadow: 0 10px 24px rgba(30, 95, 58, 0.06);
}

.btn-outline-dark {
  color: var(--tf-green1);
  border-color: var(--tf-green2);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
  background-color: var(--tf-green2);
  border-color: var(--tf-green2);
  color: #fff;
}

.badge.rounded-pill {
  color: #10311d;
}

.nav-link,
.navbar-brand {
  color: var(--tf-green1);
}

.nav-link:hover,
.navbar-brand:hover {
  color: var(--tf-green2);
}

.lead,
p,
li,
small {
  color: #274333;
}

.card-footer {
  background-color: transparent;
}

/* Format social media icons */
.tf-social {
  display: inline-block;
  fill: var(--tf-green1);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.2s;
}

.tf-social:hover {
  fill: var(--tf-icon-hover);
}

a {
  text-decoration: none;
}

@media (max-width: 500px) {
  .navbar-brand {
    display: none;
  }

  .navbar-brand-mobile {
    display: inline;
  }
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
  border-top: none;
}