:root {
  --primaryColor: #247016;
  --headingColor: #252222;
  --backgroundColor: #fffdfc;
  --accentColor: #f0ebdf;
  --textColor: #252222;
  --logoColor: #35684d;

  --primaryColorFilter: invert(23%) sepia(82%) saturate(2357%) hue-rotate(82deg)
    brightness(90%) contrast(83%);
  --headingColorFilter: invert(10%) sepia(5%) saturate(296%) hue-rotate(327deg)
    brightness(94%) contrast(89%);
  --backgroundColorFilter: invert(88%) sepia(14%) saturate(320%)
    hue-rotate(314deg) brightness(110%) contrast(104%);
  --accentColorFilter: invert(94%) sepia(84%) saturate(99%) hue-rotate(316deg)
    brightness(100%) contrast(89%);
  --textColorFilter: invert(0%) sepia(10%) saturate(5354%) hue-rotate(40deg)
    brightness(103%) contrast(73%);
  --logoColorFilter: invert(34%) sepia(10%) saturate(1785%) hue-rotate(96deg)
    brightness(97%) contrast(87%);

  --whiteFilter: invert(94%) sepia(0%) saturate(7474%) hue-rotate(115deg)
    brightness(107%) contrast(107%);
  --blackFilter: invert(0%) sepia(93%) saturate(0%) hue-rotate(234deg)
    brightness(96%) contrast(107%);

  /* 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(36, 112, 22, 0.25);
  --high-opacity-primaryColor: rgba(36, 112, 22, 0.75);

  --low-opacity-headingColor: rgba(37, 34, 34, 0.25);
  --high-opacity-headingColor: rgba(37, 34, 34, 0.75);

  --low-opacity-backgroundColor: rgba(255, 253, 252, 0.25);
  --high-opacity-backgroundColor: rgba(255, 253, 252, 0.75);

  --low-opacity-accentColor: rgba(240, 235, 223, 0.25);
  --high-opacity-accentColor: rgba(240, 235, 223, 0.75);

  --low-opacity-textColor: rgba(37, 34, 34, 0.25);
  --high-opacity-textColor: rgba(37, 34, 34, 0.75);

  /* END OF OPACITY COLROS */

  /* BASIC COLORS */

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

  /* 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: Concert One;
}

html {
  background-color: white;
  color: black;
  scroll-behavior: smooth;
}

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

/* header styles */

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

.section-margin {
  margin: 2rem 0;
}

.section-side-padding,
.navbar-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Small screens (mobile) */
@media (min-width: 640px) {
  .section-side-padding,
  .navbar-wrapper {
    max-width: 40rem;
  }
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
  .section-side-padding,
  .navbar-wrapper {
    max-width: 50rem;
  }
}

/* Large screens (laptops) */
@media (min-width: 1024px) {
  .section-side-padding,
  .navbar-wrapper {
    max-width: 60rem;
  }
}

/* Extra large screens (desktops) */
@media (min-width: 1280px) {
  .section-side-padding,
  .navbar-wrapper {
    max-width: 70rem;
  }
}

/* 2XL Screens (very large desktops) */
@media (min-width: 1536px) {
  .section-side-padding,
  .navbar-wrapper {
    max-width: 80rem;
  }
}

.minimalist-section-padding {
  padding-top: 8rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

/* Cool scroll */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}