.dark-theme {
  --first-color: #fff;
  --second-color: blueviolet;
  --third-color: #a9afc3;

  /*=======Background colors=======*/
  --body-bg-color: #0e1b31;
  --card-bg-color: #132347;
  --modal-bg-color: #102048;
  --bg-transparent-color: rgba(255, 255, 255, 0.1);
  --bg-transparent-color-01: rgba(255, 255, 255, 0.1);
  --line-color: #454f6b;

  /*=======Color Filter=======*/
  --color-filter: invert(0);

  /*=======Scroll bar colors=======*/
  --scroll-bar-color: #c1ceff;
  --scroll-thumb-color: #282f4e;
  --scroll-thumb-hover: #454f6b;
}

.theme-btn {
  z-index: 99999;
  position: fixed;
  right: 0;
  top: 100px;
  background: var(--bg-transparent-color-01);
  backdrop-filter: blur(20px);
  width: 50px;
  height: 50px;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

.theme-btn .fa-sun,
.theme-btn.sun .fa-moon {
  display: none;
}

.theme-btn.sun .fa-sun {
  display: block;
}