index.css

@charset "UTF-8";

@font-face {
    font-family: "Plex";
    src: url(font/Plex.woff2) format('woff2'),
        url(font/Plex.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Plex-bold";
    src: url(font/Plex.bold.woff2) format('woff2'),
        url(font/Plex.bold.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@import url(css/reset.css);
@import url(css/animate.css);
@import url(css/glyphs.css);

:root {
    --black:      #282a2dff;
    --dark-grey:  #666666ff;
    --light-grey: #f9f9f9ff;
    --grey:       #ffffffb3;
    --orange:     #e5a00dff;
    --dark-white: #f2f3f4ff;
    --white:      #ffffffff;
}

html, body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
}

body {
    color: var(--light-grey);
    font-family: "Plex";
    text-align: center;
}

body[footer], body[header] {
    overflow: hidden;
}

[black] {
    color: var(--black) !important;
}

[dark-grey] {
    color: var(--dark-grey) !important;
}

[light-grey] {
    color: var(--light-grey) !important;
}

[grey] {
    color: var(--grey) !important;
}

[orange] {
    color: var(--orange) !important;
}

[white] {
    color: var(--white) !important;
}

[black\:] [href] {
    color: var(--black) !important;
}

[dark-grey\:] [href] {
    color: var(--dark-grey) !important;
}

[light-grey\:] [href] {
    color: var(--light-grey) !important;
}

[grey\:] [href] {
    color: var(--grey) !important;
}

[orange\:] [href] {
    color: var(--orange) !important;
}

[white\:] [href] {
    color: var(--white) !important;
}

[\:black]:hover {
    color: var(--black) !important;
}

[\:dark-grey]:hover {
    color: var(--dark-grey) !important;
}

[\:light-grey]:hover {
    color: var(--light-grey) !important;
}

[\:grey]:hover {
    color: var(--grey) !important;
}

[\:orange]:hover {
    color: var(--orange) !important;
}

[\:white]:hover {
    color: var(--white) !important;
}

[-black] {
    background-color: var(--black) !important;
}

[-dark-grey] {
    background-color: var(--dark-grey) !important;
}

[-light-grey] {
    background-color: var(--light-grey) !important;
}

[-grey] {
    background-color: var(--grey) !important;
}

[-orange] {
    background-color: var(--orange) !important;
}

[-white] {
    background-color: var(--white) !important;
}

[\:\:black]:hover {
    background-color: var(--black) !important;
}

[\:\:dark-grey]:hover {
    background-color: var(--dark-grey) !important;
}

[\:\:light-grey]:hover {
    background-color: var(--light-grey) !important;
}

[\:\:grey]:hover {
    background-color: var(--grey) !important;
}

[\:\:orange]:hover {
    background-color: var(--orange) !important;
}

[\:\:white]:hover {
    background-color: var(--white) !important;
}

[no-show] {
    display: none !important;
}

left, right {
    display: inline-block;
}

left {
    float: left;

    padding-left: 5em;
}

right {
    float: right;

    padding-right: 5em;
}

[left] {
    text-align: left;
}

[right] {
    text-align: right;
}

[center] {
    text-align: center;
}

h1, h2, h3, h4, h5, h6, [h1], [h2], [h3], [h4], [h5], [h6] {
    font-family: "Plex-bold";
}

h1, [h1] {
    font-size: 400%;
}

h2, [h2] {
    font-size: 300%;
}

h3, [h3] {
    font-size: 200%;
}

h4, [h4] {
    font-size: 100%;
}

h5, [h5] {
    font-size: 75%;
}

h6, [h6] {
    font-size: 50%;
}

table {
    align-content: center;

    padding: 2em;

    width: 100%;
}

a {
    color: var(--white);
    cursor: pointer;
    word-wrap: break-word;
    text-decoration: none;

    transition: all 0.3s;
}

a * {
    cursor: inherit;
}

code, pre {
    background: var(--black);
    border-radius: 3px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--white);
    font-family: "System, Monospace, Menlo, Arial", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 70%;
    line-height: 1;
    white-space: pre;

    margin: 0 !important;
    padding: 0.2em 0.4em !important;
}

a[target]:not([target="_top"]):before {
    content: '\22c4';
}

a:not(.button):hover {
    color: var(--orange);
}

a.install {
    background: var(--white);
    display: inline-flex;

    padding: 1em 5em;
}

a.install:hover {
    background: var(--light-grey);
    cursor: pointer;
}

p {
    padding: 0 20em 5em;
}

button, .button, [type="button"i] {
    background: var(--orange);
    border: 0;
    border-radius: 1000px;
    color: var(--white);
    cursor: pointer;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    outline: 0;
    text-rendering: optimizeLegibility;

    margin-top: 3em;
    padding: 1em 2em 1em;

    -webkit-font-smoothing: antialiased;
}

button:hover, .button:hover, [type="button"i]:hover {
    opacity: 0.9;
}

img[badge] {
    max-width: 150px;
}

img[inline] {
    max-width: 80vw;
}

header [type="button"] {
    padding: 0.5em 2em;
}

.install > img {
    display: inline-block;

    margin-left: -3em;
}

.install > [content] {
    text-align: left;

    padding-left: 1em;
}

.star.icon {
    max-width: 1em;
}

ul li {
    list-style-type: none;
}

ol[top] {
    text-align: left;

    padding: 0 20em 10em;
}

ol > li {
    font-weight: bold;
}

ol > ol > li {
    font-weight: normal;
}

li[for], ol:not([top]) {
    padding-bottom: 1em;
}

li[for]:before {
    content: attr(for) ".";
    text-decoration: underline;
}

header {
    align-items: center;
    background: var(--black);

    padding: 2em 0 0;
    position: absolute;
    top: 0;

    height: 4em;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
}

#icon {
    margin: -0.5em 0 0;
}

