:root {
    /* Dark Mode */
    --dark-bg: linear-gradient(91deg, rgba(5, 62, 189, 1) -40%, rgba(8, 6, 20, 1) 140%);
    --dark-text-color: #e7e8f2;
    --box-bg: #6c8cbd;
    --code-in-box: #dedfe2;
    --code-higlight: #8d0791;
    --link-color: #b52d35;
    --icon: #f8ef57;
    --tag-in-code: #ffb700;
    --blade-directives: #ac3507;
    --variable-in-code: #8d0791;
    --string-in-code: #31683c;
    --important-in-code: #85382c;
    --commented-in-code: #434345;

    /* Light mode variables */
    --light-bg: linear-gradient(90deg, rgba(17, 115, 235, 1) 0%, rgba(231, 232, 242, 1) 43%);
    --light-headlines-color: #120d2c;
    --light-text-color: #061536;
    --ligh-box-bg: #afccf4;
}

/*==============================
    Global Styles
==============================*/
body {
    font-family: "Inter", sans-serif;
    background: var(--dark-bg);
    color: var(--dark-text-color);
}

body.light-mode {
    background: var(--light-bg);
    color: var(--light-text-color);
}

.code-highlight {
    color: var(--code-higlight);
    font-size: 1rem;
}

body.light-mode code {
    font-size: 0.875em;
    color: rgb(214, 51, 132);
    word-wrap: break-word;
}

body:not(.light-mode) code {
    color: rgb(243, 199, 222);
}

/*==============================
    Sidebar Styles
==============================*/
.sidebar {
    color: var(--dark-text-color);
    height: auto; /*! Problem */
    overflow-y: auto;
}

.sidebar .nav-link {
    color: var(--dark-text-color);
    padding: 0.5rem 1rem;
}

.sidebar .nav-link:hover {
    background-color: var(--box-bg);
    border-radius: 4px;
}

body.light-mode .sidebar .nav-link:hover {
    background-color: var(--ligh-box-bg);
    color: var(--light-text-color);
}

/*==============================
    Content Styles
==============================*/

.content {
    background-color: var(--dark-bg);
    color: var(--dark-text-color);
    height: 100vh;
    overflow-y: auto;
}

body.light-mode .content h1 .content h2 .content h3 .content h4 .content h5 .content h6 {
    color: var(--light-headlines-color);
}

body:not(.light-mode) .content h1 .content h2 .content h3 .content h4 .content h5 .content h6 {
    color: white;
}

.content a {
    color: var(--link-color);
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

body.light-mode .content {
    background-color: var(--light-bg); /*! Problem ohne*/
    color: var(--light-text-color); /*! Problem ohne*/
}

/*==============================
    Search Bar & Input Styles
==============================*/

.search-bar {
    background: transparent;
}

.search-input-group {
    width: 100%;
    padding-left: 3rem;
    background: transparent;
}

.search-input-group-text {
    background: transparent;
    border: none;
    color: var(--dark-text-color);
}

.search-input {
    padding: 1rem;
    background: transparent;
    width: 75%;
    color: var(--dark-text-color);
    border: 1px solid var(--box-bg);
    border-radius: 0.375rem;
}

body.light-mode .search-bar {
    background-color: var(--light-bg);
    color: var(--light-text-color);
}

body.light-mode .search-input-group {
    background: transparent;
    color: var(--light-text-color);
}

body.light-mode .search-input {
    background: transparent;
    color: var(--light-text-color);
}

/*==============================
    Buttons
==============================*/

.btn-search {
    background: var(--dark-bg);
    padding: 1rem;
    color: var(--dark-text-color);
    border: 1px solid var(--box-bg);
    border-radius: 0.375rem;
}

.btn-search:hover {
    background: var(--dark-text-color);
    color: var(--light-text-color);
}

body.light-mode .btn-search {
    background: transparent;;
    color: var(--light-text-color);
}

body.light-mode .btn-search:hover {
    background-color: var(--light-text-color);
    color: var(--dark-text-color);
}

/*==============================
    Miscellaneous
==============================*/

.box {
    background: var(--box-bg);
}

body.light-mode .code-in-box {
    color: var(--code-in-box);
}

body:not(.light-mode) .code-in-box {
    color: var(--code-in-box);
}

.icon-btn {
    background: transparent;
    border: none;
}

.icon-btn:focus {
    outline: none;
}

/*==============================
    Scroll
==============================*/

/* Hide scrollbar on all elements */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Optional: customize scrollbar track and thumb styles */
::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
}

/* Hide scrollbar on all elements for Chrome and Firefox */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

* {
    scrollbar-width: none;
}

.tag {
    color: var(--tag-in-code);
}

/*Blade directives*/
.b-d {
    color: var(--blade-directives);
}

.var {
    color: var(--variable-in-code);
}

.s-v {
    color: var(--string-in-code);
}

/*important in code*/
.i-c {
    color: var(--important-in-code);
}

.c-c {
    color: var(--commented-in-code);
}

/*==============================
    Table
==============================*/

.table {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Optional: To make sure the table header and body are also transparent */
.table thead {
    background-color: transparent !important;
}

.table tbody {
    background-color: transparent !important;
}

.table th, .table td {
    background-color: transparent !important;
}