:root {
  --header-color: white;
  --header-line: #EAEAEA;
  --tab-color: #FFFD89;
  --tab-outline: #EBCA50;
  --sticky-note-color: white;
  --intro-text-color: #66a1cd;
  --info-color: gray;
  --gif-outline: white;
  --experience-color: white;
  --grid-line-color: #ddd;
  --experience-text: #333344;
  --exp-highlighted-text: #333344;
  --exp-hover-color: #333344e4;
  --exp-hover-text-color: #a5c7e4;
  --exp-line-color: #FFFFFF40;
  --box-color: #EAEAEA;
  --contact-box-color: white;
  --black-text-color: #333344;
  --button-bg-color: #A7C4DD;
  --button-bg-color2: #C3B2E6;
  --button-hv-color: #ccafe7;
  --button-hv-color2: #80c8e5;
  --button-outline: #629DCC;
  --star-bg-color: #FFF6B7;
  --star-outline: #EBCA50;
  --bg-color: #D3BDFF;
  --bg2-color: #F8D4F3;
  --grey-highlight:  #EAEAEA;
  --glow-color: #dac064;
  --bg-exp-card: #7A99C2;
  --bg-card-overlay:#1a1a1ade;
  --exp-card-text-color: white;
  --exp-card-highlight-color: #dac064cf;
  --skills-text-color: #7A99C2;
}               

body.dark-mode {
  --header-color: #3E2F5B;
  --header-line: #3E2F5B;
  --tab-color: #262543;
  --tab-outline: #262543;
  --sticky-note-color: #3E2F5B;
  --intro-text-color: #EBCA50;
  --info-color: white;
  --gif-outline: #262543;
  --experience-color: #19182D;
  --grid-line-color: #ffffff1a;
  --experience-text: #EBCA50;
  --exp-hover-color: #070710e0;
  --exp-hover-text-color: #EBCA50;
  --exp-line-color: #ffffff1a;
  --box-color: #7C7C7C;
  --contact-box-color: #0D1B2A;
  --black-text-color: white;
  --button-bg-color: #5e86c5;
  --button-bg-color2: #c29cd9;
  --button-hv-color: #af7ec1;
  --button-hv-color2: #4b6fb1;
  --button-outline: #629DCC;
  --star-bg-color: #262543;
  --star-outline: #EBCA50;
  --bg-color: #0D1B2A;
  --bg2-color: #3E2F5B;
  --grey-highlight: #EAEAEA;
  --glow-color: #4b6fb1;
  --bg-exp-card: #262543;
  --bg-card-overlay: #19182DFA;
  --exp-card-highlight-color: #C49B46B3;
  --skills-text-color: #c29cd9;
}