:root {
    --background-color: #f5f5f5;
    --text-color: #333;
    --link-color: #0066cc;
    --accent-color: #4285f4;
    --accent-color-rgb: 66, 133, 244;
    --secondary-accent-color: #34a853;
    --section-background: #fff;
    --card-background: #f9f9f9;
    --header-background: linear-gradient(135deg, #4285f4, #34a853);
    --nav-background: rgba(255, 255, 255, 0.9);
    --nav-text: #333;
    --button-background: #4285f4;
    --button-text: white;
    --button-hover: #3367d6;
    --footer-background: #333;
    --footer-text: #fff;
    --border-color: #ddd;
    --progress-background: #e0e0e0;
    --progress-fill: linear-gradient(90deg, #4285f4, #34a853);
    --skill-level-bg: rgba(66, 133, 244, 0.2);
    --skill-level-text: #4285f4;
}

body.dark-mode {
    --background-color: #0a0a0a;
    --text-color: #e0e0e0;
    --link-color: #4dd0e1;
    --accent-color: #bb86fc;
    --accent-color-rgb: 187, 134, 252;
    --secondary-accent-color: #03dac6;
    --section-background: #1a1a1a;
    --card-background: #2d2d2d;
    --header-background: linear-gradient(135deg, #bb86fc, #03dac6);
    --nav-background: rgba(20, 20, 20, 0.95);
    --nav-text: #e0e0e0;
    --button-background: #bb86fc;
    --button-text: #121212;
    --button-hover: #9d4edd;
    --footer-background: #1a1a1a;
    --footer-text: #e0e0e0;
    --border-color: #444;
    --progress-background: #3d3d3d;
    --progress-fill: linear-gradient(90deg, #bb86fc, #03dac6);
    --skill-level-bg: rgba(187, 134, 252, 0.3);
    --skill-level-text: #bb86fc;
    
    animation: darkModeAnimation 0.5s ease-in-out forwards;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    background-attachment: fixed;
    color: var(--text-color);
}

@keyframes darkModeAnimation {
    0% {
        background-color: #f5f5f5;
    }
    100% {
        background-color: #121212;
    }
}

@keyframes lightModeAnimation {
    0% {
        background-color: #121212;
    }
    100% {
        background-color: #f5f5f5;
    }
}

body {
    animation: lightModeAnimation 0.5s ease-in-out forwards;
    background-color: var(--background-color);
    color: var(--text-color);
}

body.dark-mode {
    animation: darkModeAnimation 0.5s ease-in-out forwards;
    background-color: var(--bg-dark);
    color: white;
  }
  
  #darkModeToggle {
    position: fixed;
    left: 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    transition: background-color 1s ease;
    z-index: 10000;
    width: 3rem;
    height: 3rem;
    bottom: 32px;
  }
  
  body.dark-mode #darkModeToggle {
    background-color: #fff;
    color: #333;
    animation: lightModeAnimation 0.8s ease-in-out forwards;
  }
  
  #darkModeToggle:hover {
    background-color: #444;
  }
  
  body.dark-mode #darkModeToggle:hover {
    background-color: #bbb;
  }
  
  body.dark-mode footer {
    background-color: #666;
    color: white;
    animation: darkModeAnimation 0.5s ease-in-out forwards;
  }

  body.dark-mode .translation-item {
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.dark-mode .game-item {
    background-color: #333;
  }

  body.dark-mode .translation-image {
    background-color: transparent !important;
  }

  body.dark-mode .game-image {
    background-color: transparent !important;
  }

  body.dark-mode .indented-list li a {
    background-color: #333;
  }

  body.dark-mode svg {
    color: white;
  }

  body.dark-mode .indented-list li p {
    background-color: #333;
  }

  body.dark-mode div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: #333;
    color: white;
  }

  body.dark-mode .swal2-footer a {
    color: #ADD8E6;
  }

  body.dark-mode nav ul li a  {
    color: #fff;
  }

  body.dark-mode nav ul li a:hover {
      background-color: var(--card-dark);
      color: #007bff;
  }

  body.dark-mode #genshin, 
  body.dark-mode #crowdin,
  body.dark-mode #crowdin-bg,
  body.dark-mode .worldedit-st1,
  body.dark-mode .AdblockPlus-st3,
  body.dark-mode .GitLab-st1,
  body.dark-mode .st1,
  body.dark-mode .BetterDiscord-st0 {
    fill: #fff;
  }


  body.dark-mode #crowdin-sign {
    fill: #263238;
  }


body.dark-mode .progress-text {
  color: white;
}