/* Default (light mode) styles here */

body {
  background: #fff;
  color: #222;
}

h1 {
  padding: 36 0 0 0;
  margin: 0;
}

h3 {
  position: sticky;
  top: 29;
  background: white;
  z-index: 2;  
  padding: 12 0 12 0;
}

li {
  list-style: none;
}

a {
  color: #0000EE;
}

a:visited {
  color: #800080
}

.green {
  color: #0f0;
}

.error {
  color: #f00;
}

.note {
  color: #00bf00;
}

#calendarForm {
  background: #fff;
  color: #222;
  padding: 20px;
  border-radius: 8px;
}
#calendarForm label {
  color: #222;
}

#foldersForm {
  background: #fff;
  color: #222;
  padding: 20px;
  border-radius: 8px;
}
#foldersForm label {
  color: #222;
}

/* Initial state */
.fade {
  transition: opacity 0.25s ease;
  opacity: 1;
}

.fade2 {
  transition: opacity 5s ease;
  opacity: 1;
}

/* Final state */
.fade-out {
  opacity: 0;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background: #181818;
    color: #eee;
  }

  h3 {
    position: sticky;
    top: 29;
    background: #181818;
    color: #eee;
    z-index: 2;
    padding: 12 0 12 0;
  }

  /* Add more dark mode styles for other elements as needed */

  a {
    color: #82aaff;
  }

  a:visited {
    color: #b392f0;
  }

  .green {
    color: #7fff7f;
  }

  .error {
    color: #ff7f7f;
  }

  .note {
    color: #ffff7f;
  }
}