html, body { margin: 0; padding: 0; overflow: hidden; } body { height: 100vh; width: 100vw; background-image: url('assets/bg-1440p.jpg'); background-color: #2b2b2b; background-size: cover; background-position: bottom right; background-repeat: no-repeat; } h1, h2, h3, h4, h5, p { margin: 0; } a, a:visited { color: #FF5555; text-decoration: none; } a:hover { color: #FF9999; } /* Main IDs forthe site */ #site { position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.5); min-width: 100vw; min-height: 100vh; max-width: 100vw; max-height: 100vh; overflow: hidden; 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: 25vh; max-height: 50vh; } #main-container { background-color: #3b3b3b; margin-top: 10px; padding: 5px; box-sizing: border-box; border-radius: 5px 5px 0px 0px; max-height: 50vh; overflow-y: auto; overflow-x: hidden; width: 100%; box-shadow: 3px 3px 7px rgba(0,0,0,0.25); } @media only screen and (max-device-width: 600px), only screen and (max-device-height: 600px) { #content { margin-top: 5vh; } #main-container { max-height: 60vh; } } #navbar { width: 100%; /* Whitespace hack */ font-size: 0; text-align: center; } #page { width: 100%; padding: 15px 5px 8px 5px; } #splits { text-align: center; width: 100%; font-size: 0; } #split1, #split2 { display: inline-block; width:50%; height: 100%; vertical-align: middle; padding: 5px; box-sizing: border-box; } #split1 { display: inline-block; width: 40%; text-align: right; } #split2 { display: inline-block; width: 40%; text-align: left; } /* Core site components */ #split1 img { height: 120px; width: auto; border-radius: 100%; box-shadow: 2px 2px 8px rgba(0,0,0,0.25); } .title { font-size: 32pt; font-weight: 300; } .sub-title { font-size: 10pt; color: #EEE; } .sub-title span { color: #AAA; } .nav-button { display: inline-block; border-bottom: solid 3px #2b2b2b; background-color: #3b3b3b; color: #AAA; transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s 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; color: #FFF; transition: background 0.15s ease-in-out, color 0.15s ease-in-out; } .nav-button.active { border-color: #FF5555; color: #FFF; transition: background 0.15s ease-in-out, border 0.5s ease-in-out, color 0.15s ease-in-out; } #page p.initial-text:first-child { font-size: 18pt; text-align: center; margin-top: 70px; margin-bottom: 70px; } .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 */ } /* Animations */ @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* Social media icons */ .icon-container { display: block; text-align: center; width: 100%; font-size: 0; } .icon-container a { display: inline-block; padding: 10px; margin: 35px; box-sizing: border-box; font-size: 12pt; color: #FFFFFF; transition: color 0.25s ease-in-out; text-decoration: none; } .icon-container a .fa { font-size: 42pt; } .icon-container a:hover { color: #FF5555; transition: color 0.25s ease-in-out; } /* Page contents */ #page p { margin-top: 5px; margin-bottom: 15px; font-size: 13pt; line-height: 1.25em; } #page p:last-child { margin-bottom: 0; } #page h1, #page h2, #page h3 { margin-top: 15px; font-weight: 300; text-align: center; margin-bottom: 5px; } #page h1 { font-size: 28pt; } #page h1:first-child { margin-top: 0; } .notice-container { color: #AAA; text-align: center; } #page .notice-container p { font-size: 8pt; margin: 0; } .highlight { color: #FF5555; }