/* import all stylesheets from the css folder and put css specific to each area in those files */

/* import component stylesheets */
@import "css/components/buttons.css";
@import "css/components/discover-topic-cards.css";
@import "css/components/discussion-cards.css";
@import "css/components/discussion-comments.css";
@import "css/components/episode-cards.css";
@import "css/components/library-cards.css";
@import "css/components/navbar.css";
@import "css/components/page-title.css";
@import "css/components/match-rating.css";
@import "css/components/modals.css";
@import "css/components/pagination.css";
@import "css/components/review-cards.css";
@import "css/components/tabs.css";

/* import page stylesheets */
@import "css/pages/episode-details.css";
@import "css/pages/onboarding-success.css";
@import "css/pages/profile.css";

/* import global stylesheets */
@import "css/forms.css";
@import "css/typography.css";
@import "css/variables.css";

/* this is the only style that belongs in this file */
body {
    background-color: var(--black) !important;
    margin-bottom: var(--xxl);
    padding-top: 60px; /* Adjust this value based on navbar height */
}