body.dark {
  background-color: #20222e;
}

/*! <--------- Header section --------->*/

body.dark .switch-mode {
  background: #0e0f14;
}

/*! <--------- Main section --------->*/

body.dark .container {
  background-color: #171a25;
  -webkit-box-shadow: 0px 0px 8px 5px rgba(29, 27, 27, 0.062);
  box-shadow: 0px 0px 8px 5px rgba(17, 17, 17, 0.075);
}

body.dark .text-write {
  background-color: #222738;

  box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.075);
}

body.dark #encript {
  box-shadow: 0 0 5px rgb(30, 30, 41);
  outline: none;

  background-image: linear-gradient(
    to right,
    #383d4b 0%,
    #2f3441 51%,
    #383d4b 100%
  );
}

body.dark #decrypt {
  box-shadow: 0 0 5px rgb(30, 30, 41);
  outline: none;

  background-image: linear-gradient(
    to right,
    #383d4b 0%,
    #2f3441 51%,
    #383d4b 100%
  );
}

body.dark #copy-text {
  box-shadow: 0 0 5px rgb(30, 30, 41);
  outline: none;

  background-image: linear-gradient(
    to right,
    #383d4b 0%,
    #2f3441 51%,
    #383d4b 100%
  );
}

body.dark .alert {
  background-color: #383d4b;

  box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.075);
}

body.dark .input-btn-content {
  background-color: #222738;

  box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.075);
}

body.dark .alert-message {
  color: var(--color-white-bone);
}

body.dark .alert-message2 {
  color: var(--color-white-bone);
}

body.dark .input-text {
  color: var(--color-white-bone);
}

::placeholder {
  color: midnightblue;
}

body.dark ::placeholder {
  color: rgba(255, 255, 255, 0.678);
}

body.dark #text-result {
  color: var(--color-white-bone);
}

body.dark .text-limit {
  color: var(--color-white-bone);
}

/*! <--------- footer section --------->*/

body.dark .social-link,
body.dark .name-copy {
  color: var(--color-white-bone);
}

body.dark .fa-linkedin,
body.dark .fa-twitter-square,
body.dark .fa-instagram-square,
body.dark .fa-github {
  color: var(--color-white-bone);
}

body.dark .fa-linkedin:hover,
body.dark .fa-twitter-square:hover,
body.dark .fa-instagram-square:hover,
body.dark .social-link:hover,
body.dark .name-copy:hover,
body.dark .fa-github:hover {
  color: #9b9b9c;
}