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 { 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 }
}