/* Global */ div, footer, .fa, .container, .container:before, .container:after { box-sizing: border-box; } body, input, textarea { padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-size: 18px; color: #eee; } body { background-color: #080808; } ::-webkit-scrollbar { width: 5vw; min-width:10px; max-width:40px; }::-webkit-scrollbar-track { background-color: #080808; background-color: rgba(8,8,8,0); }::-webkit-scrollbar-thumb { border-radius: .2vw; background: #333; } ::selection { background: #999; } ::-moz-selection { background: #999; } /* Elements */ h1, h2, h3 { margin: 0 0 5% 0; position: relative; z-index: 6; } h1,h2,h3,h4 { font-weight: 600; } h1 { font-size: 48px; line-height: 46px; } h2 { font-size: 40px; line-height: 36px; } h3 { font-size: 28px; } h4 { font-size: 20px; } p { margin-top: 0; margin-bottom: 10vh; } a { color: #fbc93d; text-decoration: none; } main a:hover:not(.btn) { color: #fbc93d; text-decoration: underline; } .light a:not(.btn) { color:#111; text-decoration: underline; } .light a:hover { color:#111; text-decoration: none; } hr { width: 90%; margin: 10% auto; } img { max-width: 100%; } p img { display: block; margin: auto; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .hide { display: none !important; } .red, .red:hover { color: #fb6e3d !important; } .yellow, .yellow:hover { color: #fbc93d !important; } .shadow { -moz-box-shadow: .18vw .18vw .36vw #000; -webkit-box-shadow: .18vw .18vw .36vw #000; box-shadow: .18vw .18vw .36vw #000; } .shadow:active { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .inline { display: inline-block; } .flex { width: 100%; display: flex; justify-content: space-around; } .flex.stretch { justify-content: space-between; } .left { float: left; } .right { float: right; } main { top: 60px; position: absolute; left: 0px; right: 0px; bottom: 0px; overflow-y: auto; } .container { padding-right: 5%; padding-left: 5%; width: 100%; margin: 0 auto; } .container:after { content: ""; display: block; clear: both; } section { padding: 10vh 0 5vh; } /* Alerts */ .alert { z-index: 10; padding: 15px; border: 1px solid transparent; border-radius: 4px; } .alert a { z-index: 10; color: inherit; font-weight: bold; text-decoration: underline; } .alert a:hover { color: inherit; text-decoration: none; } .alert h4 { margin-top: 0; color: inherit; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .alert-dismissable { padding-right: 35px; } .alert .close, .alert-dismissible .close { cursor: pointer; float: right; color: inherit; } .alert-success { color: #dff0d8; background-color: #3c763d; } .alert-info { color: #d9edf7; background-color: #31708f; } .alert-warning { color: #fcf8e3; background-color: #8a6d3b; } .alert-danger { color: #f2dede; background-color: #a94442; } .alert.alert-header { position: relative; border-radius: 0; top: 58px; width: 100%; } /* Buttons */ .btn { text-decoration: none; text-align: center; font-weight:600; display: inline-block; padding: 15px 30px; transition: 100ms; cursor: pointer; background: rgba(255,255,255,0.1); color: #eee; border: 1px solid #999; border-radius: .5vw; } .btn:not(.disabled) { -moz-box-shadow: inset .11vw .18vw .52vw rgba(255,255,255,.2), inset -.11vw -.18vw .52vw rgba(0,0,0,.4), .11vw .18vw .52vw #000; -webkit-box-shadow: inset .11vw .18vw .52vw rgba(255,255,255,.2), inset -.11vw -.18vw .52vw rgba(0,0,0,.4), .18vw .18vw .36vw #000; box-shadow: inset .11vw .18vw .52vw rgba(255,255,255,.2), inset -.11vw -.18vw .52vw rgba(0,0,0,.4), .18vw .18vw .36vw #000; } .btn:hover:not(.disabled) { text-decoration: none; background: rgba(255,255,255,0.2); } .btn:active:not(.disabled) { -moz-box-shadow: inset .11vw .18vw .52vw rgba(0,0,0,.4), inset -.11vw -.18vw .52vw rgba(255,255,255,.2); -webkit-box-shadow: inset .11vw .18vw .52vw rgba(0,0,0,.4), inset -.11vw -.18vw .52vw rgba(255,255,255,.2); box-shadow: inset .11vw .18vw .52vw rgba(0,0,0,.4), inset -.11vw -.18vw .52vw rgba(255,255,255,.2); } .btn:focus:not(.disabled){ border: 1px solid #fbc93d; } .btn.main { color: #fbc93d; } .btn .fa { margin-left: 10px; } .group { width: 100%; } .group div { display: flex; margin-bottom: 10vh; }