style.css

body{
  background: #001f3f; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, #663399, #001f3f); /* Safari */
  background: -o-radial-gradient(circle, #663399,  #001f3f); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, #663399,  #001f3f); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, #663399,  #001f3f); /* Standard syntax */
  font-family: 'Varela Round', sans-serif;
}

.container {
  text-align: center;
}

.container h1 {
  font-size: 3.3rem;
  color: white;
}

.container h2 {
  font-size: 1.3rem;
  color: white;
}

.result{
  border: #000 1px solid;
  min-height: 200px;
  padding: 10px;
  border-radius: 8px;
  border: #FFF 3px solid;
  background-color: rgba(190,190,190,0.5);
}

#app{
  display: inline-block;
  text-align: center;;
  width: 100%;
}

textarea{
  padding: 10px;
  border-radius: 8px;
  border: #FFF 3px solid;
  background: transparent;
  color: white;
  font-weight: bolder;
  width: 90%;
}

footer{
  margin-top: 40px;
  color: #BBB;
  text-align: center;
  padding: 0 10px;
}

footer a{
  color: white;
}

footer a:hover{
  color: yellow;
}

@media (min-width: 1024px) {
  #app {
    width: 60%;
  }


}