styles.css

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

html,
body {
  padding-top:2%;
  overflow: hidden;
  background-color:black;font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  color: white;
}

.cinemagraph {
  background-image: url(https://media.giphy.com/media/Tq4teNuH1kHSM/giphy.gif);
  background-size: cover;
  background-position: bottom;
}

footer {
  position: absolute;
  font-size: 80%;
  color: white;
  text-align:right;
  right:0;
  padding-right:2%;
}

h1 {
    padding-top:2%;
    padding-left:2%;
    font-size: 200%;
}

p {
  padding-left:2%;
}

label {
  color: white;
  font-size: 150%;
  font-family: 'Roboto Mono', monospace;
  padding-bottom:10%;
}

.instructions {
  text-align:right;
}

audio {
    filter: sepia(30%) saturate(50%) grayscale(1) contrast(100%) invert(12%);
    height: 20px;
}

.container {
  display: block;
  padding-top: 10%;
  margin: 10px auto;
  width: 70%;
}

#wrapper {
  position: relative;
}

#tailHolder, #input{
  color:white;
  background-color:transparent;
  font-size: 12px;
  line-height: 10px;
  width: 100%;
  font-family: 'Roboto Mono', monospace;
}

#input {
  background-color:black;
  font-size: 12px;
  line-height: 30px;
  padding-top:2%;
  outline: none;
  border: none;
  border-bottom: 2px solid;
}

.gravity {
  position: fixed;
  width: auto;
  transition: transform 3s cubic-bezier(0.55, 0.085, 0.68, 0.53) .05s, opacity .8s ease-in;
}

.fall-right {
  transform: translate(30px, 100vh) rotate(20deg);
  opacity: 0;
}