@font-face {
    font-family: 'dmsans';
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/dmsans.ttf') format('ttf');
}

body, html {
    font-family: 'dmsans';
    margin: 0; padding:0;
    background: #000;
    color: #FFF;

    --bordercolor: #777;
    --border-radius: 5px;
}
a { color:inherit; text-decoration:none; }

.hidden { display: none !important; }

main { display: flex; width: 100%; height: 100%; min-height: 100vh; }
main > *:first-child { border-right: 1px solid var(--bordercolor); width: 20%; max-width: 250px; background: #222; color: #EEE; }
main > *:last-child { flex: 1; padding: 20px 40px; }

main .top { display: flex; width: 100%; gap: 20px; align-items: center; border-bottom: 1px solid var(--bordercolor); padding:10px 20px; box-sizing: border-box; }
main .top > *:first-child { flex:0.3; }
main .top > *:last-child { flex:1; }
main .top .site { display: block; margin-bottom: 5px; font-weight: bold; font-size: 18px; }
main .top .api { font-size: 13px; }
main .top svg { width: 45px; }
main nav { padding: 20px; }

main nav ol, main nav ul { margin: 0; padding:0; list-style: none; }
main nav .menu_cat { opacity: 0.7; text-transform: uppercase; font-size: 12px; font-weight: bold; margin-top:30px; display: block; }
main nav li:first-child .menu_cat { margin-top: 20px; }
main nav .menu_item { margin-top: 10px; font-size: 14px; display: block; }
main nav ul ul a { display: flex !important; gap:8px; align-items: center; width: 100%; }
main nav ul ul a > *:first-child { flex:1; }

.method { display: inline-block; padding: 2px 4px; font-size: 11px; background: #97b5e2; color: #000; border-radius: 5px; }
.method.DELETE { background: #e29797; }
.method.PUT { background: #a5e297; }

section { margin-top: 100px; }
section:first-child { margin-top: 0; }

section .summary { border-bottom: 1px solid var(--bordercolor); padding:10px 0; margin-bottom: 20px; box-sizing: border-box; }
section .summary .name { display: block; font-weight: bold; }
section .summary .desc { display: block; opacity: 0.7; margin-top: 10px; }

section .title { display: block; font-weight: bold; font-size:90%; margin-bottom:10px; margin-top: 20px; text-transform: uppercase; opacity: 0.8; }
section .responses { display: flex; width: 100%; gap: 10px; align-items: center; margin-bottom: 10px; }
section .responses > * { cursor: pointer; user-select: none; display: inline-block; padding: 8px 12px; border: 1px solid var(--bordercolor); background: #222; border-radius: var(--border-radius); }
section .responses > .selected { background: none; color: #FFF; }
section .paragraph { margin-bottom: 20px; }


.responsebody { margin-bottom: 20px; background: #222; color: #EEE; border:1px solid var(--bordercolor); border-radius: var(--border-radius); padding: 10px; }
.responsebody pre { margin: 0; padding: 0; }
.codecomment { opacity: 0.7; font-style: italic; }
.block { background: #222; color: #EEE; border:1px solid var(--bordercolor); border-radius: var(--border-radius); padding: 10px; display: flex; width: 100%; box-sizing: border-box; gap: 10px; }

.parameters { border:none; border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }
.parameters td, .parameters th { padding: 8px; border: 1px solid var(--bordercolor); width: 140px; text-align: left; }
.parameters th { font-weight: bold; background: #111; }
.parameters th:last-child { width: unset; }

.ratelimit { display: flex; width: 100%; gap: 20px; align-items: center; margin-bottom: 10px; }
.ratelimit > * { flex: 1; text-align: center; }
.ratelimit .toph { display: block; }
.ratelimit .num { display: block; margin:10px 0; font-weight: bold; font-size: 28px; }

.info-box { background: #E1F5EE; border: 1px solid #5DCAA5; border-radius: var(--border-radius); padding: 12px 16px; color: #085041; margin-bottom: 1.25rem; line-height: 1.6; }
.warn-box { background: #FAEEDA; border: 1px solid #EF9F27; border-radius: var(--border-radius); padding: 12px 16px; color: #633806; margin-bottom: 1.25rem; line-height: 1.6; }