:root {
  --darkbg: #3a3a3a; /* Dark mode background color for the main content */
  --darkt: white;  /* Dark mode text color */
  --lightbg: white; /* Light mode background color for the main content */
  --lightt: black;  /* Light mode text color */
  --bgColor--night: #3a3a3a; /* Dark mode background color for the sidebar */
  --bgColor--day: #ffffff; /* Light mode background color for the sidebar */
  --darkbg-bento: #404040;
  --lightbg-bento: #E0E0E0;
  --toggleHeight: 6.4em;
  --toggleWidth: 12em;
  --toggleBtnRadius: 4em;

  --mooncolor: #D9FBFF;
}

body {
  transition: all 0.2s ease-in-out;
  background-color: var(--darkbg); /* Default dark mode */
  color: var(--darkt);
}

body.light-mode {
  background-color: var(--lightbg); /* Light mode */
  color: var(--lightt);
}

#sidebar-nav {
  background-color: var(--bgColor--night); /* Sidebar in dark mode */
  transition: background-color 0.2s ease-in-out;
}

body.light-mode #sidebar-nav {
  background-color: var(--bgColor--day); /* Sidebar in light mode */
}

/* Toggle switch styles */
.tdnn {
  margin: 0 auto;
  font-size: 30%;
  margin-top: 8em;
  position: relative;
  height: var(--toggleHeight);
  width: var(--toggleWidth);
  border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background-color: lightslategray; /* Default dark mode for the toggle */
}

body.light-mode .tdnn {
  background-color: lightgray; /* Light mode for the toggle */
}

.moon, .sun {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: all 400ms ease-in-out;
}

.moon {
  top: 1.6em;
  left: 1.6em;
  transform: rotate(-75deg);
  width: calc(var(--toggleBtnRadius) * 0.8);
  height: calc(var(--toggleBtnRadius) * 0.8);
  background-color: lightslategray;
  box-shadow: 1.2em 1em 0 0em var(--mooncolor) inset,
              rgba(248, 245, 245, 0.1) 0em -2.8em 0 -1.8em,
              rgba(248, 245, 245, 0.1) 1.2em 2.8em 0 -1.8em,
              rgba(248, 245, 245, 0.1) 0.8em 5.2em 0 -1.6em,
              rgba(248, 245, 245, 0.1) 2.4em 0.8em 0 -1.64em,
              rgba(248, 245, 245, 0.1) 3.2em 3.2em 0 -1.8em,
              rgba(248, 245, 245, 0.1) 2.4em 5.2em 0 -1.8em,
              rgba(248, 245, 245, 0.1) -1.6em 2.8em 0 -1.8em,
              rgba(248, 245, 245, 0.1) -0.4em 4em 0 -1.8em;
}

.sun {
  top: 1.8em;
  left: 7.2em;
  transform: rotate(0deg);
  width: 2.8em;
  height: 2.8em;
  background-color: lightgoldenrodyellow;
  box-shadow: 1.2em 1.2em 0 2em #ca8f19 inset,
              0 -2em 0 -1.08em #ca8f19,
              1.4em -1.4em 0 -1.2em #ca8f19,
              2em 0 0 -1.08em #ca8f19,
              1.4em 1.4em 0 -1.2em #ca8f19,
              0 2em 0 -1.08em #ca8f19,
              -1.4em 1.4em 0 -1.2em #ca8f19,
              -2em 0 0 -1.08em #ca8f19,
              -1.4em -1.4em 0 -1.2em #ca8f19;
}

/* color-mode toggle */
.tdnn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  margin-top: auto;
}