/* Dark Theme Styles */
body {
    background-color: #121212;
    color: #e0e0e0;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

a {
    color: #bb86fc;
}

a:hover {
    color: #3700b3;
}

.nav {
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
}

.nav-link {
    color: #e0e0e0;
}

.nav-link:hover {
    color: #ffffff;
}

.container {
    background-color: #1e1e1e;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

button {
    background-color: #bb86fc;
    color: #121212;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #3700b3;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dropdown-content {
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.1);
}

.dropdown-content a {
    color: #e0e0e0;
}

.dropdown-content a:hover {
    background-color: #333;
}

.full-profile-pic {
  border: 3px solid #bb86fc;
}

.step-number {
  background-color: #bb86fc;
  color: #121212;
}

.step-number::after {
  background-color: #bb86fc;
  box-shadow: 0 0 0 10px #bb86fc;
}

.write-story-container input[type="text"],
.write-story-container textarea {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

.write-story-container input[type="text"]:focus,
.write-story-container textarea:focus {
  border-color: #bb86fc;
  box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25);
}

.write-story-container label {
  color: #e0e0e0;
}

.story-content {
  background-color: #1e1e1e;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.story-item {
  border-bottom: 1px solid #333;
}

.story-item h3 a {
  color: #e0e0e0;
}

.story-item h3 a:hover {
  color: #bb86fc;
}

.story-item p {
  color: #a0a0a0;
}

#sort-stories {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
}

.profile-pic {
  border: 3px solid #bb86fc;
}

.upload-pic {
  color: #bb86fc;
}

.upload-pic:hover {
  color: #3700b3;
}

.bio-section p {
  color: #a0a0a0;
}

.edit-bio {
  color: #bb86fc;
}

.edit-bio:hover {
  color: #3700b3;
}

#bioInput {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

.story {
  background: #333;
  border: 1px solid #555;
}

.story h3 {
  color: #bb86fc;
}

.story h3:hover {
  color: #3700b3;
}

.story p {
  color: #a0a0a0;
}

.delete-button {
  background-color: #cf6679;
}

.delete-button:hover {
  background-color: #b00020;
}

.story-lineage {
  color: #a0a0a0;
}

.social-button {
    color: #a0a0a0;
}

.social-button:hover {
    color: #bb86fc;
}

.mission-container {
  background-color: #1e1e1e;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.mission-container p {
  color: #a0a0a0;
}

.mission-container li {
  color: #a0a0a0;
}

.mission-container li strong {
  color: #e0e0e0;
}

.profile-photo {
  border: 3px solid #bb86fc;
}

.welcome {
  background-color: #1e1e1e;
}

.welcome p {
  color: #a0a0a0;
}

.story-page {
  border: 1px solid #333;
  background-color: #1e1e1e;
}

.story-page p {
  color: #a0a0a0;
}

footer {
  background-color: #1e1e1e;
  color: #a0a0a0;
  border-top: 1px solid #333;
}

footer a {
  color: #bb86fc;
}

footer a:hover,
footer a:focus {
  color: #3700b3;
}

.social-media-buttons button {
    color: #a0a0a0;
}

.social-media-buttons button:hover {
    color: #bb86fc;
}

.register-page, .login-page {
  background-color: #1e1e1e;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.form-group label {
  color: #e0e0e0;
}

.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"] {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

.form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="password"]:focus {
  border-color: #bb86fc;
  box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25);
}

button[type="submit"] {
  background-color: #bb86fc;
  color: #121212;
}

button[type="submit"]:hover {
  background-color: #3700b3;
  color: #ffffff;
}

.register-page, .login-page {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
}

.register-page h1, .login-page h1 {
  margin-top: 0;
  font-weight: bold;
  font-size: 24px;
}

.google-signin-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.or-divider {
    text-align: center;
    margin: 20px 0;
    color: #a0a0a0;
}