:root {
  --primaryColor: #2d6a4f;
  --headingColor: #74a57f;
  --backgroundColor: #f0f5f1;
  --accentColor: #a7c7a3;
  --textColor: #355e3b;
  --logoColor: #066a06;

  --primaryColorFilter: invert(32%) sepia(31%) saturate(650%) hue-rotate(101deg)
    brightness(102%) contrast(93%);
  --headingColorFilter: invert(64%) sepia(24%) saturate(435%) hue-rotate(81deg)
    brightness(89%) contrast(90%);
  --backgroundColorFilter: invert(100%) sepia(22%) saturate(223%)
    hue-rotate(55deg) brightness(100%) contrast(93%);
  --accentColorFilter: invert(89%) sepia(10%) saturate(697%) hue-rotate(66deg)
    brightness(87%) contrast(83%);
  --textColorFilter: invert(28%) sepia(14%) saturate(1703%) hue-rotate(77deg)
    brightness(96%) contrast(77%);
  --logoColorFilter: invert(27%) sepia(53%) saturate(1560%) hue-rotate(86deg)
    brightness(94%) contrast(99%);

  --whiteFilter: invert(97%) sepia(59%) saturate(1430%) hue-rotate(187deg)
    brightness(134%) contrast(100%);
  --blackFilter: invert(0%) sepia(1%) saturate(7470%) hue-rotate(316deg)
    brightness(93%) contrast(100%);

  /* OPACITY COLORS */

  --low-opacity-black: rgba(0, 0, 0, 0.25);
  --high-opacity-black: rgba(0, 0, 0, 0.75);

  --low-opacity-gray: rgba(255, 255, 255, 0.25);
  --high-opacity-gray: rgba(255, 255, 255, 0.75);

  --low-opacity-primaryColor: rgba(45, 106, 79, 0.25);
  --high-opacity-primaryColor: rgba(45, 106, 79, 0.75);

  --high-opacity-primaryColorFilter: invert(32%) sepia(43%) saturate(490%)
    hue-rotate(101deg) brightness(97%) contrast(91%) opacity(0.75);

  --low-opacity-headingColor: rgba(116, 165, 127, 0.25);
  --high-opacity-headingColor: rgba(116, 165, 127, 0.75);

  --low-opacity-backgroundColor: rgba(240, 245, 241, 0.25);
  --high-opacity-backgroundColor: rgba(240, 245, 241, 0.75);

  --low-opacity-accentColor: rgba(167, 199, 163, 0.25);
  --high-opacity-accentColor: rgba(167, 199, 163, 0.75);

  --low-opacity-textColor: rgba(53, 94, 59, 0.25);
  --high-opacity-textColor: rgba(53, 94, 59, 0.75);

  /* END OF OPACITY COLROS */

  /* BASIC COLORS */

  --light-gray: #f8f9fa;
  --basic-gray: #f8f9fa;
  --dark-gray: #ccc;
  --black: #000000;
  --white: #ffffff;

  --whiteFilter: invert(98%) sepia(84%) saturate(0%) hue-rotate(79deg)
    brightness(112%) contrast(101%);
  --blackFilter: invert(0%) sepia(92%) saturate(7175%) hue-rotate(75deg)
    brightness(72%) contrast(101%);

  /* END OF BASIC COLORS*/

  /* SHADOWS */

  --basic-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  /* END OF SHADOWS */
}

html {
  font-family: Prompt, sans-serif;
}

footer {
  font-family:
    Lato Bold,
    sans-serif;
}

h1,
h2 {
  font-family: Ubuntu, serif;
}

h3,
h4,
h5,
h6 {
  font-family: Prompt, serif;
}

code {
  font-family:
    Space Mono,
    monospace;
}

.logo-text {
  font-family: Prompt;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  padding: 0;
  line-height: 1.5;
  min-height: 100vh;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}