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%
}
.heading {
    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{
        margin:0
    }
    .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:auto;
        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
    }
}
