<div id="Parallax-content">
   <section class="card">
      <div class="inner-card">
         <header>
            <h1>Hugh Balboa</h1></header>         
         <p>Web Developer</p>
         <p>Contact </p>
         <p>federbbalboa@gmail.com</p>
         <p><a target="_blank" href="https://www.creativescape.agency"> www.creativescape.agency</a></p>
         <footer>
            <!-- social__item twitter -->
            <div class="social__item">
               <a target="_blank" href="https://twitter.com/hughbalboa" class="social__icon--twitter"><i class="icon--twitter"></i></a>
            </div>
            <!-- social__item github -->
            <div class="social__item">
               <a target="_blank" href="https://github.com/hughbalboa" class="social__icon--github"><i class="icon--github"></i></a>
            </div>
            <!-- /social__item github -->
         </footer>
       </div>
   </section>
</div>

@charset "UTF-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
}

.social__item {
   display: inline-block;
   margin-right: 0.1em;
}

.icon,
[class^="icon--"] {
   font-family: 'entypo';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.social__icon,
[class^="social__icon"] {
   font-size: 1.4em;
   color: white;
   text-decoration: none;
   border-radius: 100%;
   width: 2.2em;
   height: 2.2em;
   text-align: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.social__container {
   padding: 1em;
   font-size: 1.5em;
}

.icon--twitter::before {
   content: "";
}

.social__icon--twitter {
   background-color: #32b9e7;
}

.social__icon--twitter:hover {
   background-color: #2a9dc4;
}

.icon--github::before {
   content: "";
}

.social__icon--github {
   background-color: #333333;
}

.social__icon--github:hover {
   background-color: #2b2b2b;
}

h1 {
   font-family: 'Lato';
   font-weight: 800;
   font-size: 2.5em;
}

p {
   font-family: 'Lato';
   font-weight: 800;
   font-size: 1em;
}

.inner-card {
   margin-top: 10px;
}

#Parallax-content {
   padding: 1em 2em;
   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172203/bg-133936.jpg);
   background-size: 1920px;
   height: 100vh;
   background-repeat: no-repeat;
}

a {
   text-decoration: none;
   color: #2b2b2b;
}

.card {
   text-align: center;
   width: 320px;
   margin: 0 auto;
   position:relative;
   border-radius: 0.2em;
   background: rgba(255, 255, 255, 0.7);
   padding: 1em;
   overflow: hidden;
   padding-top: 1em;
}

//simple jQuery Parallax Mouse Movement 
// by Hugh Balboa
$('body').mousemove(function(e) {
   var amountMovedX = (e.pageX * -0.53 / 6);
   var amountMovedY = (e.pageY * -0.53 / 6);
   $('.card').css('left', amountMovedX + 'px');
    $('.card').css('top', amountMovedY + 'px');
});