@-ms-viewport {
  width: device-width;
}

.unsupported-message {
  max-width: 600px;
  margin: 150px auto 0 auto;
  display: block;
}

.unsupported-message img {
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.loading-cover {
  max-width: 600px;
  margin: 150px auto 0 auto;
  display: none;
}

.loading-cover img {
  height: 200px;
  width: 200px;

  -webkit-animation-name: spin;
  -webkit-animation-duration: 900ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 900ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 900ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@-webkit-keyframes rainbow {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}
@keyframes rainbow { 
  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}
}

.page-content {
  display: none;
}

html.supported-browser .unsupported-message {
  display: none;
}

html.supported-browser.loading .loading-cover {
  display: block;
}

html.loaded .page-content {
  display: block;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-family: Lato, Arial, Helvetica, sans-serif;
}

body {
  background-color: #010916;
  background-image: linear-gradient(#010916, #110d38);
  
  transition: background-color 400ms;
}

body.party-mode {
  background-size: 1800% 1800%;
  background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3) !important;
  -webkit-animation: rainbow 8s ease infinite;
  -moz-animation: rainbow 8s ease infinite;
  animation: rainbow 8s ease infinite;
}

body.light-theme {
  background-color: #fff !important;
  background-image: none !important;
  color: #010916;
}

h1, h2, h3, p {
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: inherit;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10000;
}

.outer-space {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: table;
  z-index: -9000;
}

.inner {
  display: table-cell;
  vertical-align: middle;
}

body.nyan-mode .rocket {
  display: none !important;
}

.rocket {
  height: 703px;
  display: block !important;
}

.rocket > img {
  margin: 20px auto 0 auto;
}

body.light-theme .rocket > .dark {
  display: none;
}

body:not(.light-theme) .rocket > .light {
  display: none;
}

.rocket .porthole {
  height: 150px;
  width: 150px;
  position: relative;
  top: -500px;
  left: calc(50% - 75px);
  z-index: -9999;
  background-color: #5D7582;
}

.rocket .porthole img {
  width: 100px;
  position: relative;
  top: 80px;
  transition: top 800ms ease 0s;
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

html:hover .porthole img {
  top: 25px;
}

#toot-form {
  visibility: hidden;
}

#toot-form input {
  width: 120px;
  border: none;
  background-color: rgba(57, 57, 57, 0.5);
  font-family: inherit;
  font-size: inherit;
  color: white;
  border-bottom: 2px solid #1B6397;
}

#toot-form button {
  background-color:  #1B6397;
  border: none;
  color: white;
  padding: 3px 5px;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
}

#toot-form button:hover {
  background-color: #175581;
  cursor: pointer;
}

body.nyan-mode {
  background-color: #104374;
  background-image: none !important;
}

body:not(.nyan-mode) .nyan {
  display: none !important;
}

.nyan {
  height: 703px;
  display: block !important;
}

.nyan img {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.nyan .cat {
  height: 300px;
}

.nyan .trail {
  height: 230px;
  position: relative;
  top: 859px;
  z-index: -9999;
}

.information {
  position: absolute;
  bottom: 100px;
  right: 150px;
  text-align: right;
}

.information h1 {
  margin: 0;
}

.information h3 {
  margin: 0 0 15px 0;
}

#meew-mode-button, #light-mode-button {
  position: absolute;
  top: 5px;
  right: 5px;
}

body.nyan-mode #meew-mode-button, body:not(.nyan-mode) #light-mode-button {
  display: none;
}
body.nyan-mode #light-mode-button, body:not(.nyan-mode) #meew-mode-button {
  display: inline-block;
}

#nyan-mode-button {
  position: absolute;
  top: 5px;
  left: 5px;
}

