/* Import Rubik font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

/* Apply Rubik font globally */
body {
    background-color: #fbfbfb;
}

body, .md-typeset,
.md-nav__title, 
.md-nav__link, 
.md-nav__item {
    font-family: 'Rubik', sans-serif;
    font-size: 12pt;
}

button, input, textarea, select {
    font-family: 'Rubik', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* Increase main content width */
.md-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.md-grid {
    width: 100%;
    min-width: auto;
    max-width: 100%;
}

.md-main {
    width: 100%;
}

/* Increase content area specifically */
.md-content {
    max-width: 100%;
    padding: 0;
    margin: 0;
    background-color: white;
}

.md-article {
    background-color: white;
}

.md-typeset h1, 
.md-typeset h2, 
.md-typeset h3, 
.md-typeset h4, 
.md-typeset h5, 
.md-typeset h6 {
    font-weight: bold !important;
}

div.md-header__topic {
    font-weight: bold;
    font-size: 1.5em;
}

h1, 
.md-typeset h1 {
    color: #4A148C; 
}

h2, 
.md-typeset h2 {
    color: #6A1B9A; 
}

h3, 
.md-typeset h3 {
    color: #7B1FA2; 
}

h4, 
.md-typeset h4 {
    color: #8E24AA; 
}

h5, 
.md-typeset h5 {
    color: #9C27B0; 
}

.md-typeset__table > table th {
    color: #9C27B0;
}

/* Style the ✗ symbol in red */
.red-x {
    color: red;
    font-weight: bolder;
}

/* Increase md-content text size */
.md-typeset {
    font-size: 14pt;
    line-height: 1.75;
}

.md-typeset p {
    font-size: 14pt;
    margin-bottom: 1.5em;
}

.md-typeset li {
    font-size: 14pt;
}

.md-typeset code {
    font-size: 16px;
}

/* Increase header height */
.md-header {
    height: 3.25rem;
}

.md-header__inner {
    padding: 0.5rem 1rem;
}

.md-header-nav {
    padding: 0.5rem 0;
}

/* Sidebar styling */
.md-sidebar--primary {
    background-color: #fbfbfb !important;
}

.md-sidebar--secondary {
    background-color: #fbfbfb !important;
}

/* Mobile-friendly responsive design */
@media (max-width: 768px) {
    body, .md-typeset,
    .md-nav__title, 
    .md-nav__link, 
    .md-nav__item {
        font-size: 11pt;
    }

    .md-container {
        width: 100%;
        padding: 0.5rem;
    }

    .md-typeset {
        font-size: 13pt;
    }

    .md-typeset p {
        font-size: 13pt;
        margin-bottom: 1rem;
    }

    .md-typeset li {
        font-size: 13pt;
    }

    .md-header {
        height: auto;
    }

    .md-header__inner {
        padding: 0.25rem 0.5rem;
    }

    .md-typeset__table > table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    body, .md-typeset,
    .md-nav__title, 
    .md-nav__link, 
    .md-nav__item {
        font-size: 10pt;
    }

    .md-container {
        width: 100%;
        padding: 0.25rem;
    }

    div.md-header__topic {
        font-size: 1.25em;
    }

    .md-typeset {
        font-size: 12pt;
        line-height: 1.6;
    }

    .md-typeset p {
        font-size: 12pt;
        margin-bottom: 0.75rem;
    }

    .md-typeset li {
        font-size: 12pt;
    }

    .md-typeset h1 {
        font-size: 1.5em;
    }

    .md-typeset h2 {
        font-size: 1.3em;
    }

    .md-typeset h3 {
        font-size: 1.1em;
    }

    .md-typeset code {
        font-size: 11px;
    }
}