/* Custom styles for the toggle switch */
.toggle-container {
  display: flex;
  align-items: center;
  background-color: #eaeaea;
  width: 70px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 3px;
  transition: transform 0.3s;
}

/* Checked state */
.toggle-container[data-mode="dark"] {
  background-color: #000;
}

.toggle-container[data-mode="dark"] .toggle-circle {
  transform: translateX(40px);
}

/* Dark mode styles */
body[data-mode="dark"] {
  color: #ffff;
  background-color: #000;
}

body[data-mode="dark"] header {
  background: url(./?mortyurl=https%3A%2F%2Fsocialify.git.ci%2Favinashkranjan%2FAmazing-Python-Scripts%2Fimage%3Fdescription%3D1%26forks%3D1%26issues%3D1%26language%3D1%26logo%3Dhttps%253A%252F%252Fuser-images.githubusercontent.com%252F55796944%252F104455539-7258a200-55cd-11eb-90dc-7c9981e73d72.png%26owner%3D1%26pulls%3D1%26stargazers%3D1%26theme%3DDark)
    no-repeat;
  background-size: 100% 100%;
}

body[data-mode="dark"] .contri {
  background-color: #000;
}

/*scripts page */

body[data-mode="dark"] .card-body {
  background-color: #000;
}

body[data-mode="dark"] .author {
  color: #fff;
}

body[data-mode="dark"] .prev-next {
  fill: #fff;
}

/*contact page */

body[data-mode="dark"] .mainscreen,
body[data-mode="dark"] .formpart,
body[data-mode="dark"] label[for="name"],
body[data-mode="dark"] label[for="email"],
body[data-mode="dark"] label[for="message"] {
  background-color: #000;
}

body[data-mode="dark"] .inputbox {
  color: #000; /* Change text color to black */
  background-color: #fff; /* Change background color to white */
}

/* Contact page form elements in checked state (e.g., checkbox) */
body[data-mode="dark"] input.agree:checked {
  background-color: #000; /* Change background color of checked checkbox to black */
}