* {
        font-family: 'montserrat', sans-serif;
        padding: 0;
        margin: 0;
    }

    /* Preloader Settings */
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease;
    }
    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #000;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Navbar Settings */
    .navbar-brand {
      font-weight: bold;
      letter-spacing: 1px;
      color: #ffc107;
    }
    .nav-link {
      font-weight: 500;
      color: #f1f1f1;
    }

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

    /* Dark Mode Styles */
    .dark-mode {
    background-color: #121212 !important;
    color: #f1f1f1 !important;
    }

    .dark-mode .navbar {
    background-color: #1f1f1f !important;
    }

    .dark-mode .nav-link {
    color: #f1f1f1 !important;
    }

    .dark-mode .nav-link.active {
    color: #ffc107 !important;
    }

    .dark-mode .btn {
    border-color: #f1f1f1 !important;
    color: #f1f1f1 !important;
    }

    .dark-mode .navbar-brand {
    color: #f1f1f1 !important;
    }

    .dark-mode #contact {
      background-color: #121212 !important;
      color: #f1f1f1 !important;
    }

    .dark-mode #contact input,
    .dark-mode #contact textarea {
      background-color: #1e1e1e !important;
      color: #fff !important;
      border: 1px solid #333 !important;
    }

    .dark-mode #contact .form-label {
      color: #ddd !important;
    }

    .dark-mode #socials {
      color: #f1f1f1 !important;
    }

    .dark-mode #socials a {
      color: #f1f1f1 !important;
    }

    .dark-mode #footer {
      background-color: #121212 !important;
      color: #f1f1f1 !important;
    }

    .dark-mode #footer a {
      color: #f1f1f1 !important;
    }
 
    .song-card {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .song-card:hover {
      transform: scale(1.03);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
    }

    .object-cover {
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    #socials a:hover {
      animation: bounce 0.4s ease;
    }