/* Define color palette */
:root {
  --color1-bg: #000000;
  --color1-text: #ffffff;

  --color2-bg: #246b59;
  --color2-text: #f0f0f0;

  --color3-bg: #8cd993;
  --color3-text: #000000;

  --color4-bg: #e5f0d1;
  --color4-text: #000000;

  --color5-bg: #d98c8c;
  --color5-text: #000000;

  --color6-bg: #994933;
  --color6-text: #ffffff;

  --_noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><defs><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix type='saturate' values='0' in='t' result='g'/><feComponentTransfer in='g' result='a'><feFuncA type='linear' slope='0.5'/></feComponentTransfer></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  --_noise-size: 25%;
  --_gradient-blend-mode: exclusion;
  --_gradient-blur: 90px;
  --_gradient:
    radial-gradient(at 39% 23%, #246b59 0px, transparent 50%),
    radial-gradient(at 49% 6%, #8dd993 0px, transparent 50%),
    radial-gradient(at 91% 49%, #e5f0d1 0px, transparent 50%),
    radial-gradient(at 18% 37%, #d98d8d 0px, transparent 50%),
    radial-gradient(at 44% 86%, #994932 0px, transparent 50%);
}

noise {
  background-image: var(--_noise-texture);
  background-size: var(--_noise-size);
  background-position: center;
  background-repeat: repeat;
}
.frosted-backdrop {
  backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
  -webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%)
    brightness(100%);
}

/* Apply colors to sections in order */

#home.section {
  background-image: var(--_noise-texture), var(--_gradient);
}

/*
 * background: var(--_gradient) #000000;
 * mix-blend-mode: var(--_gradient-blend-mode);
*/

#about.section {
  background-color: var(--color2-bg);
  color: var(--color2-text);
}

#portfolio.section {
  background-color: var(--color3-bg);
  color: var(--color3-text);
}

#experience.section {
  background-color: var(--color4-bg);
  color: var(--color4-text);
}

#education.section {
  background-color: var(--color3-bg);
  color: var(--color3-text);
}

/*
  .menu-open .nav-list {
  background-color: var(--color6-bg);
  color: var(--color6-text);
}
*/

.nav-list.active {
  background-color: var(--color6-bg);
  color: var(--color6-text);
}

/* Wrap around if more sections exist: repeat colors */

#blogs.section {
  background-color: var(--color2-bg);
  color: var(--color2-text);
}

#contact.section {
  background-color: var(--color3-bg);
  color: var(--color3-text);
}

/* Adjust other text/form inputs and links inside colored backgrounds */

/* For input fields and textarea */
input[type="text"],
input[type="email"],
textarea {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  border: 1px solid #ccc;
}

/* Links */
a {
  color: #fff;
  text-decoration: underline;
}

#about a,
#portfolio a,
#experience a,
#education a,
#expertice a,
#blogs a,
#contact a {
  color: inherit; /* default inherit text color */
}

/* For links on dark backgrounds */
#home a,
#expertice a,
#blogs a {
  color: #a8e6cf; /* light aqua for contrast on dark bg */
}

/* Button contrast */
button {
  background-color: #333;
  color: white;
}

button:hover,
button:focus {
  background-color: #555;
}

/* If you want to invert button colors on dark backgrounds specifically */
#home button,
#expertice button,
#blogs button {
  background-color: #f0f0f0;
  color: #333;
}

#home button:hover,
#expertice button:hover,
#blogs button:hover {
  background-color: #ccc;
}