.top-align {
    align-self: start;
}


.code-block {
    background-color: #3b3b3b;
    color: #f8f8f2 !important;
    border-radius: 8px;
    border: 1px solid #444;
    padding: 12px 12px 6px;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Fix any unwanted white background inside */
.code-block pre, .code-block code {
    background: transparent !important; /* Ensure transparency */
    color: inherit;
    border: none;
}

/* Syntax highlighting */
.code-block .hljs-keyword {
    color: #cc7832;
}

/* Orange for keywords */
.code-block .hljs-string {
    color: #a5c261;
}

/* Green for strings */
.code-block .hljs-number {
    color: #6897bb;
}

/* Blue for numbers */
.code-block .hljs-comment {
    color: #808080;
    font-style: italic;
}

/* Gray for comments */
.code-block .hljs-function {
    color: #ffc66d;
}

/* Yellow for functions */
.code-block .hljs-operator {
    color: #e8bf6a;
}

/* Gold for operators */
.code-block .hljs-built_in {
    color: lime;
}

/* Gold for operators */
.code-block .hljs-title {
    color: #ffc66d;
}

/* Light golden-yellow */


/* Base Styles - Modern Compact Font */
body {
    font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #d4d4d4;
    background-color: #2b2b2b;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100vw;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.3;
}

h1 {
    font-size: 24px;
    color: #ffcc66; /* Golden-Yellow */
}

h2 {
    font-size: 22px;
    color: #ffa657; /* Soft Orange */
}

h3 {
    font-size: 20px;
    color: #9cdcfe; /* Light Blue */
}

h4 {
    font-size: 18px;
    color: #c586c0; /* Soft Purple */
}

h5 {
    font-size: 16px;
    color: #dcdcaa; /* Pale Yellow */
}

h6 {
    font-size: 14px;
    color: #bbbbbb; /* Light Gray */
}

/* Lists */
ul, ol {
    padding-left: 20px;
    margin: 10px 0;
}

ul li, ol li {
    margin-bottom: 6px;
}

ul li::marker {
    color: #ffa657; /* Soft Orange */
}

ol li::marker {
    color: #9cdcfe; /* Light Blue */
}

/* Blockquotes */
blockquote {
    border-left: 4px solid #ffa657;
    padding-left: 12px;
    font-style: italic;
    color: #bbbbbb;
    margin: 10px 0;
}

/* Code Blocks */
pre, code {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 4px 6px;
    border-radius: 6px;
}

/* Inline Code */
code {
    background: #2d2d2d;
    color: #c586c0;
    padding: 2px 4px;
    border-radius: 4px;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

th, td {
    padding: 8px;
    border: 1px solid #555;
    text-align: left;
}

th {
    background: #3c3c3c;
    color: #ffffff;
    font-weight: 600;
}

/* Links */
a {
    color: #ffcc66;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Buttons */
button {
    background: #ffa657;
    color: #1e1e1e;
    font-size: 14px;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background: #ff8c42;
}

/* Labels */
.label {
    font-size: 14px;
    font-weight: 600;
    color: #ffcc66; /* Golden-Yellow */
    display: block;
    margin-bottom: 4px;
}

/* Label alignment */
.label-inline {
    display: inline-block;
    margin-right: 8px;
}

.label-top {
    display: block;
    margin-bottom: 6px;
}

/* Enhanced Form Styling */
.form-group {
    margin-bottom: 12px;
}

.form-check-label {
    color: #ffcc66; /* Golden-Yellow */
    font-weight: 500;
}

/* Hover effect */
.label:hover {
    color: #ffa657; /* Soft Orange */
    cursor: pointer;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
    color: black;
}

/* Utility Color Overrides */
.bg-primary {
    background-color: #ffcc66 !important; /* Golden-Yellow */
}

.bg-secondary {
    background-color: #ffa657 !important; /* Soft Orange */
}

.bg-tertiary {
    background-color: #9cdcfe !important; /* Light Blue */
}

.bg-accent {
    background-color: #c586c0 !important; /* Soft Purple */
}

.bg-muted {
    background-color: #3c3c3c !important; /* Dark Gray */
}

/* Text Colors */
.text-primary {
    color: #ffcc66 !important;
}

.text-secondary {
    color: #ffa657 !important;
}

.text-tertiary {
    color: #9cdcfe !important;
}

.text-accent {
    color: #c586c0 !important;
}

.text-muted {
    color: #bbbbbb !important;
}

/* Borders */
.border-primary {
    border-color: #ffcc66 !important;
}

.border-secondary {
    border-color: #ffa657 !important;
}

.border-tertiary {
    border-color: #9cdcfe !important;
}

.border-accent {
    border-color: #c586c0 !important;
}

.border-muted {
    border-color: #444 !important;
}

/* Primary Button */
.btn-primary {
    background-color: #ffcc66 !important; /* Golden-Yellow */
    color: #1e1e1e !important;
    border: none;
}

.btn-primary:hover {
    background-color: #e6b84d !important;
}

/* Secondary Button */
.btn-secondary {
    background-color: #ffa657 !important; /* Soft Orange */
    color: #1e1e1e !important;
    border: none;
}

.btn-secondary:hover {
    background-color: #ff8c42 !important;
}

/* Tertiary Button */
.btn-tertiary {
    background-color: #9cdcfe !important; /* Light Blue */
    color: #1e1e1e !important;
    border: none;
}

.btn-tertiary:hover {
    background-color: #76c8f3 !important;
}

/* Accent Button */
.btn-accent {
    background-color: #c586c0 !important; /* Soft Purple */
    color: #1e1e1e !important;
    border: none;
}

.btn-accent:hover {
    background-color: #b06aad !important;
}

/* Muted/Neutral Button */
.btn-muted {
    background-color: #3c3c3c !important; /* Dark Gray */
    color: #d4d4d4 !important;
    border: 1px solid #555 !important;
}

.btn-muted:hover {
    background-color: #4a4a4a !important;
}

/* Border Primary */
.border-primary {
    border: 1px solid #ffcc66 !important; /* Golden-Yellow */
}

/* Border Secondary */
.border-secondary {
    border: 1px solid #ffa657 !important; /* Soft Orange */
}

/* Border Tertiary */
.border-tertiary {
    border: 1px solid #9cdcfe !important; /* Light Blue */
}

/* Border Accent */
.border-accent {
    border: 1px solid #c586c0 !important; /* Soft Purple */
}

/* Border Muted */
.border-muted {
    border: 1px solid #444 !important; /* Dark Gray */
}

/* Border Transparent */
.border-transparent {
    border: 1px solid transparent !important;
}

/* Border Emphasis */
.border-emphasis {
    border: 2px solid #ff8c42 !important; /* Emphasized Soft Orange */
}

/* Text Primary */
.text-primary {
    color: #ffcc66 !important; /* Golden-Yellow */
}

/* Text Secondary */
.text-secondary {
    color: #ffa657 !important; /* Soft Orange */
}

/* Text Tertiary */
.text-tertiary {
    color: #9cdcfe !important; /* Light Blue */
}

/* Text Accent */
.text-accent {
    color: #c586c0 !important; /* Soft Purple */
}

/* Text Muted */
.text-muted {
    color: #bbbbbb !important; /* Light Gray */
}

/* Text Strong */
.text-strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Text Subtle */
.text-subtle {
    color: #888888 !important;
}

/* Text Danger */
.text-danger {
    color: #ff5555 !important; /* Vivid Red */
}

/* Text Success */
.text-success {
    color: #a5c261 !important; /* Soft Green */
}

/* Text Warning */
.text-warning {
    color: #e8bf6a !important; /* Gold */
}

/* Link Styles */
a,
.link {
    color: #ffcc66 !important; /* Golden-Yellow */
    text-decoration: none;
}

a:hover,
.link:hover {
    color: #ffa657 !important; /* Soft Orange */
    text-decoration: underline;
}

a:visited,
.link:visited {
    color: #c586c0 !important; /* Soft Purple */
}

a:active,
.link:active {
    color: #9cdcfe !important; /* Light Blue */
}

/* Link Variants */
.link-primary {
    color: #ffcc66 !important;
}

.link-secondary {
    color: #ffa657 !important;
}

.link-tertiary {
    color: #9cdcfe !important;
}

.link-accent {
    color: #c586c0 !important;
}

.link-muted {
    color: #bbbbbb !important;
}

.link-danger {
    color: #ff5555 !important;
}

.link-success {
    color: #a5c261 !important;
}

.link-warning {
    color: #e8bf6a !important;
}

p {
  font-size: 18px; /* Base size for small viewports */
}

@media (min-width: 576px) {
  p {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  p {
    font-size: 20px;
  }
}

@media (min-width: 992px) {
  p {
    font-size: 22px;
  }
}

@media (min-width: 1200px) {
  p {
    font-size: 14px;
  }
}

@media (min-width: 1400px) {
  p {
    font-size: 16px;
  }
}