:root {
  --primary: #ffffff;

  --bg: #090e18;
  --bg-secondary: #121621;
  --bg-transparent: rgba(0, 0, 0, 0.4);
  --bg-gradient: linear-gradient(to bottom, rgba(36, 36, 41, 0), rgba(58, 58, 58, 0.418));
  --words: #ffffff;
  --words-secondary: #c7c7c7;

  --button-bg: #ffffff;
  --button-bg-hover: #0080ff;
  --button-text: #000000;

  --card-bg: rgba(18, 22, 33, 0.8);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-radius: 15px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  --border: #01649D;
  --accent: rgb(7, 100, 157);
  --hover: #d1d1d1;
  --blue: rgb(255, 255, 255);
  --theme-bg: black;
  --theme-bg-secondary: #000000;
}

.light-theme {
 --primary: #ffffff;

  --bg: #ececec;
  --bg-secondary: #ffffff;
  --bg-transparent: rgba(255, 255, 255, 0.37);
 --bg-gradient: linear-gradient(to bottom, #090e18 0%, rgb(0, 0, 0) 60%, rgba(7,100,157, 1) 100%);
  --words: #000000;
  --words-secondary: #353535;

  --button-bg: #000000;
  --button-bg-hover: #0080ff;
  --button-text: #ffffff;

  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(0, 0, 0, 0.1);
  --card-radius: 15px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  --accent: #00bfff;
  --hover: #d1d1d1;
  --blue: rgb(255, 255, 255);
  --theme-bg: black;
  --theme-bg-secondary: #000000;
}

.dark-theme {
  --primary: #ffffff;

  --bg: #1d1d1d;
  --bg-secondary: #2c2c2c;
  --bg-transparent: rgba(0, 0, 0, 0.4);
  --words: #ffffff;
  --words-secondary: #ffffff;

  --button-bg: #ffffff;
  --button-bg-hover: #0080ff;
  --button-text: #000000;

  --card-bg: rgba(44, 44, 44, 0.8);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-radius: 15px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  --border: #00bfff;
  --accent: #00bfff;
  --hover: #d1d1d1;
  --blue: rgb(255, 255, 255);
  --theme-bg: black;
  --theme-bg-secondary: #000000;
}


.backup {
  --primary: #ffffff;

  --bg: #1d1d1d;
  --bg-secondary: #2c2c2c;
  --bg-transparent: rgba(0, 0, 0, 0.4);
  --words: #ffffff;
  --words-secondary: #c7c7c7;

  --button-bg: #ffffff;
  --button-bg-hover: #0080ff;
  --button-text: #000000;

  --card-bg: rgba(29, 29, 29, 0.8);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-radius: 15px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  --border: #01649D;
  --accent: rgba(7, 100, 157, 1);
  --hover: #d1d1d1;
  --blue: rgb(255, 255, 255);
  --theme-bg: black;
  --theme-bg-secondary: #000000;
}