@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600,700|Raleway&display=swap');

:root {
    --header-height: 65px;
}

@font-face {
    font-family: 'Fira Code';
    src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'),
        url("/static/fonts/FiraCode-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'),
        url("/static/fonts/FiraCode-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('/static/fonts/FiraCode-Medium.woff2') format('woff2'),
        url("/static/fonts/FiraCode-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('/static/fonts/FiraCode-Bold.woff2') format('woff2'),
        url("/static/fonts/FiraCode-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code VF';
    src: url('/static/fonts/FiraCode-VF.woff2') format('woff2-variations'),
            url('/static/fonts/FiraCode-VF.woff') format('woff-variations');
    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
    font-weight: 300 700;
    font-style: normal;
}

html, body {
    font-family: 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat';
    font-weight: 300;
}

h1 {
    font-weight: 100;
    font-size: 2.5em;
}

code {
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    color: #B21D12;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 9pt;
}

pre > code {
    color: #000;
}

.app {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.app > * {
    margin: 0;
    padding: 0;
}

.header {
    font-family: 'Montserrat';
    padding: 0 20px;
    border-bottom: 1px solid #f6f6f6;
}

.header__name {
    font-weight: 100;
    text-decoration: none;
    color: #000;
}

.header__separator {
    font-family: 'Fira Code';
    opacity: 0.3;
}

.header__service {
    font-weight: 100;
    text-transform: lowercase;
}

.header__owner {
    font-weight: 300;
    text-transform: lowercase;
}

.header__repo {
    text-transform: lowercase;
    font-weight: 400;
}

.sidebar-menu {
    position: fixed;
    left: 0;
    top: var(--header-height);
    bottom: 0;
}

.content {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.expander-content {
    height: 0;
    overflow: hidden;
    transition: height 0.25s ease;
}

.expander-content__expanded {
    height: 100%;
}

.expander-control {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #f6f6f6;
    color: #888;
    cursor: pointer;
}

.expander-control:hover {
    background: #eee;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    border-radius: 3px;
    color: black
}

.hljs-variable,.hljs-template-variable,.hljs-symbol,.hljs-bullet,.hljs-section,.hljs-addition,.hljs-attribute,.hljs-link {
    color: #333
}

.hljs-string {
    color: #B21D12;
}

.hljs-comment,.hljs-quote,.hljs-meta,.hljs-deletion {
    color: #ccc
}

.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-name,.hljs-type,.hljs-strong,.hljs-attr {
    font-weight: bold
}

.hljs-literal,.hljs-number {
    color: #409EFF;
    font-weight: bold;
}

.hljs-emphasis {
    font-style: italic
}

.openapi-operation {
    clear: both;
    border-left: 3px solid #888;
    padding: 15px 5px;
    cursor: pointer;
}

.openapi-operation.active {
    border-left: 3px solid #409EFF;
}

.openapi-operation__name {
    font-weight: 400;
    margin: 0 10px;
}

.openapi-operation__http {
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    margin: 0 10px;
}

.openapi-operation__method {
    font-weight: bold;
}

.openapi-operation__url {
    font-weight: 100;
}

.openapi-endpoint {
    margin-bottom: 50px;
    border-radius: 5px;
    border: 1px solid #f6f6f6;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.openapi-endpoint__header {
    padding: 20px;
    border-bottom: 1px solid #f6f6f6;
}

.openapi-endpoint__content {
    padding: 20px;
    background: #f6f6f6;
}

.openapi-endpoint__content .el-collapse-item__header,
.openapi-endpoint__content .el-collapse-item__content,
.openapi-endpoint__content .el-collapse-item__wrap {
    background: #f6f6f6;
}

.repo-showcase .el-carousel__item {
    text-align: center;
}