site/style.css

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
  
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: #2b2b2b;
  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: 75vh;
  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: #AAA;
}

.sub-title span {
  color: #555;
}

.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;
}

.loading {
  font-size: 26pt;
  color: #FF5555;
  display: block;
  margin: 70px auto;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.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 svg {
  font-size: 42pt;
}

.icon-container a:hover {
  color: #FF5555;
  transition: color 0.25s ease-in-out;
}

a.mastodon {
  display: block;
  margin: 15px auto;
  filter: grayscale(100%);
  width: 35%;
  transition: all ease-in-out 0.1s;
  font-size: 0;
}

.mastodon:hover {
    filter: grayscale(0%);
    transition: all ease-in-out 0.1s;
}

.mastodon img {
    max-width: 100%;
}

/* 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;
}