body {background-color: #333;color: #eee;}

/* 
font-family: 'Indie Flower', cursive;
font-family: 'Shadows Into Light', cursive;
font-family: 'Kaushan Script', cursive;
font-family: 'Tangerine', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Philosopher', sans-serif;
font-family: 'Monoton', cursive;
font-family: 'Homemade Apple', cursive;
*/

h1 {font-family: 'Kaushan Script', cursive;font-size:48px;position: absolute;top:35%;left:35%;}

html, body {
	width: 100%;  
  height: 100%;
  background: #FF7777;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  height: 100px;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-size: 80px;
  color: #83BEFE;
  text-shadow: 0 1px 0 #fff,
               0 2px 0 #fff,
               0 3px 0 #fff,
               0 4px 0 #fff,
               0 5px 0 #fff,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}

h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }

@keyframes bounce {
  100% {
    top: -5px;
    text-shadow: 0 1px 0 #eee,
                 0 2px 0 #eee,
                 0 3px 0 #eee,
                 0 4px 0 #eee,
                 0 5px 0 #eee,
                 0 6px 0 #eee,
                 0 7px 0 #eee,
                 0 8px 0 #eee,
                 0 9px 0 #eee,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

nav {position: fixed;top:0;left:0;width:100%;padding:10px;text-align: center;}
nav a {font-family: 'Philosopher', sans-serif;text-decoration: none;font-size: 24px; color: #fff;display: inline-block;margin:0 10px;}
nav a:hover {text-decoration: none;}

footer {position: absolute;bottom:15px;width:100%;dispaly:block;text-align: center;}

/* link styles */
.portfolio-experiment {
	 background: #2d2d2d;
}
 .portfolio-experiment a {
	 color: white;
	 padding: 0.7em calc(0.7em * 1.2);
	 display: inline-block;
	 border: 3px solid transparent;
	 position: relative;
	 font-size: 1.5em;
	 cursor: pointer;
	 letter-spacing: 0.07em;
}
 .portfolio-experiment a .text {
	 font-family: proxima-nova, monospace;
	 transform: translate3d(0, 0.7em, 0);
	 display: block;
	 transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
 .portfolio-experiment a:after {
	 position: absolute;
	 content: '';
	 bottom: -3px;
	 left: calc(0.7em * 1.2);
	 right: calc(0.7em * 1.2);
	 height: 3px;
	 background: #83BEFE;
	 transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
	 transform-origin: left;
}
 .portfolio-experiment .line {
	 position: absolute;
	 background: #FF7777;
}
 .portfolio-experiment .line.-right, .portfolio-experiment .line.-left {
	 width: 3px;
	 bottom: -3px;
	 top: -3px;
	 transform: scale3d(1, 0, 1);
}
 .portfolio-experiment .line.-top, .portfolio-experiment .line.-bottom {
	 height: 3px;
	 left: -3px;
	 right: -3px;
	 transform: scale3d(0, 1, 1);
}
 .portfolio-experiment .line.-right {
	 right: -3px;
	 transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
	 transform-origin: top;
}
 .portfolio-experiment .line.-top {
	 top: -3px;
	 transition: transform 0.08s linear 0.43s;
	 transform-origin: left;
}
 .portfolio-experiment .line.-left {
	 left: -3px;
	 transition: transform 0.08s linear 0.51s;
	 transform-origin: bottom;
}
 .portfolio-experiment .line.-bottom {
	 bottom: -3px;
	 transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
	 transform-origin: right;
}
 .portfolio-experiment a:hover .text, .portfolio-experiment a:active .text {
	 transform: translate3d(0, 0, 0);
	 transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
 .portfolio-experiment a:hover:after, .portfolio-experiment a:active:after {
	 transform: scale3d(0, 1, 1);
	 right: -3px;
	 left: -3px;
	 transform-origin: right;
	 transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
}
 .portfolio-experiment a:hover .line, .portfolio-experiment a:active .line {
	 transform: scale3d(1, 1, 1);
}
 .portfolio-experiment a:hover .line.-right, .portfolio-experiment a:active .line.-right {
	 transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
	 transform-origin: bottom;
}
 .portfolio-experiment a:hover .line.-top, .portfolio-experiment a:active .line.-top {
	 transition: transform 0.08s linear 0.4s;
	 transform-origin: right;
}
 .portfolio-experiment a:hover .line.-left, .portfolio-experiment a:active .line.-left {
	 transition: transform 0.08s linear 0.48s;
	 transform-origin: top;
}
 .portfolio-experiment a:hover .line.-bottom, .portfolio-experiment a:active .line.-bottom {
	 transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
	 transform-origin: left;
}