@media screen and (max-width: 768px) {
  .page-content {
    height: 100vh;
  }

  .outer-space {
    position: static;
    width: 100%;
    flex-grow: 1;
  }

  .outer-space, .outer-space .inner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .rocket {
    max-height: 65vh;
  }

  .rocket .porthole img {
    max-width: 100%;
    width: auto;
  }

  .information {
    height: 30vh;
    flex-shrink: 0;
  }

  .information h1 {
    font-size: 28px;
  }

  .information h3 {
    font-size: 20px;
  }

  html.loaded .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .information {
    position: static;
    padding: 10px 20px;
  }
}

/* * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake-hard
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-hard{display:inline-block;transform-origin:center center}@keyframes shake-hard{2%{transform:translate(-2px, 5px) rotate(2.5deg)}4%{transform:translate(6px, -8px) rotate(-2.5deg)}6%{transform:translate(-1px, -7px) rotate(3.5deg)}8%{transform:translate(-4px, 4px) rotate(-0.5deg)}10%{transform:translate(2px, -9px) rotate(2.5deg)}12%{transform:translate(3px, 0px) rotate(-0.5deg)}14%{transform:translate(-1px, -5px) rotate(1.5deg)}16%{transform:translate(3px, -5px) rotate(-2.5deg)}18%{transform:translate(5px, 2px) rotate(2.5deg)}20%{transform:translate(-6px, -4px) rotate(3.5deg)}22%{transform:translate(-1px, -5px) rotate(-2.5deg)}24%{transform:translate(-4px, 3px) rotate(3.5deg)}26%{transform:translate(-3px, 3px) rotate(-0.5deg)}28%{transform:translate(5px, 8px) rotate(3.5deg)}30%{transform:translate(1px, -6px) rotate(-0.5deg)}32%{transform:translate(3px, 2px) rotate(2.5deg)}34%{transform:translate(6px, -2px) rotate(0.5deg)}36%{transform:translate(-3px, -1px) rotate(0.5deg)}38%{transform:translate(4px, 9px) rotate(2.5deg)}40%{transform:translate(-5px, 6px) rotate(2.5deg)}42%{transform:translate(-4px, 5px) rotate(-2.5deg)}44%{transform:translate(8px, 10px) rotate(1.5deg)}46%{transform:translate(3px, 9px) rotate(0.5deg)}48%{transform:translate(3px, -2px) rotate(3.5deg)}50%{transform:translate(-4px, -3px) rotate(-1.5deg)}52%{transform:translate(7px, 5px) rotate(3.5deg)}54%{transform:translate(7px, 1px) rotate(2.5deg)}56%{transform:translate(0px, 1px) rotate(1.5deg)}58%{transform:translate(-6px, -8px) rotate(2.5deg)}60%{transform:translate(4px, 8px) rotate(-2.5deg)}62%{transform:translate(10px, -4px) rotate(-2.5deg)}64%{transform:translate(2px, 5px) rotate(2.5deg)}66%{transform:translate(0px, 6px) rotate(0.5deg)}68%{transform:translate(-3px, 3px) rotate(2.5deg)}70%{transform:translate(10px, -4px) rotate(-1.5deg)}72%{transform:translate(5px, 5px) rotate(3.5deg)}74%{transform:translate(7px, -8px) rotate(2.5deg)}76%{transform:translate(6px, -2px) rotate(0.5deg)}78%{transform:translate(-7px, 5px) rotate(3.5deg)}80%{transform:translate(-7px, 8px) rotate(0.5deg)}82%{transform:translate(7px, -9px) rotate(-1.5deg)}84%{transform:translate(-8px, 9px) rotate(-2.5deg)}86%{transform:translate(-3px, 7px) rotate(-1.5deg)}88%{transform:translate(0px, 4px) rotate(-0.5deg)}90%{transform:translate(8px, 3px) rotate(0.5deg)}92%{transform:translate(-2px, -9px) rotate(3.5deg)}94%{transform:translate(-7px, -7px) rotate(-1.5deg)}96%{transform:translate(9px, 2px) rotate(2.5deg)}98%{transform:translate(3px, -6px) rotate(-2.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-hard.shake-enabled{animation:shake-hard 100ms ease-in-out infinite}