:root {
  --white: #ffffff;
  --background: #fffdf6;
  --text-primary: #181c14;
  --text-secondary: #5a5a5a;
  --text-white: #fffdf6;
  --p-text: #9c9c9c;
  --border: oklch(0.274 0.006 286.033);
  --box-0: #ddeb9d;
  --copy-text: #ffca9cbb;
  --text-orange: #f97300;

  /* Color tempalte 2 - Light mode */
  --bg-color1: #fffdf6;
  --bg-color2: #ddeb9d;

  --text-0: #181c14;
  --text-sec-title: #181c14;

  --header-color: #ddeb9db0;

  --dropdown-text-active: #181c14;

  --box-color1: #ddeb9d;
  --box-color2: #a3b652;

  --slider-color: #ddeb9d;

  --border-color1: #181c14;
  --border-color2: #181c14;

  --box-shadow1: #b0a4a4;
  --box-shadow2: #7f8487;
  --box-shadow3: #3c3d37;
  --box-shadow4: #6a6b5fb9;

  --button-color1: #a0c878;
  --button-color2: #f97300;

  --skills-box: #fffdf6;

  --hover-letter: #f97300;
  --hover-letter-calm: #ff9c46;
  --hover-btn-weather: #4e71ff;

  --click-here: #181c14;

  /* pop up colors */
  --conic-1: #a0c878;
  --conic-2: #809d3c;
  --conic-3: #1e925e;
  --popup-text1: #181c14;
  --popup-text2: #809d3c;

  /* swiper colors for that below */
  --swiper-0: #ddeb9d;
  --swiper-1: #809d3c;
}