html {
    height: 100%;
    font-size: 62.5%;
}

body {
    height: 100%;
    background: #27292c;
    font-family: 'Roboto Mono', monospace;
    color: #d5d7d8;
    font-size: 1.2rem;
}

h1 {
    font-size: 2rem;
    margin: 0;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

hr {
    border: none;
    height: 1px;
    background: #454648;
}

.faded {
    color: #6d7074;
}

.accent {
    color: #86b6b1;
}

.pointer {
    cursor: pointer;
}

#app {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
}

.sidebar {
    border-right: 1px solid #454648;
    flex: 0 0 20rem;
    min-width: 0;

    display: flex;
    flex-flow: column nowrap;
}

.sidebar .controls {
    flex: 0 0 auto;
    padding: 0 1.2rem 0.6rem;
    border-bottom: 1px solid #454648;
}

.sidebar input[type="text"] {
    width: 100%;
    padding: 0.6rem 0;
    color: #86b6b1;
    outline: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    font-family: 'Roboto Mono', monospace;
}

.sidebar .list {
    flex: 1;
    min-height: 0;
    overflow: scroll;
    padding: 0 1.2rem;
}

.sidebar .list .section {
    text-align: center;
    margin: 2rem 0;
}

.browser {
    flex: 1;
    padding: 1.6rem;
    min-height: 0;
    overflow: scroll;
}

.browser.empty {
    display: flex;
    justify-content: center;
    align-items: center;
}

.component-doc .prop {
    margin-bottom: 1.6rem;
}

.component-doc .prop span {
    margin-right: 1.4rem;
}