@import url("https://fonts.googleapis.com/css?family=Martian+Mono"); :root { --main-b-color: #04030F; --main-g-color: #04F30F; --main-text-g: #04F30F; --main-text-b: #04030F; --main-width: 1900px; --main-height: 500vh; --error-width: 1900px; --error-height: 100vh; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Martian Mono", monospace; font-size: 14pt; } /* Body */ /* Black */ body { overflow-x: hidden; } body,div.black { background: var(--main-b-color); display: flex; min-height: var(--main-height); width: 100%; height: 100%; flex-direction: column; } /* Error */ /* Green */ body,div.error { background: var(--main-g-color); display: flex; min-height: var(--error-height); width: 100%; height: 100%; flex-direction: column; } /* Header */ /* Black */ div.black > .header { position: fixed; height: 32px; width: 100%; background: var(--main-g-color); z-index: 999999999999; } div.black > .header > img { height: 100%; margin: auto; display: block; padding: 8px 0px 8px 0px; } /* Error */ /* Green */ div.error > .header { position: fixed; height: 32px; width: 100%; background: var(--main-b-color); z-index: 999999999999; } div.error > .header > img { height: 100%; margin: auto; display: block; padding: 8px 0px 8px 0px; } /* Info */ /* Black */ div.black > .info { margin-top: 32px; background: var(--main-g-color); width: 100%; min-height: 384px; } div.black > .info > b { padding: 64px 0 80px 64px; display: block; max-width: 1594px; font-size: 64px; line-height: 1.25; letter-spacing: 1px; text-decoration: none; text-transform: lowercase; overflow-wrap: break-word; } div.black > .info > b > big { font-size: 64px; color: rgba(0, 0, 0, 0.25); } /* Error */ /* Green */ div.error#site > .info { margin-top: 64px; background: var(--main-g-color); display: flex; flex-direction: row; flex-flow: row wrap; width: 100%; min-height: 384px; color: var(--main-text-b); } div.error#site > .info > h1 { font-size: 512px; line-height: 1.2; margin-left: 117.25px; } div.error#site > .info > .row { width: 512px; height: 512px; padding-top: 158px; margin-left: 65px; font-size: 32px; display: flex; flex-direction: column; } div.error#site > .info > .row > .h1 { font-size: 40px; text-transform: lowercase; padding-bottom: 32px; } div.error#site > .info > .row > .p { font-size: 34px; } /* Footer */ /* Black */ div.black > .footer { display: block; height: 32px; width: 100%; background: var(--main-g-color); margin-top: auto; text-align: center; } div.black > .footer > h1 { letter-spacing: 4px; width: 100%; height: 100%; padding: 5px 0px 8px 0px; text-decoration: none; text-transform: none; } /* Error */ /* Green */ div.error > .footer { display: block; height: 32px; width: 100%; background: var(--main-b-color); color: var(--main-text-g); margin-top: auto; text-align: center; } div.error > .footer > h1 { letter-spacing: 4px; width: 100%; height: 100%; padding: 5px 0px 8px 0px; text-decoration: none; text-transform: none; } @media screen and (min-width: 1750px) and (max-width: 1890px) { /* Info */ /* Error */ /* Green */ div.error#site > .info > h1 { font-size: 512px; line-height: 1.2; margin-left: 32.25px !important; } }