/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

:root {
  /* Palette from https://colorhunt.co/palette/47347253629e87bac3d6f4ed */

    /* Clean teal palette */

  --white-ish: #FFFFFF;

  /* Background */
  --light-gray: #F2F4F6;      /* page background */
  --bluish-gray: #E6EFEF;

  /* Accent colors */
  --blue-light: #9AD0C2;      /* soft mint accent */
  --blue-medium: #2D9596;    /* primary teal */
  --blue-medium-rgb: rgb(45, 149, 150);
  --blue-dark: #1F6F70;      /* darker teal for hover */

  /* Text */
  --gray-black: #2F3E46;     /* main text */
  --dark-b: #1E293B;
  --darker-b: #0F172A;
}

html, body {
  height: 100%;
}

/* Base page styling */
body {
  background-color: var(--light-gray);
  font-family: 'Ubuntu Sans', sans-serif;
  color: var(--gray-black);
}

/* --------------------------------------------------------------
# Navigation
-------------------------------------------------------------- */

nav {
  background-color: var(--blue-dark);
}

.navbar-brand {
  color: var(--white-ish) !important;
  font-size: 1.75rem !important;
  font-weight: 700;
}

.nav-link {
  color: var(--white-ish) !important;
}

.navbar-expand-lg {
  font-size: 1.2rem !important;
}

/* --------------------------------------------------------------
# Links
-------------------------------------------------------------- */

#header_middle_letter {
  color: var(--blue-light);
}

a {
  color: var(--blue-medium);
  text-decoration: none;
}

a:hover {
  color: var(--blue-dark) !important;
  text-decoration: none;
}

/* --------------------------------------------------------------
# Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu Sans', sans-serif;
}

/* --------------------------------------------------------------
# Buttons
-------------------------------------------------------------- */

/* Custom theme button used in your HTML: class="btn btn-blue ..." */
.btn-blue {
  background-color: var(--blue-medium);
  border-color: var(--blue-medium);
  color: #ffffff !important;
}

.btn-blue:hover,
.btn-blue:focus {
  background-color: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #ffffff !important;
}

/* Optional: make links inside buttons inherit white color */
.btn-blue a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn-blue a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------
# Footer
-------------------------------------------------------------- */

.footer-lemos {
  background-color: var(--blue-dark);
  font-size: smaller;
}

.footer-lemos-nifme {
  background-color: var(--darker-b);
  font-size: smaller;
}

.footer-icons {
  color: var(--blue-light);
}

.footer-icons:hover {
  color: var(--blue-medium);
}

/* --------------------------------------------------------------
# Layout helpers
-------------------------------------------------------------- */

#page-container {
  position: relative;
  min-height: 93vh;
}

#content-wrap {
  padding-bottom: 2.5rem; /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem; /* Footer height */
}