html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, p { margin: 0; } #site { position: absolute; top: 0; left: 0; background-color: #2b2b2b; min-width: 100vw; min-height: 100vh; margin: 0; color: #FFF; font-family: "Lato", sans-serif; } #content { display: block; margin-right: auto; margin-left: auto; width: 750px; max-width: 90vw; margin-top: 40vh; transform: translateY(-50%) } #main-container { background-color: #3b3b3b; margin-top: 10px; padding: 5px; border-radius: 5px 5px 0px 0px; width: 100%; box-shadow: 3px 3px 7px rgba(0,0,0,0.25); } #navbar { width: 100%; /* Whitespace hack */ font-size: 0; text-align: center; } #page { width: 100%; padding: 15px 5px 8px 5px; } .title { font-size: 32pt; font-weight: 300; text-align: center; } .sub-title { font-size: 10pt; color: #AAA; text-align: center; } .sub-title span { color: #555; } .nav-button { display: inline-block; border-bottom: solid 3px #2b2b2b; background-color: #3b3b3b; transition: background 0.15s ease-in-out, border 0.5s ease-in-out; padding: 10px 5px; box-sizing: border-box; margin: 0; text-align: center; width: 33%; /* Undo whitespace hack */ font-size: 12pt; cursor: pointer; } .nav-button:hover { background-color: #4b4b4b; transition: background 0.15s ease-in-out; } .nav-button.active { border-color: #FF5555; transition: background 0.15s ease-in-out, border 0.5s ease-in-out; } .initial-text { font-size: 18pt; text-align: center; margin-top: 50px; margin-bottom: 50px; } .notice { color: #3b3b3b; text-align: right; } /* Thanks StackOverflow, heck if I can remember this stuff */ .noselect, .nav-button, .notice { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }