html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

form > button.icon-link, button.delete-post-btn {
    padding: 8px 10px;
    display: flex; /* Enables flexbox */
    align-items: center; /* Vertically centers the content */
    text-decoration: none; /* Removes underline from the link */
    cursor: pointer;
    border: none; /* Removes default button border */
    background: none; /* Removes default button background */
    width: 100%; /* Makes sure the button takes up the full width of the parent */
    /* Add any additional button styling here */
}

    form > button.icon-link > ion-icon, button.delete-post-btn > ion-icon {
        margin-right: 8px; /* Adds space between the icon and text */
    }

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1a1a1a !important;
    }

    .text-black {
        color: #e0e0e0 !important;
    }

    .text-gray-500\/80 {
        color: #a0a0a0 !important;
    }

    .border1 {
        border-color: #333 !important;
    }

    .button-icon, .like-button, .favorite-button {
        background-color: #2a2a2a !important;
        color: #b0b0b0 !important;
    }

        .like-button.text-red-500 {
            color: #f87171 !important;
            background-color: #2a2a2a !important;
        }

        .favorite-button.text-orange-500 {
            color: #f97316 !important;
            background-color: #2a2a2a !important;
        }

    .text-red-400 {
        color: #f87171 !important;
    }

    .icon-link:hover {
        background-color: #333 !important;
    }

    textarea {
        color: #e0e0e0 !important;
    }

    .bg-secondery {
        background-color: #4b5563 !important;
        color: #e0e0e0 !important;
    }

    .border-gray-100 {
        border-color: #2a2a2a !important;
    }

    .shadow-sm {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }
    header {
        background-color: #1a1a1a !important;
        border-bottom-color: #333 !important;
    }

    #logo span {
        color: #e0e0e0 !important;
    }

    .bg-white\/80 {
        background-color: #2a2a2a !important;
    }

    .text-black {
        color: #e0e0e0 !important;
    }

    .hover\:bg-gray-100:hover {
        background-color: #333 !important;
    }

    .bg-secondery {
        background-color: #4b5563 !important;
    }

    .bg-pink-100\/60 {
        background-color: #2a2a2a !important;
    }

    .hover\:bg-pink-100:hover {
        background-color: #333 !important;
    }

    .stroke-pink-600 {
        stroke: #f472b6 !important;
    }

    .fill-pink-200\/70 {
        fill: #f472b6 !important;
    }

    input[type="text"] {
        color: #e0e0e0 !important;
    }

    .bg-slate-100 {
        background-color: #2a2a2a !important;
    }

    .border2 {
        border-color: #333 !important;
    }

    .text-blue-600 {
        color: #60a5fa !important;
    }

    .hover\:bg-secondery:hover {
        background-color: #4b5563 !important;
    }

    .shadow {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
}