body {
    background-size: cover;
    background-color: black;

}



}
@import url(https://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
  box-sizing:border-box;
}
*{
  font-family: 'Lato', sans-serif;
    
}
div.foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

h3{
  color: #f5f5f5;
}


.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0.2em;
  position: relative;
  color: #3b5998;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}


.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  color: #696969;
  top:0;
  left:0;
}


.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;

}


.letter:before{
  color: #696969;
  text-shadow: 
    -1px 0px 1px rgba(105,105,105,1),
    1px 0px 1px rgba(105,105,105,1);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}


.letter:after{
  color: rgba(180,180,180,0.05);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}


.letter:hover:before{
  color: #f5f5f5;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}

.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}


#content{
	display: flex;
	flex-direction: row;
	margin-bottom: 50px;
  color: #696969

}


#text{
	width: 50%;
	margin-left: auto;
	margin-right: auto; 	
}

#gif{
	margin-left: 100px;

}





h3{
	font-weight: bolder;
	font-size: 32px;
	width: 33%;
}

@media(max-width:1000px){
	#content{flex-direction: column;
		align-items: center;
					}
		
	#gif{
						margin-bottom: 50px;
						margin-left: 0;

					}




}