body {
    --purple-300: #818cf8;
    --purple-100: #ddd6fe;
    --purple-200: #978aa1;    
    --purple-700: #1d054f;
    --purple-800: #140f21;
    --green-200: #86c08c;
    margin: 0;
}
.top-box {
    display: flex;
    background-color: var(--purple-100);
    background-color: var(--purple-800);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 0;
    align-items: center;
}

.top-box > div {
    padding: 0;
    font-size: 16px;
    font-family: Montserrat, sans-serif;  
}
.top-box a {
    color: var(--purple-200);
    text-decoration: none;    
    display: inline-block;
    transition: color .3s ease;
}
.top-box a:hover, .top-box a:active, .top-box .current{
    color: #fff;
}
.top-box > .current, .top-box a {
    padding: 16px 16px;
}
/* Typography */
h1, h2, h3 {
    color: var(--purple-700);
}
body h1 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2!important;
}
body h2 {
    font-size:1.7em!important;
    margin: 0 0 10px;
    padding-top: 30px;
}
.api-content > div {
    padding: 30px 0 0;
}

code .token.selector, code .token.attr-name, code .token.string, code .token.char, code .token.builtin, code .token.inserted {
    color: var(--purple-200);
}
/* Buttons */

span.get, span.put, span.post, span.delete {
    border-radius: 5px;
}
.menu-content {
    padding-top: 15px;
}
div[id^="tag/"] > div > div:nth-child(1) {
    padding-top: 20px;
}
div[id^="tag/"] > div > div:nth-child(2){
    padding-top: 40px;
}
div[id^="section"] {
    padding-top: 50px;
}