body {
      background-color: #0d0811;
      color: #f2eff5;
      font-family: "Inter", sans-serif;
    }
    
    /* Navbar color */
    .navbar {
      background-color: #0d0811 !important;
    }
    
    .dropdown {
      top: 5px;
    }
    
    /* Style for dropdown menu */
    .dropdown-menu {
      background-color: #1e1a27; /* Dark background for the dropdown */
      border: none; /* Remove default border */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    }
    
    /* Style for dropdown items */
    .dropdown-menu .dropdown-item {
      color: #f2eff5; /* Light color for the items */
      font-family: "Inter", sans-serif; /* Consistent font usage */
    }
    
    /* Hover effect for dropdown items */
    .dropdown-menu .dropdown-item:hover {
      background-color: #532283; /* Purple color on hover */
      color: #f2eff5; /* Ensure text color is consistent */
    }
    
    /* Style the profile person icon */
    .profile-icon {
      font-size: 28px;
      color: #f2eff5;
    }
    
    .search-container {
        margin-top: 20px;
    }
    
    .search-form {
        display: flex;
        align-items: center;
    }
    
    .search-input {
        flex: 1;
        border: none;
        border-radius: 5px;
        padding: 10px;
        background-color: #1e1a27;
        color: #f2eff5;
    }
    
    .search-button {
        background-color: #8f41dd;
        border: none;
        border-radius: 5px;
        color: #f2eff5;
        padding: 10px 20px;
        margin-left: 10px;
        cursor: pointer;
    }
    
    .search-button:hover {
        background-color: #532283;
    }
    
    /* Improved styles for the cards */
    .card {
      height: 100%;
      margin-bottom: 20px;
      background-color: #1e1a27;
      border: none; /* Remove a borda do card */
      overflow: hidden; /* Evita que a sombra se estenda além do card */
      transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions for hover effect */
    }
    
    /* Style for card titles */
    .card-title {
      color: #b694d9;
    }
    
    /* Style for card text */
    .card-text {
      color: #f2eff5;
    }
    
    /* Style for card buttons */
    .card-button {
      background-color: #8f41dd;
      border: none;
      color: #f2eff5;
      border-radius: 0; /* Remove o border-radius */
      padding: 10px 20px;
      cursor: pointer;
    }
    
    .card-button:hover {
      background-color: #532283;
    }
    
    /* Adicione estas regras de estilo ao seu arquivo styles.css */
    .card-img-top {
      object-fit: cover;
      height: 400px;
      width: 100%;
    }
    
    /* Adicione estas regras de estilo ao seu arquivo styles.css */
    .card-footer {
      position: relative;
    }
    
    .card-button {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    
    /* Adiciona a animação de aumento da sombra apenas no hover */
    .card:hover {
      transform: translateY(-5px); /* Slight lift effect on hover */
      box-shadow: 0 0 20px rgba(239, 14, 209, 0.8); /* Adiciona a sombra no hover */
    }
    
    /* Style for category tag bubbles */
    .card-categories {
      margin-top: 10px;
    }
    
    .card-categories .badge {
      background-color: #8f41dd;
      color: #f2eff5;
      border-radius: 50px;
      padding: 5px 10px;
      margin-right: 5px;
      font-size: 14px;
      display: inline-block;
      margin-bottom: 5px;
    }
    
    /* Center the brand in the middle of the navbar */
    .navbar .navbar-brand {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 100;
      font-size: 24px;
      background: -webkit-linear-gradient(#8f41dd, #8f41dd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px #8f41dd; /* Adiciona borda roxa às letras */
    }
    
    /* Sidebar styles */
    .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #0d0811;
      overflow-x: hidden;
      transition: 0.3s;
      padding-top: 60px;
      z-index: 3;
    }
    
    .sidebar a {
      padding: 15px;
      text-decoration: none;
      font-size: 20px;
      color: #f2eff5;
      display: block;
      transition: 0.2s;
    }
    
    .sidebar a:hover {
      background-color: #532283;
    }
    
    .sidebar.show {
      width: 250px;
    }
    
    /* Hamburger menu icon */
    .hamburger-menu {
      display: none;
      font-size: 30px;
      color: #f2eff5;
      position: absolute;
      top: 15px;
      left: 15px;
      cursor: pointer;
      z-index: 4;
    }
    
    .hamburger-menu:hover {
      color: #8f41dd;
    }
    
    @media (max-width: 768px) {
      .navbar-nav {
        display: none;
      }
    
      .navbar-nav.show {
        display: block;
      }
    
      .sidebar {
        width: 0;
        transition: none;
      }
    
      .navbar-toggler {
        display: none;
      }
    
      .navbar-collapse {
        background-color: #0d0811;
        padding: 15px;
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        transition: 0.3s;
        z-index: 2;
      }
    
      .navbar-toggler:focus {
        outline: none;
      }
    
      .navbar-toggler-icon {
        background-color: #f2eff5;
      }
    
      .navbar-toggler-icon:active {
        background-color: #f2eff5;
      }
    
      .navbar-toggler:focus .navbar-toggler-icon {
        background-color: #f2eff5;
      }
    
      .navbar-toggler.show + .navbar-collapse {
        left: 250px;
      }
    
      .navbar-collapse.show + .sidebar {
        width: 250px;
      }
    
      /* Move the brand to the left */
      .navbar .navbar-brand {
        position: absolute;
        left: 55px;
        top: 15px;
        transform: none;
        font-weight: 100;
        font-size: 24px;
        background: -webkit-linear-gradient(#8f41dd, #8f41dd);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #8f41dd; /* Adiciona borda roxa às letras */
      }
    
      /* Show the hamburger menu on smaller screens */
      .navbar .hamburger-menu {
        display: block;
      }
    }
    
    /* Custom container styles for larger screens */
    @media (min-width: 769px) {
      .custom-container {
        margin: 20px auto; /* Centraliza o container */
        max-width: 1500px; /* Define uma largura máxima para o container */
      }
    }
    
    /* Custom styles for card rows */
    .row > [class*='col-'] {
      margin-bottom: 30px; /* Adjust this value to increase or decrease the space */
    }
    
    /* Ensure pagination container is scrollable on smaller screens */
    .modern-pagination .pagination {
        display: flex;
        list-style: none;
        padding-left: 0;
        margin: 20px 0;
        justify-content: center;
        overflow-x: auto; /* Make it scrollable horizontally */
        white-space: nowrap; /* Prevent pagination items from wrapping to the next line */
    }
    
    .modern-pagination .page-item {
        margin: 0 3px;
    }
    
    .modern-pagination .page-link {
        color: #f2eff5;
        background-color: #1e1a27;
        border: 1px solid #343a40;
        padding: 5px 10px;
        line-height: 1.5;
        border-radius: 4px;
        text-decoration: none;
    }
    
    .modern-pagination .page-link:hover {
        color: #fff;
        background-color: #532283;
        border-color: #4a4a4a;
    }
    
    .modern-pagination .active .page-link {
        color: #fff;
        background-color: #8f41dd;
        border-color: #8f41dd;
    }
    
    .modern-pagination .disabled .page-link {
        color: #6c757d;
        background-color: #1e1a27;
        border-color: #343a40;
        pointer-events: none;
        cursor: not-allowed;
    }
    
    .search-container {
        margin-top: 20px;
    }
    
    .search-row {
        display: flex;
        align-items: center;
    }
    
    .search-input {
        flex-grow: 1;
        border: none;
        border-radius: 5px;
        padding: 10px;
        background-color: #1e1a27;
        color: #f2eff5;
        margin-right: 2px;
    }
    
    .search-button {
        background-color: #8f41dd;
        border: none;
        border-radius: 5px;
        color: #f2eff5;
        padding: 10px 20px;
        cursor: pointer;
    }
    
    .search-button:hover {
        background-color: #532283;
    }
    
    .category-form {
        margin-top: 10px; /* Add some space between the search form and the category dropdown */
        display: flex; /* Aligns the dropdown and potential additional elements */
    }
    
    .category-select {
        flex-grow: 1; /* Allows the category dropdown to take up available horizontal space */
        border: none;
        border-radius: 5px;
        padding: 10px;
        background-color: #1e1a27;
        color: #f2eff5;
        cursor: pointer;
    }
    
    .category-select:focus {
        outline: none;
    }
    
    /* Icon Styles */
    .icon-plus, .icon-heart {
        position: absolute;
        z-index: 2;
        color: rgba(255, 255, 255, 0.85); /* Slightly increased opacity for better visibility */
        font-size: 2rem;
        border: none;
        background: none;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, /* Outer black shadow */
                     0 0 3px #8f41dd, /* Inner purple glow, reduced intensity */
                     0 0 5px #8f41dd;
    }
    
    .icon-plus {
        top: 5px; /* Adjust as needed */
        right: 10px;
    }
    
    .icon-heart {
        top: 10px;
        left: 10px;
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
    }
    
    /* Class for when the icon is clicked */
    .icon-heart-clicked i {
        color: #7a4495; /* Deeper shade of purple for clicked state */
        animation: pop 0.6s ease;
    }
    
    /* Keyframes for pop effect */
    @keyframes pop {
        0% {
            transform: scale(0.8); /* Start from a slightly shrunken state */
            color: rgba(255, 255, 255, 0.7);
        }
        50% {
            transform: scale(1.2); /* Grow larger than normal for the pop effect */
            color: #7a4495;
        }
        100% {
            transform: scale(1); /* Return to normal size */
            color: #7a4495;
        }
    }
    
    .particle {
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #8f41dd;
        border-radius: 50%;
        pointer-events: none; /* Ignore mouse events */
    }
    
    #toast-container .toast {
        background-color: #1e1a27; /* Dark background */
        color: #f2eff5; /* Light text */
    }
    
    #toast-container .toast .btn-close {
        color: #f2eff5; /* Light close button */
    }
    
    #loginPromptModal .modal-body {
        padding-bottom: 0; /* Reduce padding at the bottom of the modal body */
    }
    
    /* Modal Styles */
    #addToFolderModal .modal-content, #loginPromptModal .modal-content {
        background-color: #1e1a27;
        color: #f2eff5;
        border-color: #6c757d; /* For a subtle border */
    }
    
    #addToFolderModal .modal-header, #loginPromptModal .modal-header {
        border-bottom: 1px solid #6c757d; /* Gray line for header */
    }
    
    #addToFolderModal .modal-footer, #loginPromptModal .modal-footer {
        border-top: none; /* No border for the footer */
    }
    
    #addToFolderModal .btn-close, #loginPromptModal .btn-close {
        filter: invert(1); /* Invert color for visibility */
    }
    
    #addToFolderModal .btn-primary, #loginPromptModal .btn-primary {
        background-color: #8f41dd;
        border-color: #8f41dd;
    }
    
    #addToFolderModal .btn-primary:hover, #loginPromptModal .btn-primary:hover {
        background-color: #532283;
        border-color: #532283;
    }
    
    #addToFolderModal .btn-secondary, #loginPromptModal .btn-secondary {
        background-color: #343a40;
        border-color: #343a40;
    }
    
    #addToFolderModal .btn-secondary:hover, #loginPromptModal .btn-secondary:hover {
        background-color: #23272b;
        border-color: #23272b;
    }
    
    /* List group styles for folder list */
    #addToFolderModal .list-group-item {
        background-color: #2c2738; /* Slightly lighter than the modal background */
        color: #f2eff5;
        border: 1px solid #3e374f; /* Subtle border for list items */
    }
    
    #addToFolderModal .form-check-input {
        accent-color: #8f41dd; /* Color for checkboxes */
    }
    
    /* Form styles in modal footer */
    #addToFolderModal .form-control, #addToFolderModal .form-select {
        background-color: #3e374f;
        color: #f2eff5;
        border: 1px solid #6c757d;
    }
    
    #addToFolderModal .form-control:focus, #addToFolderModal .form-select:focus {
        background-color: #3e374f;
        color: #f2eff5;
        border-color: #8f41dd; /* Highlight color on focus */
        box-shadow: 0 0 0 0.25rem rgba(143, 65, 221, 0.25);
    }
    
    /* Change placeholder color */
    #addToFolderModal .form-control::placeholder {
        color: white; /* Light purple color for placeholder */
        opacity: 0.6; /* Ensure it's not semi-transparent */
    }
    
    /* Style for folder list items */
    #addToFolderModal .list-group-item {
        display: flex;
        justify-content: space-between; /* Align content and icons */
        align-items: center;
    }
    
    /* Style for folder names to handle overflow */
    #addToFolderModal .list-group-item .folder-name {
        flex-grow: 1;
        white-space: nowrap; /* Prevent wrapping */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Add ellipsis to overflow */
        margin-right: 10px; /* Space between text and icon */
    }
    
    /* Custom Checkbox Styles */
    #addToFolderModal .form-check-input {
        width: 20px; /* Larger width */
        height: 20px; /* Larger height */
        margin-top: -0.2rem; /* Adjust vertical alignment */
        margin-bottom: -0.2rem;
        vertical-align: middle; /* Align vertically */
        background-color: #3e374f;
        border-color: #8f41dd; /* Border color */
    }
    
    /* Custom style for checked state */
    #addToFolderModal .form-check-input:checked {
        background-color: #8f41dd; /* Background color when checked */
        border-color: #8f41dd; /* Border color when checked */
    }
    
    /* Custom style for checkbox focus (clicked) effect */
    #addToFolderModal .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem rgba(143, 65, 221, 0.25); /* Focus shadow with your theme color */
    }
    
    /* Adjust label alignment to match the larger checkbox */
    #addToFolderModal .form-check-label {
        line-height: 20px; /* Adjust line height to match checkbox height */
    }
    /* Estilo do botão de rolagem para o topo */
    #scrollToTopButton {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: #6f42c1; /* Cor roxa para combinar com o tema do site */
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      transition: background-color 0.3s, box-shadow 0.3s;
    }
    
    #scrollToTopButton:hover {
      background-color: #5a369b; /* Cor um pouco mais escura para o hover */
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    /* Criando a seta estilizada apontando para cima */
    #scrollToTopButton::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      border-width: 0 6px 6px 6px;
      border-style: solid;
      border-color: transparent transparent white transparent;
      transform: translate(-50%, -50%);
    }
    
    .disabled-content {
        pointer-events: none; /* Desativa a interação */
        opacity: 0.5; /* Diminui a opacidade para parecer desativado */
    }