@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/DMSans-Bold.ttf');
}


@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/DMSans-Medium.ttf');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/DMSans-Regular.ttf');
}

@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: normal;
    src: url('../fonts/DMSans-Italic.ttf');
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #1b1b26;
    color: #B3B1B6;
    padding-left: 0;
}

a, a:active {
    color: #d69e49;
}
a:hover, a:active:hover {
    text-decoration: underline;
}
article a {
    color: #d69e49;
    border-bottom: 1px solid #d69e49;
}
article a:hover {
    color: #FFB84B;
    border-bottom: 1px solid #FFB84B;
}

section {
    background-color: #1b1b26;
}

.class-description {
    font-size: 16px;
    line-height: 140%;
}

h1, h2, h3, h4, h5, h6 {
    color: #D8D6D9;
    font-family: 'DM Sans', sans-serif;
}

article > div > h2 {
    margin-bottom: -48px;
}

h4.name {
    color: white;
    background: #23242E;
    border: 1px solid #2c2d39;
    border-radius: 8px;
    box-shadow: none;
    margin-top: 64px;
    margin-bottom: 16px;
    /*margin: 1.5em 0 0.5em;*/
    padding: 0.75em 0 0.75em 10px;
    font-size: 15px;
}
h4.name a {
    color: #d69e49;
}
h4.name a:hover {
    color: #FFB84B;
    border-bottom-color: #FFB84B;
}
.signature {
    color: #d69e49;
}
.type-signature {
    color: #d69e49;
}
span.param-type, .params td .param-type, .param-type dd {
    color: #d69e49;
}
.details {
    margin-top: 6px;
    border-radius: 3px;
    border-left: 2px solid hsl(207, 10%, 36%);
    line-height: 20px;
    font-size: 14px;
}
.details dt {
    width: initial;
    margin-right: 16px;
    float: left;
    padding-left: 10px;
}
.details dd {
    margin-left: 0px;
    margin-top: 6px;
    margin-bottom: 6px;
}
dd {
    margin-inline-start: 36px;
}

nav {
    background-color: #22232f;
    padding-bottom: 20px;
    border-right: 1px solid hsl(207, 10%, 20%);
    padding-left: 20px;
}

nav h3 {
    color: white;
}

nav h2 a {
    color: #FFB84B !important;
}

nav ul {
    font-family: 'DM Sans', sans-serif;
    font-size: 100%;
    line-height: 17px;
}

nav ul ul a {
    border-left: 1px solid hsl(207, 10%, 36%);
}

nav ul a,
nav ul a:active {
    font-family: 'DM Sans', sans-serif;
    line-height: 18px;
    font-size: 12px;
}

nav a {
    /*color: white;*/
    /*font-size: 15px;*/
}
nav a:hover,
nav a:active {
    color: #FFB84B;
}

/* left sidebar top level classes and links */
nav > ul > li > a {
    color: #D8D6D9;
    font-weight: 500;
}

.params, .props {
    border-spacing: 0;
    border: none;
    border-collapse: collapse;
    box-shadow: none;
    font-size: 14px;
    margin: 1em 0;
}

table tbody tr:nth-child(even) {
    background-color: #20222b;
}

.params thead tr, .props thead tr {
    background-color: #23242E;
}

tt, code, kbd, samp {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    background: #16161f;
    border: 1px solid #2c2d39;
    border-radius: 4px;
    padding: 1px 5px;
}
.params td, .params .name, .props .name, .name code {
    color: hsl(207, 10%, 50%)
}

/* Rounded table styling */
table {
    /* Change these properties */
    --border: 1px solid #2c2d39;
    border-radius: 4px !important;

    /* Don't change these properties */
    border-spacing: 0;
    border-collapse: separate;
    border: var(--border);
    overflow: hidden;
}

table th, table td {
    border: 1px solid #2c2d39;
}

/* Apply a border to the right of all but the last column */
table th:not(:last-child),
table td:not(:last-child) {
    border-right: var(--border);
}

/* Apply a border to the bottom of all but the last row */
table>thead>tr:not(:last-child)>th,
table>thead>tr:not(:last-child)>td,
table>tbody>tr:not(:last-child)>th,
table>tbody>tr:not(:last-child)>td,
table>tfoot>tr:not(:last-child)>th,
table>tfoot>tr:not(:last-child)>td,
table>tr:not(:last-child)>td,
table>tr:not(:last-child)>th,
table>thead:not(:last-child),
table>tbody:not(:last-child),
table>tfoot:not(:last-child) {
    border-bottom: var(--border);
}



/**
 * readme files
 */
.readme h2 {
    border-bottom: 1px solid #e3e3e3;
}