.theme-toggle-icon {
  position: fixed;
  bottom: 20px;
  right: 25px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10000;
  user-select: none;
  transition: transform 0.3s ease;
}

.theme-toggle-icon:hover {
  transform: scale(1.2);
}

/* transition*/
body,
.container,
input,
button,
.wrapper-card p,
.background,
.label,
#observed-at {
  transition: background-color 0.5s, color 0.5s, border-color 0.5s;
}

body.light-theme {
  background-color: #f5f5f5;
  color: #1e1e1e;
}

body.light-theme .container {
  background-color: rgba(255, 255, 255, 0.2);
  color: #1e1e1e;
  backdrop-filter: blur(1px);
}

body.light-theme input,
body.light-theme button {
  background-color: #eaeaea;
  color: #1e1e1e;
}

body.light-theme .wrapper-card p {
  border-color: #007bff;
}

body.light-theme .background {
  background-color: #fff;
  background-image: linear-gradient(
      to right,
      rgba(180, 180, 180, 0.3) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(180, 180, 180, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
}

body.light-theme #observed-at,
body.light-theme h1 {
  color: #666;
}
body.light-theme .label {
  color: #666666;
}

body.light-theme button:hover {
  background-color: rgba(0, 123, 255, 0.15);
}