body {
    margin: 0;
}

/* CSS for the fade-in and fade-out animations */
.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

dialog::backdrop {
    background: rgb(0 0 0 / 70%);
}

/* Assuming you're using Tailwind CSS, this will hide the close button on screens wider than 750px */
#closeSidebar {
    display: none;
}

@media screen and (max-width: 750px) {
    #closeSidebar {
        display: inline-block;
    }
}