article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display:block
}
audio, canvas, video {
    display:inline-block
}
audio:not([controls]) {
    display:none;
    height:0
}
[hidden] {
    display:none
}
html {
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body {
    margin:0
}
a:focus {
    outline:thin dotted
}
a:active, a:hover {
    outline:0
}
h1 {
    font-size:2em;
    margin:.67em 0
}
abbr[title] {
    border-bottom:1px dotted
}
b, strong {
    font-weight:700
}
dfn {
    font-style:italic
}
hr {
    box-sizing:content-box;
    height:0
}
mark {
    background:#ff0;
    color:#000
}
code, kbd, pre, samp {
    font-family:monospace, serif;
    font-size:1em
}
pre {
    white-space:pre-wrap
}
q {
    quotes:"\201C""\201D""\2018""\2019"
}
small {
    font-size:80%
}
sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    top:-.5em
}
sub {
    bottom:-.25em
}
img {
    border:0
}
svg:not(:root) {
    overflow:hidden
}
figure {
    margin:0
}
fieldset {
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}
legend {
    border:0;
    padding:0
}
button, input, select, textarea {
    font-family:inherit;
    font-size:100%;
    margin:0
}
button, input {
    line-height:normal
}
button, select {
    text-transform:none
}
button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled], html input[disabled] {
    cursor:default
}
input[type=checkbox], input[type=radio] {
    box-sizing:border-box;
    padding:0
}
input[type=search] {
    -webkit-appearance:textfield;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance:none
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border:0;
    padding:0
}
textarea {
    overflow:auto;
    vertical-align:top
}
table {
    border-collapse:collapse;
    border-spacing:0
}
*, :after, :before {
    box-sizing:border-box
}
:root {
    font-size:16px
}
.frame, body, html, main {
    width:100%;
    height:100%
}
body {
    position:fixed;
    top:0;
    left:0;
    --color-text:#fff;
    --color-bg:#0e0e0f;
    --color-link:#0f51e4;
    --color-link-hover:#ebd944;
    color:var(--color-text);
    background-color:var(--color-bg);
    font-family:Futura, futura-pt, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
a {
    display:inline-block;
    text-decoration:none;
    color:var(--color-link);
    outline:none;
    transition:color .2s, transform .2s;
    transform:translate(0)
}
a:focus, a:hover {
    color:var(--color-link-hover);
    outline:none;
    transform:translateY(-2px)
}
.message {
    background:var(--color-text);
    color:var(--color-bg);
    padding:1rem
}
.frame, .message {
    text-align:center
}
.frame {
    padding:3rem 5vw;
    position:relative;
    z-index:1000
}
.frame__title {
    font-size:1rem;
    margin:0 0 1rem;
    font-weight:400
}
.frame__links {
    display:inline
}
.frame a {
    /*text-transform:lowercase*/
}
.frame__demos a:not(:last-child), .frame__github, .frame__links a:not(:last-child) {
    margin-right:1rem
}
.frame__demos {
    width:100%;
    padding:0 2.5rem;
    margin:1rem 0;
    position:absolute;
    bottom:1rem;
    left:50%;
    transform:translate(-50%)
}
.frame__demo {
    margin-top:1rem
}
.frame__demo--current, .frame__demo:hover {
    color:var(--color-text)
}
.frame__demo--current {
    border-bottom:2px solid var(--color-text);
    transform:none
}
.content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    width:100vw;
    height:calc(100vh - 13rem);
    position:relative;
    -ms-flex-pack:start;
    justify-content:flex-start;
    -ms-flex-align:center;
    align-items:center
}
.overlay {
    position:absolute;
    pointer-events:none;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    background-color:#0e0e0f;
    opacity:1
}
@media screen and (min-width:53em) {
    .message {
        display:none
    }
    .frame {
        position:fixed;
        text-align:left;
        z-index:10000;
        top:0;
        left:0;
        display:-ms-grid;
        display:grid;
        -ms-flex-line-pack:justify;
        align-content:space-between;
        width:100%;
        max-width:none;
        height:100vh;
        padding:3rem;
        pointer-events:none;
        -ms-grid-columns:auto 1fr;
        grid-template-columns:auto 1fr;
        -ms-grid-rows:auto auto auto;
        grid-template-rows:auto auto auto;
        grid-template-areas:"title     links""...       ...""github    demos"
    }
    .frame__title-wrap {
        grid-area:title;
        display:-ms-flexbox;
        display:flex
    }
    .frame__title-wrap-body {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .frame__title {
        font-size: 5em;
        margin: 0 0 4em;
    }
    .frame__tagline {
        position:relative;
        margin:0 0 0 4rem;
        padding:0 0 0 1rem
    }
    .frame__tagline:before {
        content:"";
        position:absolute;
        right:100%;
        top:50%;
        height:1px;
        width:3rem;
        background:var(--color-text)
    }
    .frame__github {
        grid-area:github;
        justify-self:start;
        margin:0
    }
    .frame__demos {
        position:static;
        left:auto;
        width:100%;
        transform:none;
        margin:0;
        padding:0;
        grid-area:demos;
        justify-self:end
    }
    .frame__demo {
        margin-top:0
    }
    .frame__links {
        grid-area:links;
        padding:0;
        justify-self:end
    }
    .frame a {
        pointer-events:auto
    }
    .content {
        height:100vh;
        -ms-flex-pack:center;
        justify-content:center
    }
}