body, html {
    height: 100%;
    margin: 0;
    color: #f1f1f1;
    background: #111; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(#333, #111, #000); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#333, #111, #000); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#333, #111, #000); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#333, #111, #000); /* Standard syntax */
    height: 100vh;
    overflow-x: hidden;
}

.container {
    height: 100%;
    font-family: "Courier New", Courier, monospace;
}

.middle {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    font-weight: bolder;
    font-size: 2em;
}

.img-center{
  margin: auto;
}

hr {
    margin: auto;
    width: 40%;
    border-color: #333;
  
}

@media screen and (min-width: 769px)  {
  #demo {
    font-size: 2em;
  }
}

@media screen and (max-width: 768px)  {
  #demo {
    font-size: 1.5em;
  }
  
  h1 {
    font-size: 1em;
  }
}

@media screen and (max-width: 480px)  {
  #demo {
    font-size: 1.25em;
  }
  
  h1 {
    font-size: 0.75em;
  }
}

@media screen and (max-width: 280px)  {
  #demo {
    font-size: 0.75em;
  }
  h1 {
    font-size: 0.50em;
  }
}

/* fix iOS bug not displaying 100vh correctly */
 @media only screen and (orientation : landscape) {
   .middle {
       height: 100%;
   }
 }