:root {
  --primaryColor: #1f2687;
  --headingColor: #000000;
  --backgroundColor: #121212;
  --accentColor: #000000;
  --textColor: #000000;
  --logoColor: #000000;

  --primaryColorFilter: invert(14%) sepia(31%) saturate(6399%)
    hue-rotate(230deg) brightness(88%) contrast(98%);
  --headingColorFilter: invert(0%) sepia(100%) saturate(7483%)
    hue-rotate(290deg) brightness(116%) contrast(100%);
  --backgroundColorFilter: invert(0%) sepia(2%) saturate(5094%)
    hue-rotate(328deg) brightness(100%) contrast(86%);
  --accentColorFilter: invert(0%) sepia(7%) saturate(7473%) hue-rotate(157deg)
    brightness(91%) contrast(99%);
  --textColorFilter: invert(0%) sepia(2%) saturate(0%) hue-rotate(148deg)
    brightness(93%) contrast(101%);
  --logoColorFilter: invert(0%) sepia(0%) saturate(7475%) hue-rotate(305deg)
    brightness(91%) contrast(99%);

  --whiteFilter: invert(100%) sepia(100%) saturate(0%) hue-rotate(341deg)
    brightness(102%) contrast(103%);
  --blackFilter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg)
    brightness(97%) contrast(103%);

  /* 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(31, 38, 135, 0.25);
  --high-opacity-primaryColor: rgba(31, 38, 135, 0.75);

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

  --low-opacity-backgroundColor: rgba(18, 18, 18, 0.25);
  --high-opacity-backgroundColor: rgba(18, 18, 18, 0.75);

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

  --low-opacity-textColor: rgba(0, 0, 0, 0.25);
  --high-opacity-textColor: rgba(0, 0, 0, 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: Poppins, sans-serif;
}

footer {
  font-family: Poppins, sans-serif;
}

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

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

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

.logo-text {
  font-family: DM Sans;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: white;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(
    at 30% 30%,
    rgba(255, 245, 235, 0.9) 0%,
    rgba(245, 235, 255, 0.6) 40%,
    rgba(240, 240, 255, 0.5) 70%,
    white 100%
  );
  mask-image: linear-gradient(to bottom, black 60vh, transparent 100vh);
  -webkit-mask-image: linear-gradient(to bottom, black 60vh, transparent 100vh);
  z-index: -1;
  pointer-events: none;
}

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