html { background: #2637dd; font-family: "Roboto Mono", monospace; font-weight: 500; color: #fff; -webkit-font-smoothing: antialiased; } header { text-align: center; margin-top: 8%; font-family: "Rubik Mono One", sans-serif; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } header p { margin-top: 1em; } .l1991 { font-size: 0; position: relative; display: inline-block; width: 45%; max-width: 600px; min-width: 250px; height: 60px; margin-right: -1%; } .l { display: inline-block; width: 23%; height: 100%; margin-right: 2%; box-sizing: border-box; font-size: 0; position: relative; } .l1 { border-bottom: solid 9px; } .l1:before { content: ""; position: absolute; top: 0; left: 0; box-sizing: border-box; border: solid 9px; border-left: none; border-bottom: none; width: 69.23%; height: 100%; } .l9:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 56.83%; -webkit-border-radius: 15px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 15px; -moz-border-radius-bottomright: 0; border-radius: 15px; border-bottom-right-radius: 0; box-sizing: border-box; border: solid 9px; } .l9:after { content: ""; position: absolute; right: 0; bottom: 0; width: 97.89%; height: 56.83%; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; box-sizing: border-box; border: solid 9px; border-top: none; border-left: none; } article { display: block; width: 60%; margin-left: 20%; } section { text-align: justify; font-size: 1em; line-height: 2em; } main h1 { margin-top: 8%; margin-bottom: 0; font-family: "Rubik Mono One"; background: #fff; color: #2637dd; padding: 0.1em 0.3em; font-size: 1.2em; text-transform: uppercase; display: inline-block; } h2 { margin-top: 5%; } h1, h2, h3, h4, h5 { text-align: left; line-height: 2em; } strong { font-weight: inherit; color: #2637dd; background: #fff; padding-left: 0.3em; padding-right: 0.3em; } a { color: inherit; text-shadow: 1px 1px #2637dd, -1px -1px #2637dd; text-decoration: underline; } a:hover { text-decoration: none; text-decoration: line-through; } code { padding: 2px 5px; border: solid 1px; font-family: inherit; } pre { display: block; border: solid 2px; padding: 10px; margin: 10px 0px; white-space: pre-wrap; font-family: inherit; line-height: 1.5em; overflow: hidden; text-align: left; } ::selection { background: #fff; color: #2637dd; text-shadow: none; } ::-moz-selection { background: #fff; color: #2637dd; text-shadow: none; } footer { margin-top: 8%; margin-bottom: 5%; text-align: center; } footer .l1991 { width: 150px; height: 25px; min-width: auto; } footer .l1991 .l, footer .l1991 .l:before, footer .l1991 .l:after { border-width: 4px; } footer .l1991 .l9:before { -webkit-border-radius: 7px; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 7px; -moz-border-radius-bottomright: 0; border-radius: 7px; border-bottom-right-radius: 0; } footer .l1991 .l9:after { -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; } footer nav { margin-top: 3%; border: 4px ridge; background: #e9e9e9; width: auto; display: inline-block; font-size: 0; } footer nav a { width: 60px; height: 60px; padding: 10px; box-sizing: border-box; display: inline-block; background: #e9e9e9; border: 2px outset; vertical-align: top; } footer nav a:active { border-style: inset; } footer nav a.url { position: relative; } footer nav a.url:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 20px; height: 20px; background: url("http://www.urlysses.com/img/smile.gif"); } .fork { position: fixed; top: 0; right: 0; z-index: 1; text-align: center; text-shadow: 1px 1px 0px #fff; width: 300px; height: 30px; line-height: 30px; color: #000; text-decoration: none !important; background: #e9e9e9; border: 3px inset #fff; font-weight: 900; -webkit-transform: rotate(45deg) translate(30%, -75%); -moz-transform: rotate(45deg) translate(30%, -75%); -ms-transform: rotate(45deg) translate(30%, -75%); transform: rotate(45deg) translate(30%, -75%); } /* "browser" */ .browser { background: #e9e9e9; border: solid 1px #000; box-shadow: 6px 6px 0px #000; position: relative; box-sizing: border-box; color: #000; margin: 0; padding: 0; } .browser:before { content: ""; pointer-events: none; position: absolute; border: solid 1px #000; top: 2px; left: 2px; right: 2px; bottom: 2px; } .browser:after { content: "EXAMPLE FILES"; position: absolute; top: 10px; left: 1%; right: 1%; height: 20px; background: #2637dd; color: #fff; line-height: 20px; text-align: center; border: solid 1px #000; box-sizing: border-box; font-size: 0.5em; letter-spacing: 1px; } .browser .tabs { position: absolute; box-sizing: border-box; border: solid 1px #000; top: 40px; left: 1%; width: 98%; height: 30px; display: table; padding: 0; margin: 0; background: none; } .browser .tabs div { color: #aaa; text-shadow: 1px 1px 0px #fff; font-size: 0.8em; line-height: 30px; display: table-cell; vertical-align: middle; border: 3px outset; box-sizing: border-box; cursor: pointer; padding: 0px 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; } .browser .tabs div:hover { color: #777; } .browser .tabs div:active { border-style: inset; } .browser .tabs div.selected { color: #000; } .browser pre { background: #fff; position: relative; border: solid 1px #000; box-sizing: border-box; margin-left: 1%; margin-top: 90px; width: 98%; display: none; } .browser pre.selected { display: block; } .browser .keyword-wrapper { color: #1FAAAA; } .browser .keyword { color: #FF0086; } .browser .number { color: #FD8900; } .browser .string { color: #3777E6; } .browser .comment, .browser .comment * { color: #989898; } .browser *::selection { background: #dedede; } .browser *::-moz-selection { background: #dedede; } /* media queries */ @media all and (max-width: 600px) { article { width: 90%; margin-left: 5%; } .fork { font-size: 10px; width: 200px; height: 20px; line-height: 20px; } }