:root {
    --azin-blue: #2b7fff;
    --azin-blue-dark: #1863dc;
    --azin-blue-light: #61a5ff;

    --azin-bg: #ffffff;
    --azin-bg-alt: #f6f9ff;

    --azin-border: #dbe7ff;

    --azin-text: #1d2433;
    --azin-muted: #667085;

    --azin-radius: 20px;

    --md-primary-fg-color: var(--azin-blue);
    --md-primary-fg-color--light: var(--azin-blue-light);
    --md-primary-fg-color--dark: var(--azin-blue-dark);

    --md-accent-fg-color: var(--azin-blue);
}

[data-md-color-scheme="slate"] {
    --azin-bg: #09111f;
    --azin-bg-alt: #111c31;

    --azin-border: #223354;

    --azin-text: #f8fbff;
    --azin-muted: #9eb3d3;

    --md-primary-fg-color: #4d9dff;
}

/* ------------------------------------------------ */

html {
    scroll-behavior: smooth;
}

body {
    letter-spacing: .02em;
}

body::before {

    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -1;

    background-image:
        linear-gradient(rgba(43,127,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,127,255,.03) 1px, transparent 1px);

    background-size: 48px 48px;
}

/* ------------------------------------------------ */
/* Header */
/* ------------------------------------------------ */

.md-header {

    margin: 14px;

    width: calc(100% - 28px);

    border-radius: var(--azin-radius);

    backdrop-filter: blur(18px);

    background: rgba(35,106,255,.92);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 12px 40px rgba(0,0,0,.10);
}

.md-header__title {
    font-weight: 700;
}

.md-tabs {
    background: transparent;
}

/* ------------------------------------------------ */
/* Navigation */
/* ------------------------------------------------ */

.md-nav__link {

    padding: .45rem .75rem;

    border-radius: 10px;

    transition: .2s;
}

.md-nav__link:hover {

    background: rgba(43,127,255,.08);

    color: var(--azin-blue);

    padding-left: 1rem;
}

.md-nav__item--active>.md-nav__link {

    background: rgba(43,127,255,.12);

    color: var(--azin-blue);

    font-weight: 700;
}

/* ------------------------------------------------ */
/* Typography */
/* ------------------------------------------------ */

.md-content {

    animation: fadeUp .35s ease;
}

@keyframes fadeUp {

    from {
        opacity:0;
        transform:translateY(12px);
    }

    to {
        opacity:1;
        transform:none;
    }
}

h1 {

    font-size:2.8rem;

    font-weight:800;

    color:var(--azin-blue);
}

h2 {

    border-left:4px solid var(--azin-blue);

    padding-left:.8rem;

    margin-top:2rem;
}

h3 {

    color:var(--azin-blue-dark);
}

a {

    transition:.2s;
}

a:hover {

    opacity:.8;
}

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

.md-typeset .highlight {
    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background: rgba(66, 72, 86, 0.82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 12px 40px rgba(0,0,0,.22);

    transition: .25s;
}

/* IMPORTANT */

.md-typeset .highlight pre,
.md-typeset .highlight code {
    background: transparent !important;

    margin: 0;
    padding: 1rem 1.25rem;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:not(pre)>code {

    border-radius:8px;

    padding:.2rem .45rem;

    background:rgba(43,127,255,.08);

    border:1px solid rgba(43,127,255,.12);
}

.md-clipboard {

    top:10px;

    right:12px;

    border-radius:10px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    transition:.2s;
}

.md-clipboard:hover {

    background:rgba(43,127,255,.18);

    transform:scale(1.08);
}

/* ------------------------------------------------ */
/* Tables */
/* ------------------------------------------------ */

table {

    overflow:hidden;

    border-radius:var(--azin-radius);

    border:1px solid var(--azin-border);

    box-shadow:0 8px 28px rgba(0,0,0,.06);
}

thead {

    background:var(--azin-blue);

    color:white;
}

tbody tr {

    transition:.2s;
}

tbody tr:nth-child(even) {

    background:var(--azin-bg-alt);
}

tbody tr:hover {

    background:rgba(43,127,255,.05);
}

/* ------------------------------------------------ */
/* Buttons */
/* ------------------------------------------------ */

.md-button {

    border-radius:999px;

    font-weight:700;

    transition:.25s;

    box-shadow:
        0 6px 18px rgba(43,127,255,.15);
}

.md-button:hover {

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(43,127,255,.25);
}

.md-button--primary {

    background:linear-gradient(
        135deg,
        var(--azin-blue),
        var(--azin-blue-light)
    );
}

/* ------------------------------------------------ */

/* Search wrapper */
.md-search {
    border-radius: 999px;
}

/* Closed search bar */
.md-search__form {
    border-radius: 999px !important;
    overflow: hidden;

    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,.08);

    transition: .25s;
}


.md-search__input {
    border-radius: 999px !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}

.md-search__output {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
}

.md-typeset .grid.cards>ul>li {

    overflow:hidden;

    border-radius:var(--azin-radius);

    border:1px solid var(--azin-border);

    transition:.25s;
}

.md-typeset .grid.cards>ul>li:hover {

    transform:translateY(-6px);

    box-shadow:
        0 18px 35px rgba(43,127,255,.18);
}

.md-typeset blockquote {
    margin: 1.5rem 0;
    padding: 0.9rem 1.2rem;

    border: 1px solid rgba(43,127,255,.18);
    border-left: 4px solid var(--azin-blue);

    background: rgba(43,127,255,.06);

    border-radius: 14px;

    color: var(--azin-text);

    font-style: normal;
}

.md-typeset blockquote p {
    margin: 0;
}

.md-typeset .admonition {

    overflow:hidden;

    border-radius:var(--azin-radius);
}

img {
    border-radius:16px;
}

kbd {

    border-radius:8px;

    border:1px solid var(--azin-border);

    background:white;
}

.md-footer {
    background:#0f1728;
}

.md-footer-meta {
    background:#08101d;
}

::-webkit-scrollbar {
    width:10px;
}

::-webkit-scrollbar-thumb {

    border-radius:999px;

    background:linear-gradient(
        var(--azin-blue),
        var(--azin-blue-light)
    );
}

::selection {

    background:var(--azin-blue);

    color:white;
}