* { box-sizing: border-box; line-height: 1; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } html { display: table; } body { display: table-cell; vertical-align: middle; margin: 0; overflow-y: scroll; font-family: "Helvetica", Times, serif; } .container { width: 100%; max-width: 900px; margin: 10px auto 50px; padding: 20px; } h1, .subtitle { margin: 0; text-align: center; } .title-gray { color: #BD0009; } .title { text-align: center; } .logo, h1 { display: inline; } .logo { height: 3.5em; position: relative; top: 0.4em; margin-right: 10px; } h1 { font-size: 4em; } .subtitle { font-size: 1.5em; } .code { display: block; margin: 10px auto 0; text-align: center; font-size: 1.5em; max-width: 400px; background-color: lightgray; padding: 10px; .code-content { display: inline-block; color: #BD0009; margin: 0; } .green { color: #00A000; } .navy { color: navy; } .orange { color: #DD8F00; } } .nav { display: block; list-style-type: none; margin: 0; padding: 0; text-align: center; li { display: inline-block; padding: 5px 5px; margin: 0; margin-top: 20px; a, a:visited, a:active, a:hover { color: white; text-decoration: none; background-color: #A0A0A0; padding: 10px; font-size: 1.2em; border: 4px solid #606060; border-top: none; border-right: none; } a:hover { background-color: #909090; } a:active { background-color: #808080; border: 4px solid #404040; border-top: none; border-right: none; } } }