#welcome {
    background: url("image/noise.png") fixed, url("image/welcome.png") fixed center / cover no-repeat;
    background-attachment: scroll;

    margin-top: -0.25em;
    padding-top: 7.25em;

    height: 100%;
}

#welcome ~ *:not(:last-child) {
    padding-bottom: 3em;
    padding-top: 2em;
    margin-top: -2em;
}

#install > * {
    background: var(--white) !important;
    border: 1px solid var(--light-grey) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 60px 0 rgba(0,0,0,.05);
    box-sizing: border-box !important;
    display: flex !important;

    margin: 0 8% !important;

    width: 84% !important;
}

#install tbody {
    width: 100% !important;
}

#install [source] {
    display: none !important;

    padding: 0 8% !important;
}

#install [source]::before {
    content: attr(source) " (" attr(version) ")";
    display: block;
    font-size: 3em;

    margin-top: 3%;
}

#install[source="storefront"i] [value="storefront"i], #install[source="github"i] [value="github"i] {
    background: var(--dark-white) !important;
}

#install[source="storefront"i] [source="storefront"i], #install[source="github"i] [source="github"i] {
    display: block !important;
}

#sources {
    display: inline-block !important;

    width: 100% !important;
}

#sources > * {
    display: inline-block !important;

    width: 200px !important;
}

#sources > *:not(:first-child) {
    margin-left: 2%;
}

.source {
    border: 1px solid var(--dark-grey) !important;
    background: var(--white) !important;
    display: inline-block !important;
    color: var(--black) !important;
    cursor: pointer !important;

    padding: 16px 16px 17px !important;

    width: 100% !important;
}

#sources > *:first-child .source {
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    border-right: 0 !important;
}

#sources > *:last-child .source {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

footer {
    text-align: left;

    padding: 0em 10em 5em;
}

iframe {
    border: 0;
    overflow: hidden;

    margin: 0;
    padding: 0;

    width: 100%;
}

iframe[head] {
    height: 5em;
}

iframe[foot] {
    height: 15em;
}

header, footer {
    background-image: url(image/noise.png);
}