body {
  background: url('assets/images/galaxy.jpg');
  background-repeat-x: no-repeat;
  background-attachment: fixed;
  background-position-x: center;
  background-size: 100%;
  margin: 0;
  color: white;
  font-family: 'Share Tech Mono', monospace;
}

a {
  color: lightblue;
}

strong, h3 {
  color: orange;
}

li {
  list-style-type: square;
}

.centered-title {
  text-align: center;
  line-height: 100vh;
  margin: 0;
}

.centered-title.subtitle {
  line-height: 90vh;
  margin-top: 8vh;
  color: white;
}

.profile {
  background-image: url("assets/images/profile.jpg");
  background-size: cover;
  background-position: center;
  border: 1px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 25%;
  left: calc(50vw - 50px);
}

.viewport {
  width: 100%;
  min-height: 100vh;
}

.viewport.half {
  min-height: 50vh;
  height: 50vh;
}

.dark {
  background-color: rgba(0,0,0,0.5);
}

.cat-container {
  position: fixed;
  overflow: hidden;
}

.container {
  position: relative;
  top: 100vh;
  padding: 10px;
  box-sizing: border-box;
}

.flying-cat {
  position: absolute;
  opacity: 0.8;
}

.flying-cat:first-of-type {
  -webkit-animation: catA 10s linear infinite, spin 8s linear infinite;
  animation: catA 10s linear infinite, spin 8s linear infinite;
}
.flying-cat:nth-of-type(2) {
  -webkit-animation: catB 10s linear infinite, spin 8s linear infinite;
  animation: catB 10s linear infinite, spin 8s linear infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.flying-cat:nth-of-type(3) {
  -webkit-animation: catC 10s linear infinite, spin 8s linear infinite;
  animation: catC 10s linear infinite, spin 8s linear infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.flying-cat:nth-of-type(4) {
  -webkit-animation: catD 10s linear infinite, spin 8s linear infinite;
  animation: catD 10s linear infinite, spin 8s linear infinite;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

@-webkit-keyframes pulse {
  0% { opacity: 0.5; font-size: 1.2em;}
  75% { opacity: 1; font-size: 1.5em;}
  100% { opacity: 0.5; font-size: 1.2em;}
}
@keyframes pulse {
  0% { opacity: 0.5; font-size: 1.2em;}
  75% { opacity: 1; font-size: 1.5em;}
  100% { opacity: 0.5; font-size: 1.2em;}
}

@-webkit-keyframes catA {
  0% { top: 100px; left: -200px; }
  100% { top: 400px; left: calc(100vw + 200px); }
}
@keyframes catA {
  0% { top: 100px; left: -200px; }
  100% { top: 400px; left: calc(100vw + 200px); }
}

@-webkit-keyframes catB {
  0% { top: 100vh; right: -200px; }
  100% { top: 300px; right: calc(100vw + 200px); }
}
@keyframes catB {
  0% { top: 100vh; right: -200px; }
  100% { top: 300px; right: calc(100vw + 200px); }
}

@-webkit-keyframes catC {
  0% { top: -200px; left: 100px; }
  100% { top: 100vh; left: calc(100vw - 100px); }
}
@keyframes catC {
  0% { top: -200px; left: 100px; }
  100% { top: 100vh; left: calc(100vw - 100px); }
}

@-webkit-keyframes catD {
  0% { top: 90vh; left: -200px; }
  100% { top: -200px; left: calc(100vw + 200px); }
}
@keyframes catD {
  0% { top: 90vh; left: -200px; }
  100% { top: -200px; left: calc(100vw + 200px); }
}

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}