:root {    
    --primaryColor: #b38b67;
    --headingColor: #5c705c;
    --backgroundColor: #faf9f6;
    --accentColor: #e1d9d1;
    --textColor: #3a3530;
    --logoColor: #b38b67;

    --primaryColorFilter: invert(58%) sepia(67%) saturate(240%) hue-rotate(347deg) brightness(88%) contrast(83%);
    --headingColorFilter: invert(43%) sepia(10%) saturate(738%) hue-rotate(71deg) brightness(93%) contrast(92%);
    --backgroundColorFilter: invert(99%) sepia(19%) saturate(357%) hue-rotate(23deg) brightness(107%) contrast(95%);
    --accentColorFilter: invert(87%) sepia(5%) saturate(1266%) hue-rotate(322deg) brightness(113%) contrast(76%);
    --textColorFilter: invert(15%) sepia(29%) saturate(271%) hue-rotate(349deg) brightness(92%) contrast(83%);
    --logoColorFilter: invert(61%) sepia(8%) saturate(1660%) hue-rotate(347deg) brightness(92%) contrast(90%);
    
    --whiteFilter: invert(100%) sepia(0%) saturate(7474%) hue-rotate(112deg) brightness(102%) contrast(105%);
    --blackFilter: invert(0%) sepia(14%) saturate(7449%) hue-rotate(318deg) brightness(89%) 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(179, 139, 103, 0.25);
    --high-opacity-primaryColor: rgba(179, 139, 103, 0.75);

    --high-opacity-primaryColorFilter: invert(61%) sepia(17%) saturate(788%) hue-rotate(347deg) brightness(91%) contrast(90%) opacity(0.75);
    
    --low-opacity-headingColor: rgba(92, 112, 92, 0.25);
    --high-opacity-headingColor: rgba(92, 112, 92, 0.75);

    --low-opacity-backgroundColor: rgba(250, 249, 246, 0.25);
    --high-opacity-backgroundColor: rgba(250, 249, 246, 0.75);

    --low-opacity-accentColor: rgba(225, 217, 209, 0.25);
    --high-opacity-accentColor: rgba(225, 217, 209, 0.75);

    --low-opacity-textColor: rgba(58, 53, 48, 0.25);
    --high-opacity-textColor: rgba(58, 53, 48, 0.75);

    /* END OF OPACITY COLROS */

    /* BASIC COLORS */

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

    --whiteFilter: invert(100%) sepia(6%) saturate(0%) hue-rotate(355deg) brightness(109%) contrast(101%);
    --blackFilter: invert(0%) sepia(0%) saturate(7473%) hue-rotate(251deg) brightness(88%) contrast(102%);

    /* END OF BASIC COLORS*/

    /* SHADOWS */

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

    /* END OF SHADOWS */

  }

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

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

  h1, h2 {
    font-family: Cormorant Garamond, serif;
  }

  h3, h4, h5, h6 {
    font-family: Montserrat, serif;
  }
      
  code {
    font-family: JetBrains Mono, monospace;
  }

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

  html {
    scroll-behavior: smooth;
    background-color: var(--backgroundColor);
    min-height: 100%;
  }

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;
}
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}




  
  /* Global Section Centering */
  nav, section, header, footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  






  footer {
    margin-top: auto;
  }


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