@import 'https://fonts.googleapis.com/css?family=Baloo+Paaji';

/*Background Gradient Animation*/
.bg_animation {
  width: 100%;
  height: 100%;
  display: flex;
    position: absolute;
    top: 0;
    left: 0;
  align-items: center;
  justify-content: center;
  background-size: 300% 300%;
  background-image: linear-gradient(
        -90deg, 
        rgba(200,200,200,1) 0%, 
        rgba(163,136,116,1) 20%, 
        rgba(237,235,114,1) 40%, 
        rgba(78,146,100,1) 60%,
        rgba(158,213,232,1) 100%

  );  
  animation: AnimateBG 15s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/*Selfie Blur*/
#self {
    position: relative;
    z-index: 10;
    height: 50%;
    -webkit-filter: blur(10px);
	filter: blur(10px);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

/*When mouse hovers over selfie, unblur*/
#self:hover {
    -webkit-filter: blur(0);
	filter: blur(0);
}

/*Styling for 'Hello World' text*/
.bg_animation div span {
    font-family: 'Baloo Paaji', cursive;
    left: 0;
    position:absolute;
    text-align:center;
    margin-bottom: 200px;
    width: 100%;
    -webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
    opacity: 0;
    font-size: 40px;
    color: #444;
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); 
}

/*When Selfie is moused over, reveal 'Hello World' text*/
.bg_animation img:hover+span {
	margin-top: 10px;
	opacity: 1;
}