@font-face {
    display: swap;
    font-style: normal;
    font-family: 'Bricolage Grotesque';
    font-weight: 100 900;
    src: url('../fonts/BricolageGrotesque.ttf') format('truetype');
}

@font-face {
    display: swap;
    font-style: normal;
    font-family: 'JetBrains Mono';
    font-weight: 400 900;
    src: url('../fonts/JetBrainsMono.ttf') format('truetype');
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: bold;
    font-family: 'Bricolage Grotesque', 'Noto Sans Arabic', sans;
}

.lead {
    font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
    .display-1 {
        font-size: 3.5rem !important;
    }

    .display-2 {
        font-size: 3rem !important;
    }

    .display-3 {
        font-size: 2.75rem !important;
    }

    .display-4 {
        font-size: 2.5rem !important;
    }

    .display-5 {
        font-size: 2.25rem !important;
    }

    .display-6 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }
}

/* ---------------------------------
 * Utility Classes
 * --------------------------------- */

.text-underline-primary {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-azure-rgb), 0.2);
}

.text-underline-secondary {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-secondary-color-rgb), 0.2);
}

.text-underline-success {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-success-color-rgb), 0.2);
}

.text-underline-danger {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-danger-color-rgb), 0.2);
}

.text-underline-warning {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-warning-color-rgb), 0.2);
}

.text-underline-info {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-info-color-rgb), 0.2);
}

.text-underline-azure {
    text-decoration: underline;
    text-decoration-color: rgba(var(--tblr-azure-rgb), 0.2);
}

/* ---------------------------------
 * Code Highlighting
 * --------------------------------- */

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    --tblr-font-monospace: 'JetBrains Mono', 'Space Mono', 'IBM Plex Mono', 'Source Code Pro', 'Courier New', monospace;
}

pre {
    direction: ltr;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 1rem;
}

pre,
pre code {
    color: #24292e;
    background-color: #fff;
}

.hl-keyword {
    color: #d73a49;
}

.hl-property {
    color: #34a853;
}

.hl-attribute {
    font-style: italic;
}

.hl-type {
    color: #ea4334;
}

.hl-generic {
    color: #9d3af6;
}

.hl-value {
    color: #032f62;
}

.hl-literal {
    color: #032f62;
}

.hl-number {
    color: #032f62;
}

.hl-variable {
    color: #e36209;
}

.hl-comment {
    color: #6a737d;
}

.hl-blur {
    filter: blur(2px);
}

.hl-strong {
    font-weight: bold;
}

.hl-em {
    font-style: italic;
}

.hl-addition {
    display: inline-block;
    min-width: 100%;
    background-color: #00ff0022;
}

.hl-deletion {
    display: inline-block;
    min-width: 100%;
    background-color: #ff000011;
}

.hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: #555;
    padding: 0 1ch;
    margin-right: 1ch;
    user-select: none;
}

.hl-gutter-addition {
    background-color: #34a853;
    color: #fff;
}

.hl-gutter-deletion {
    background-color: #ea4334;
    color: #fff;
}

/* ---------------------------------
 * Base Layout
 * --------------------------------- */

:root {
    --tblr-body-color: #121212;

    --tblr-primary: #080808;
    --tblr-primary-rgb: 8, 8, 8;
}

.navbar .nav-item .nav-link {
    color: var(--tblr-body-color);
    font-weight: 500;
}

footer {
    background-color: var(--tblr-bg-surface);
    border-top: 1px solid var(--tblr-border-color);
}

footer .nav .nav-item .nav-link:hover {
    background-color: unset;
    color: var(--tblr-primary);
}