/* Dark theme for the main page. Loaded as a disabled stylesheet and switched
   on by the Light/Dark button. The site's own look is the light theme, so this
   file deepens the background and the frosted box while keeping the pink
   accents, the rounded corners, the dangle animation and the soft shadows. */

body {
  background-color: #2b2b34;
}

.container {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.title {
  color: #dcd8d8;
}

/* the pink accents stay exactly as they are, so the theme keeps its identity */

.title-o,
.title-o:link,
.title-o:visited,
.title-o:hover,
.title-o:active,
.title-o:focus {
  color: #ff7eb6;
}

/* the pink buttons keep their colour, only the shadow deepens */

.button_1,
.button_1:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* the icon shows the theme you are in: sun for light, moon for dark */

.mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  padding: 10px 16px;

  color: #3a3a44;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.mode-toggle:hover {
  background-color: #e6dede;
  transform: translateY(-2px);
}

.mode-toggle:active {
  transform: translateY(0);
}

.mode-toggle .icon {
  display: block;
}

.mode-toggle .moon {
  display: none;

  color: #9b8fb5;
}

body.dark .mode-toggle .moon {
  display: block;

  color: #b3a8cc;
}

body.dark .mode-toggle .sun {
  display: none;
}

.mode-toggle .sun {
  color: #d98a4c;
}

body.dark .mode-toggle .sun {
  color: #f2b95f;
}

/* in dark mode the switch becomes a dark button with light text */

.mode-toggle {
  color: #ffffff;
  background-color: #1c1c22;
  border-color: rgba(255, 255, 255, 0.35);

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.mode-toggle:hover {
  background-color: #2c2c34;
}