body {
display: grid;
place-items: center;
height: 100vh;
font-family: 'Press Start 2P';
overflow: hidden;
background: #6a88fe;
}
body .fireworks {
position: absolute;
height: 16px;
width: 16px;
-webkit-transform: scale(2);
transform: scale(2);
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/NES%20-%20Super%20Mario%20Bros%20-%20Items%20Objects%20and%20NPCs.png");
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
background-size: 16px 49px;
z-index: 9;
background-position: 50% 0px;
opacity: 0;
}
@-webkit-keyframes fade {
to {
opacity: 0;
}
}
@keyframes fade {
to {
opacity: 0;
}
}
@-webkit-keyframes boom {
from {
background-position: 50% 0px;
opacity: 1;
}
to {
background-position: 50% -32px;
opacity: 1;
}
}
@keyframes boom {
from {
background-position: 50% 0px;
opacity: 1;
}
to {
background-position: 50% -32px;
opacity: 1;
}
}
body:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
box-shadow: inset 0 5px 0 0 #222;
top: calc(50% + 25px);
background-color: #222;
background-image: linear-gradient(335deg, #e54f08 23px, transparent 23px), linear-gradient(155deg, #e54f08 23px, transparent 23px), linear-gradient(335deg, #e54f08 23px, transparent 23px), linear-gradient(155deg, #e54f08 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
body #wrap {
width: 600px;
height: 60px;
position: relative;
}
body #wrap .submit {
cursor: pointer;
}
body #wrap .submit:hover ~ .pipe:after {
letter-spacing: 2px;
}
body #wrap .email:focus ~ .field:after {
-webkit-transform: translate(0, -50%) scale(1);
transform: translate(0, -50%) scale(1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body #wrap.run ~ .fireworks {
-webkit-animation: boom 0.5s steps(2, end) 1 forwards, fade 0s ease-in-out 1 forwards;
animation: boom 0.5s steps(2, end) 1 forwards, fade 0s ease-in-out 1 forwards;
top: 15%;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(1) {
-webkit-animation-delay: 2.6s, 3.35s;
animation-delay: 2.6s, 3.35s;
left: calc(75% - 50px);
}
body #wrap.run ~ .fireworks:nth-of-type(1):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 2.85s, 3.6s;
animation-delay: 2.85s, 3.6s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(2) {
-webkit-animation-delay: 2.7s, 3.45s;
animation-delay: 2.7s, 3.45s;
left: calc(75% - 100px);
}
body #wrap.run ~ .fireworks:nth-of-type(2):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 2.95s, 3.7s;
animation-delay: 2.95s, 3.7s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(3) {
-webkit-animation-delay: 2.8s, 3.55s;
animation-delay: 2.8s, 3.55s;
left: calc(75% - 150px);
}
body #wrap.run ~ .fireworks:nth-of-type(3):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.05s, 3.8s;
animation-delay: 3.05s, 3.8s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(4) {
-webkit-animation-delay: 2.9s, 3.65s;
animation-delay: 2.9s, 3.65s;
left: calc(75% - 200px);
}
body #wrap.run ~ .fireworks:nth-of-type(4):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.15s, 3.9s;
animation-delay: 3.15s, 3.9s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(5) {
-webkit-animation-delay: 3s, 3.75s;
animation-delay: 3s, 3.75s;
left: calc(75% - 250px);
}
body #wrap.run ~ .fireworks:nth-of-type(5):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.25s, 4s;
animation-delay: 3.25s, 4s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(6) {
-webkit-animation-delay: 3.1s, 3.85s;
animation-delay: 3.1s, 3.85s;
left: calc(75% - 300px);
}
body #wrap.run ~ .fireworks:nth-of-type(6):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.35s, 4.1s;
animation-delay: 3.35s, 4.1s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(7) {
-webkit-animation-delay: 3.2s, 3.95s;
animation-delay: 3.2s, 3.95s;
left: calc(75% - 350px);
}
body #wrap.run ~ .fireworks:nth-of-type(7):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.45s, 4.2s;
animation-delay: 3.45s, 4.2s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(8) {
-webkit-animation-delay: 3.3s, 4.05s;
animation-delay: 3.3s, 4.05s;
left: calc(75% - 400px);
}
body #wrap.run ~ .fireworks:nth-of-type(8):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.55s, 4.3s;
animation-delay: 3.55s, 4.3s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(9) {
-webkit-animation-delay: 3.4s, 4.15s;
animation-delay: 3.4s, 4.15s;
left: calc(75% - 450px);
}
body #wrap.run ~ .fireworks:nth-of-type(9):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.65s, 4.4s;
animation-delay: 3.65s, 4.4s;
}
body #wrap.run ~ .fireworks:nth-of-type(3n) {
-webkit-transform: scale(3);
transform: scale(3);
}
body #wrap.run ~ .fireworks:nth-of-type(4n) {
-webkit-transform: scale(1);
transform: scale(1);
}
body #wrap.run ~ .fireworks:nth-of-type(10) {
-webkit-animation-delay: 3.5s, 4.25s;
animation-delay: 3.5s, 4.25s;
left: calc(75% - 500px);
}
body #wrap.run ~ .fireworks:nth-of-type(10):nth-of-type(even) {
top: 25%;
-webkit-animation-delay: 3.75s, 4.5s;
animation-delay: 3.75s, 4.5s;
}
body #wrap.run .field {
overflow: hidden;
}
body #wrap.run .field:before {
-webkit-transition-delay: 4s;
transition-delay: 4s;
-webkit-transform: translateX(600px);
transform: translateX(600px);
}
body #wrap.run .pipe {
width: 100vw;
-webkit-transition: 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
body #wrap.run .pipe:after {
-webkit-transition-delay: 0s, 0s;
transition-delay: 0s, 0s;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
body #wrap.run .pipe:before {
top: -12.5%;
height: 125%;
}
body #wrap.run div p .word span {
-webkit-animation: grow2 0.5s ease-in-out 1 forwards, run2 1.5s ease-in 1 forwards;
animation: grow2 0.5s ease-in-out 1 forwards, run2 1.5s ease-in 1 forwards;
}
@-webkit-keyframes grow2 {
to {
-webkit-transform: translateX(0px) translateY(-4px);
transform: translateX(0px) translateY(-4px);
}
}
@keyframes grow2 {
to {
-webkit-transform: translateX(0px) translateY(-4px);
transform: translateX(0px) translateY(-4px);
}
}
@-webkit-keyframes run2 {
from {
-webkit-transform: translateX(0px) translateY(-4px);
transform: translateX(0px) translateY(-4px);
}
to {
-webkit-transform: translateX(500px) translateY(-4px);
transform: translateX(500px) translateY(-4px);
}
}
@keyframes run2 {
from {
-webkit-transform: translateX(0px) translateY(-4px);
transform: translateX(0px) translateY(-4px);
}
to {
-webkit-transform: translateX(500px) translateY(-4px);
transform: translateX(500px) translateY(-4px);
}
}
body #wrap.run div p .word span:before {
-webkit-animation: grow 0.5s ease-in-out 1 forwards, run 0.35s steps(3, start) infinite;
animation: grow 0.5s ease-in-out 1 forwards, run 0.35s steps(3, start) infinite;
-webkit-animation-delay: 0s, 0.5s;
animation-delay: 0s, 0.5s;
}
body #wrap.run div p .word span:nth-of-type(39) {
-webkit-animation-delay: 0.0333333333s, 0.5333333333s;
animation-delay: 0.0333333333s, 0.5333333333s;
}
body #wrap.run div p .word span:nth-of-type(39):before {
-webkit-animation-delay: 0.0333333333s, 0.5333333333s;
animation-delay: 0.0333333333s, 0.5333333333s;
}
body #wrap.run div p .word span:nth-of-type(38) {
-webkit-animation-delay: 0.0666666667s, 0.5666666667s;
animation-delay: 0.0666666667s, 0.5666666667s;
}
body #wrap.run div p .word span:nth-of-type(38):before {
-webkit-animation-delay: 0.0666666667s, 0.5666666667s;
animation-delay: 0.0666666667s, 0.5666666667s;
}
body #wrap.run div p .word span:nth-of-type(37) {
-webkit-animation-delay: 0.1s, 0.6s;
animation-delay: 0.1s, 0.6s;
}
body #wrap.run div p .word span:nth-of-type(37):before {
-webkit-animation-delay: 0.1s, 0.6s;
animation-delay: 0.1s, 0.6s;
}
body #wrap.run div p .word span:nth-of-type(36) {
-webkit-animation-delay: 0.1333333333s, 0.6333333333s;
animation-delay: 0.1333333333s, 0.6333333333s;
}
body #wrap.run div p .word span:nth-of-type(36):before {
-webkit-animation-delay: 0.1333333333s, 0.6333333333s;
animation-delay: 0.1333333333s, 0.6333333333s;
}
body #wrap.run div p .word span:nth-of-type(35) {
-webkit-animation-delay: 0.1666666667s, 0.6666666667s;
animation-delay: 0.1666666667s, 0.6666666667s;
}
body #wrap.run div p .word span:nth-of-type(35):before {
-webkit-animation-delay: 0.1666666667s, 0.6666666667s;
animation-delay: 0.1666666667s, 0.6666666667s;
}
body #wrap.run div p .word span:nth-of-type(34) {
-webkit-animation-delay: 0.2s, 0.7s;
animation-delay: 0.2s, 0.7s;
}
body #wrap.run div p .word span:nth-of-type(34):before {
-webkit-animation-delay: 0.2s, 0.7s;
animation-delay: 0.2s, 0.7s;
}
body #wrap.run div p .word span:nth-of-type(33) {
-webkit-animation-delay: 0.2333333333s, 0.7333333333s;
animation-delay: 0.2333333333s, 0.7333333333s;
}
body #wrap.run div p .word span:nth-of-type(33):before {
-webkit-animation-delay: 0.2333333333s, 0.7333333333s;
animation-delay: 0.2333333333s, 0.7333333333s;
}
body #wrap.run div p .word span:nth-of-type(32) {
-webkit-animation-delay: 0.2666666667s, 0.7666666667s;
animation-delay: 0.2666666667s, 0.7666666667s;
}
body #wrap.run div p .word span:nth-of-type(32):before {
-webkit-animation-delay: 0.2666666667s, 0.7666666667s;
animation-delay: 0.2666666667s, 0.7666666667s;
}
body #wrap.run div p .word span:nth-of-type(31) {
-webkit-animation-delay: 0.3s, 0.8s;
animation-delay: 0.3s, 0.8s;
}
body #wrap.run div p .word span:nth-of-type(31):before {
-webkit-animation-delay: 0.3s, 0.8s;
animation-delay: 0.3s, 0.8s;
}
body #wrap.run div p .word span:nth-of-type(30) {
-webkit-animation-delay: 0.3333333333s, 0.8333333333s;
animation-delay: 0.3333333333s, 0.8333333333s;
}
body #wrap.run div p .word span:nth-of-type(30):before {
-webkit-animation-delay: 0.3333333333s, 0.8333333333s;
animation-delay: 0.3333333333s, 0.8333333333s;
}
body #wrap.run div p .word span:nth-of-type(29) {
-webkit-animation-delay: 0.3666666667s, 0.8666666667s;
animation-delay: 0.3666666667s, 0.8666666667s;
}
body #wrap.run div p .word span:nth-of-type(29):before {
-webkit-animation-delay: 0.3666666667s, 0.8666666667s;
animation-delay: 0.3666666667s, 0.8666666667s;
}
body #wrap.run div p .word span:nth-of-type(28) {
-webkit-animation-delay: 0.4s, 0.9s;
animation-delay: 0.4s, 0.9s;
}
body #wrap.run div p .word span:nth-of-type(28):before {
-webkit-animation-delay: 0.4s, 0.9s;
animation-delay: 0.4s, 0.9s;
}
body #wrap.run div p .word span:nth-of-type(27) {
-webkit-animation-delay: 0.4333333333s, 0.9333333333s;
animation-delay: 0.4333333333s, 0.9333333333s;
}
body #wrap.run div p .word span:nth-of-type(27):before {
-webkit-animation-delay: 0.4333333333s, 0.9333333333s;
animation-delay: 0.4333333333s, 0.9333333333s;
}
body #wrap.run div p .word span:nth-of-type(26) {
-webkit-animation-delay: 0.4666666667s, 0.9666666667s;
animation-delay: 0.4666666667s, 0.9666666667s;
}
body #wrap.run div p .word span:nth-of-type(26):before {
-webkit-animation-delay: 0.4666666667s, 0.9666666667s;
animation-delay: 0.4666666667s, 0.9666666667s;
}
body #wrap.run div p .word span:nth-of-type(25) {
-webkit-animation-delay: 0.5s, 1s;
animation-delay: 0.5s, 1s;
}
body #wrap.run div p .word span:nth-of-type(25):before {
-webkit-animation-delay: 0.5s, 1s;
animation-delay: 0.5s, 1s;
}
body #wrap.run div p .word span:nth-of-type(24) {
-webkit-animation-delay: 0.5333333333s, 1.0333333333s;
animation-delay: 0.5333333333s, 1.0333333333s;
}
body #wrap.run div p .word span:nth-of-type(24):before {
-webkit-animation-delay: 0.5333333333s, 1.0333333333s;
animation-delay: 0.5333333333s, 1.0333333333s;
}
body #wrap.run div p .word span:nth-of-type(23) {
-webkit-animation-delay: 0.5666666667s, 1.0666666667s;
animation-delay: 0.5666666667s, 1.0666666667s;
}
body #wrap.run div p .word span:nth-of-type(23):before {
-webkit-animation-delay: 0.5666666667s, 1.0666666667s;
animation-delay: 0.5666666667s, 1.0666666667s;
}
body #wrap.run div p .word span:nth-of-type(22) {
-webkit-animation-delay: 0.6s, 1.1s;
animation-delay: 0.6s, 1.1s;
}
body #wrap.run div p .word span:nth-of-type(22):before {
-webkit-animation-delay: 0.6s, 1.1s;
animation-delay: 0.6s, 1.1s;
}
body #wrap.run div p .word span:nth-of-type(21) {
-webkit-animation-delay: 0.6333333333s, 1.1333333333s;
animation-delay: 0.6333333333s, 1.1333333333s;
}
body #wrap.run div p .word span:nth-of-type(21):before {
-webkit-animation-delay: 0.6333333333s, 1.1333333333s;
animation-delay: 0.6333333333s, 1.1333333333s;
}
body #wrap.run div p .word span:nth-of-type(20) {
-webkit-animation-delay: 0.6666666667s, 1.1666666667s;
animation-delay: 0.6666666667s, 1.1666666667s;
}
body #wrap.run div p .word span:nth-of-type(20):before {
-webkit-animation-delay: 0.6666666667s, 1.1666666667s;
animation-delay: 0.6666666667s, 1.1666666667s;
}
body #wrap.run div p .word span:nth-of-type(19) {
-webkit-animation-delay: 0.7s, 1.2s;
animation-delay: 0.7s, 1.2s;
}
body #wrap.run div p .word span:nth-of-type(19):before {
-webkit-animation-delay: 0.7s, 1.2s;
animation-delay: 0.7s, 1.2s;
}
body #wrap.run div p .word span:nth-of-type(18) {
-webkit-animation-delay: 0.7333333333s, 1.2333333333s;
animation-delay: 0.7333333333s, 1.2333333333s;
}
body #wrap.run div p .word span:nth-of-type(18):before {
-webkit-animation-delay: 0.7333333333s, 1.2333333333s;
animation-delay: 0.7333333333s, 1.2333333333s;
}
body #wrap.run div p .word span:nth-of-type(17) {
-webkit-animation-delay: 0.7666666667s, 1.2666666667s;
animation-delay: 0.7666666667s, 1.2666666667s;
}
body #wrap.run div p .word span:nth-of-type(17):before {
-webkit-animation-delay: 0.7666666667s, 1.2666666667s;
animation-delay: 0.7666666667s, 1.2666666667s;
}
body #wrap.run div p .word span:nth-of-type(16) {
-webkit-animation-delay: 0.8s, 1.3s;
animation-delay: 0.8s, 1.3s;
}
body #wrap.run div p .word span:nth-of-type(16):before {
-webkit-animation-delay: 0.8s, 1.3s;
animation-delay: 0.8s, 1.3s;
}
body #wrap.run div p .word span:nth-of-type(15) {
-webkit-animation-delay: 0.8333333333s, 1.3333333333s;
animation-delay: 0.8333333333s, 1.3333333333s;
}
body #wrap.run div p .word span:nth-of-type(15):before {
-webkit-animation-delay: 0.8333333333s, 1.3333333333s;
animation-delay: 0.8333333333s, 1.3333333333s;
}
body #wrap.run div p .word span:nth-of-type(14) {
-webkit-animation-delay: 0.8666666667s, 1.3666666667s;
animation-delay: 0.8666666667s, 1.3666666667s;
}
body #wrap.run div p .word span:nth-of-type(14):before {
-webkit-animation-delay: 0.8666666667s, 1.3666666667s;
animation-delay: 0.8666666667s, 1.3666666667s;
}
body #wrap.run div p .word span:nth-of-type(13) {
-webkit-animation-delay: 0.9s, 1.4s;
animation-delay: 0.9s, 1.4s;
}
body #wrap.run div p .word span:nth-of-type(13):before {
-webkit-animation-delay: 0.9s, 1.4s;
animation-delay: 0.9s, 1.4s;
}
body #wrap.run div p .word span:nth-of-type(12) {
-webkit-animation-delay: 0.9333333333s, 1.4333333333s;
animation-delay: 0.9333333333s, 1.4333333333s;
}
body #wrap.run div p .word span:nth-of-type(12):before {
-webkit-animation-delay: 0.9333333333s, 1.4333333333s;
animation-delay: 0.9333333333s, 1.4333333333s;
}
body #wrap.run div p .word span:nth-of-type(11) {
-webkit-animation-delay: 0.9666666667s, 1.4666666667s;
animation-delay: 0.9666666667s, 1.4666666667s;
}
body #wrap.run div p .word span:nth-of-type(11):before {
-webkit-animation-delay: 0.9666666667s, 1.4666666667s;
animation-delay: 0.9666666667s, 1.4666666667s;
}
body #wrap.run div p .word span:nth-of-type(10) {
-webkit-animation-delay: 1s, 1.5s;
animation-delay: 1s, 1.5s;
}
body #wrap.run div p .word span:nth-of-type(10):before {
-webkit-animation-delay: 1s, 1.5s;
animation-delay: 1s, 1.5s;
}
body #wrap.run div p .word span:nth-of-type(9) {
-webkit-animation-delay: 1.0333333333s, 1.5333333333s;
animation-delay: 1.0333333333s, 1.5333333333s;
}
body #wrap.run div p .word span:nth-of-type(9):before {
-webkit-animation-delay: 1.0333333333s, 1.5333333333s;
animation-delay: 1.0333333333s, 1.5333333333s;
}
body #wrap.run div p .word span:nth-of-type(8) {
-webkit-animation-delay: 1.0666666667s, 1.5666666667s;
animation-delay: 1.0666666667s, 1.5666666667s;
}
body #wrap.run div p .word span:nth-of-type(8):before {
-webkit-animation-delay: 1.0666666667s, 1.5666666667s;
animation-delay: 1.0666666667s, 1.5666666667s;
}
body #wrap.run div p .word span:nth-of-type(7) {
-webkit-animation-delay: 1.1s, 1.6s;
animation-delay: 1.1s, 1.6s;
}
body #wrap.run div p .word span:nth-of-type(7):before {
-webkit-animation-delay: 1.1s, 1.6s;
animation-delay: 1.1s, 1.6s;
}
body #wrap.run div p .word span:nth-of-type(6) {
-webkit-animation-delay: 1.1333333333s, 1.6333333333s;
animation-delay: 1.1333333333s, 1.6333333333s;
}
body #wrap.run div p .word span:nth-of-type(6):before {
-webkit-animation-delay: 1.1333333333s, 1.6333333333s;
animation-delay: 1.1333333333s, 1.6333333333s;
}
body #wrap.run div p .word span:nth-of-type(5) {
-webkit-animation-delay: 1.1666666667s, 1.6666666667s;
animation-delay: 1.1666666667s, 1.6666666667s;
}
body #wrap.run div p .word span:nth-of-type(5):before {
-webkit-animation-delay: 1.1666666667s, 1.6666666667s;
animation-delay: 1.1666666667s, 1.6666666667s;
}
body #wrap.run div p .word span:nth-of-type(4) {
-webkit-animation-delay: 1.2s, 1.7s;
animation-delay: 1.2s, 1.7s;
}
body #wrap.run div p .word span:nth-of-type(4):before {
-webkit-animation-delay: 1.2s, 1.7s;
animation-delay: 1.2s, 1.7s;
}
body #wrap.run div p .word span:nth-of-type(3) {
-webkit-animation-delay: 1.2333333333s, 1.7333333333s;
animation-delay: 1.2333333333s, 1.7333333333s;
}
body #wrap.run div p .word span:nth-of-type(3):before {
-webkit-animation-delay: 1.2333333333s, 1.7333333333s;
animation-delay: 1.2333333333s, 1.7333333333s;
}
body #wrap.run div p .word span:nth-of-type(2) {
-webkit-animation-delay: 1.2666666667s, 1.7666666667s;
animation-delay: 1.2666666667s, 1.7666666667s;
}
body #wrap.run div p .word span:nth-of-type(2):before {
-webkit-animation-delay: 1.2666666667s, 1.7666666667s;
animation-delay: 1.2666666667s, 1.7666666667s;
}
body #wrap.run div p .word span:nth-of-type(1) {
-webkit-animation-delay: 1.3s, 1.8s;
animation-delay: 1.3s, 1.8s;
}
body #wrap.run div p .word span:nth-of-type(1):before {
-webkit-animation-delay: 1.3s, 1.8s;
animation-delay: 1.3s, 1.8s;
}
body #wrap.run div p .word span:nth-of-type(0) {
-webkit-animation-delay: 1.3333333333s, 1.8333333333s;
animation-delay: 1.3333333333s, 1.8333333333s;
}
body #wrap.run div p .word span:nth-of-type(0):before {
-webkit-animation-delay: 1.3333333333s, 1.8333333333s;
animation-delay: 1.3333333333s, 1.8333333333s;
}
body #wrap input {
opacity: 0;
z-index: 9;
}
body #wrap input, body #wrap div {
position: absolute;
height: 100%;
box-sizing: border-box;
width: 25%;
left: 75%;
top: 0;
}
body #wrap input.pipe, body #wrap div.pipe {
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%, #01a500), color-stop(75%, #73ff72), color-stop(85%, #73ff72), color-stop(85%, #01a500));
background: linear-gradient(to bottom, #01a500 75%, #73ff72 75%, #73ff72 85%, #01a500 85%);
box-shadow: inset 0 0 0 5px #222;
-webkit-transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body #wrap input.pipe:after, body #wrap div.pipe:after {
content: 'SUBMIT';
position: absolute;
height: 100%;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
color: #fff;
-webkit-transition: letter-spacing 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: letter-spacing 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), letter-spacing 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), letter-spacing 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-delay: 1s, 0s;
transition-delay: 1s, 0s;
}
body #wrap input.pipe:before, body #wrap div.pipe:before {
content: '';
position: absolute;
width: 25px;
top: 50%;
background: inherit;
box-shadow: inherit;
left: -20px;
height: 0px;
-webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body #wrap input.field, body #wrap div.field {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body #wrap input.field p, body #wrap div.field p {
background: #fff;
box-shadow: inset 0 5px 0 0 #222, inset 0 -5px 0 0 #222, inset 5px 0 0 0 #222;
position: relative;
z-index: 10;
}
body #wrap input.field:after, body #wrap div.field:after {
content: '';
height: 30px;
width: 4px;
background: #222;
margin-left: 20px;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%) scale(0);
transform: translate(0, -50%) scale(0);
z-index: 9;
-webkit-animation: flash 0.5s linear infinite alternate;
animation: flash 0.5s linear infinite alternate;
-webkit-transition: 0s ease-in-out;
transition: 0s ease-in-out;
-webkit-transition-delay: 3s;
transition-delay: 3s;
}
@-webkit-keyframes flash {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
50.01% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
50.01% {
opacity: 1;
}
100% {
opacity: 1;
}
}
body #wrap input.field:before, body #wrap div.field:before {
content: '';
-webkit-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
position: absolute;
width: calc(100% + 5px);
height: 100%;
box-shadow: inset 0 0 0 5px #222;
left: 0;
top: 0;
background: #fff;
}
body #wrap input.field p, body #wrap input.field .word, body #wrap div.field p, body #wrap div.field .word {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;
margin: 0;
}
body #wrap input.field .word, body #wrap div.field .word {
padding-left: 15px;
}
body #wrap input.field span.char, body #wrap div.field span.char {
font-size: 18px;
width: 18px;
height: 18px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: relative;
color: #222;
-webkit-transform: translateX(0px) translateY(5px);
transform: translateX(0px) translateY(5px);
}
body #wrap input.field span.char:before, body #wrap div.field span.char:before {
content: '';
position: absolute;
left: calc(50% - 1.25px);
top: calc(50% + 25px);
width: 48px;
height: 60px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/mariohead.png");
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
background-size: 192px 96px;
background-position: -48px 100%;
-webkit-transform: translate(-50%, -50%) scale(0.85);
transform: translate(-50%, -50%) scale(0.85);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
@-webkit-keyframes run {
from {
background-position: -96px 100%;
}
to {
background-position: 48px 100%;
}
}
@keyframes run {
from {
background-position: -96px 100%;
}
to {
background-position: 48px 100%;
}
}
@-webkit-keyframes grow {
to {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
@keyframes grow {
to {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
body #wrap input.email, body #wrap input.field, body #wrap div.email, body #wrap div.field {
width: 75%;
left: 0;
}