html,body {
    position: relative;
    padding: 0;
    height : 100%;
    background-color: #000;
    overflow: hidden;
  }
  body:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-image: url('https://yt3.ggpht.com/-F3xsHu2gwi0/AAAAAAAAAAI/AAAAAAAAAAA/f9z1AVL4-H0/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
    -webkit-animation: leaves 5s ease-in-out infinite alternate;
    animation: leaves 5s ease-in-out infinite alternate;
  }
  @-webkit-keyframes leaves {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.3);
    }
}
@keyframes leaves {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.3);
    }
}

p {
  margin: 4px 0;
}

  #quote {
    font-family: "monospace";
    position: absolute;
    top: 35%;
    left: 50%;
    transform : translate(-50%,-50%);
    font-size: 40px;
    display: inline-block;
    width: 80%;
    text-align: center;
    color: white;
    text-shadow: 0 0 200px gold;
  }
  #quote:before {
    position: relative;
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('https://yt3.ggpht.com/-F3xsHu2gwi0/AAAAAAAAAAI/AAAAAAAAAAA/f9z1AVL4-H0/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
    background-size: 100px;
    border-radius: 100%;
    margin: auto auto 50px auto;
    border: 5px solid white;
  }
  #quotebutton,
  #twitteranchor {
    position: absolute;
    top: 70%;
    left: 50%;

    transform : translate(-50%,-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
  }

  #twitteranchor {
    top: 80%;

    width: 34px;
  }

  #quotebutton:hover,
  #twitteranchor:hover { cursor:pointer; }