html,body {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background: #202020;
    overflow: hidden;
    font-size: 3vw;
  }

.container{
  margin: 15vh 3vw 0;
}

.bottom{
  bottom: 15px;
  width: 100%;
  text-align: center;
  position: absolute;
  color:#454545;
  font-family:Inconsolata;
}

  /* quote css */

  #quote{
    color:white;
    font-family : Inconsolata;
    position: relative;
    letter-spacing: 1.4px;
    margin: 10px;
  }
  /* source css */

  #author{
    opacity:1;
    font-size: 1em;
    padding-right:2em;
    text-align: right;
    color:white;
    font-family : Inconsolata;
    position: relative;
    -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  }
  /* for the after stage of the source */

  .fade {
    opacity:0 !important;
  }
  /* for the after stage of the quote.*/

  .executed {
    opacity:1;
    right: 0;
    -webkit-transition: all 2s ease-in-out;
      -moz-transition: all 2s ease-in-out;
      -o-transition: all 2s ease-in-out;
      transition: all 2s ease-in-out;
  }
  /* for the before stage of the quote; should slide right when presented and left when removed.  */

  .reset {
    opacity:0;
    right:600;
    -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  }