.note {
    font-size: 16px;
    padding: 3%;
    line-height: 24px;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    border-radius: 20px;
}

.person {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	line-height: 32px;
	color: #1f86b5;
}

#squi {
filter: drop-shadow(2px 2px 2px rgba(35, 24, 21, 0.2));
animation: squi 5s 5s alternate 4;
}
@keyframes squi {
0% {transform:translate(-200px, 0px) rotate(360deg);}
100% {transform:translate(1000px, 0px) rotate(1440deg);}
}


#dino {
/*filter: drop-shadow(30px 0px 3px rgba(0, 0, 0, 0.7));*/
width:calc(100%/4);
animation:dino 3s 7 forwards ;
}

/*@keyframes dino {
0%,30% {transform:rotate(15deg);}
30%, 85% {transform:rotate(0);}
100% {transform:rotate(-30deg);}
}

@keyframes dino {
0%,30% {transform:rotate(15deg);}
30%, 49% {transform:rotate(0);}
50% {transform:rotate(-30deg);}
60% {transform:translateX(20%);}
60% {transform:translateX(0%);}
85% {transform:translateX(120%) scale(1.7);}
100% {transform:translate(130%, -40%) rotate(30deg) scale(2);}
}*/

@keyframes dino {
0%,30% {transform:rotate(15deg);}
30%, 49% {transform:rotate(0);}
50% {transform:rotate(-30deg);}
60% {transform:translateX(20%);}
60% {transform:translateX(0%);}
75% {transform:translateX(120%) scale(1.7);}
70% {transform:translate(100%, 0%) rotatex(10deg) scale(1.7);}
72% {transform:translate(100%, 0%) rotatex(0deg) scale(1.6);}
73% {transform:translate(100%, 0%) rotatex(10deg) scale(1.4);}
74% {transform:translate(100%, 0%) rotatex(0deg) scale(1.3);}
75% {transform:translate(100%, 0%) rotatex(10deg) scale(1.1);}
76% {transform:translate(100%, 0%) rotatex(0deg) scale(1.2);}
77% {transform:translate(100%, 0%) rotatex(10deg) scale(1.0);}
78% {transform:translate(100%, 40%) rotatex(0deg) scale(0.5);}
100% {transform:translate(100%, 50%) rotatex(0deg) scale(0.3);}
}

#fire {
/*filter: drop-shadow(30px 0px 3px rgba(0, 0, 0, 0.7));*/
width:calc(100%/5);
/*transform-origin:translate(-10vw, -15vh);*/
animation:fire 3s 7 forwards;
}

/*@keyframes fire {
0% {transform:translate(-70%, -140%) scale(0);}
27% {transform:translate(-35%, -145%) scale(1);}
30% {transform:translate(-35%, -145%) scale(0.3);}
70% {transform:translate(-5%, -145%) scale(1.5);}
100% {transform:translate(-5%, -145%) scale(0);}
}*/

@keyframes fire {
0% {transform:translate(-70%, -140%) scale(0);}
5% {transform:translate(-35%, -145%) scale(1);}
8% {transform:translate(-35%, -145%) scale(0.3);}
10% {transform:translate(-5%, -145%) scale(1.5);}
30% {transform:translate(-23%, -145%) scale(1);}
40% {transform:translate(-3%, -145%) scale(1.7);}
50% {transform:translate(-5%, -145%) scale(0);}
100% {transform:translate(-5%, -145%) scale(0);}
}

#hand {
/*filter: drop-shadow(30px 0px 3px rgba(0, 0, 0, 0.7));*/
width:calc(100%/7);
transform:rotate(-80deg);
transform-origin:40% -70%;
animation:hand 3s 7 ;
}

/*@keyframes hand {
0% {transform:rotate(-80deg);transform-origin:40% -70%;}
3% {transform:rotate(-60deg);transform-origin:20% -90%;}
5% {transform:rotate(-45deg);transform-origin:-20% -130%;}
60% {transform:rotate(-30deg);transform-origin:-90% -190%;}
100% {transform:translate(-200%, -150%);}
}


@keyframes hand {
0% {transform:rotate(-80deg);transform-origin:40% -70%;}
1% {transform:rotate(-60deg);transform-origin:20% -90%;}
2% {transform:rotate(-45deg);transform-origin:-15% -120%;}
30% {transform:rotate(-30deg);transform-origin:-100% -170%;}
50% {transform:translate(-200%, -150%);}
60% {transform:rotate(-45deg);transform-origin:-15% -120%;}
61% {transform:rotate(-60deg);transform-origin:20% -90%;}
65% {transform:rotate(-80deg);transform-origin:40% -70%;}
100% {transform:rotate(-80deg);transform-origin:40% -70%;}
}*/

@keyframes hand {
0% {transform:rotate(-80deg);transform-origin:40% -70%;}
1% {transform:rotate(-60deg);transform-origin:20% -90%;}
2% {transform:rotate(-45deg);transform-origin:-15% -120%;}
30% {transform:rotate(-30deg);transform-origin:-100% -170%;}
50% {transform:translate(-200%, -150%);}
60% {transform:rotate(-45deg);transform-origin:-15% -120%;}
61% {transform:rotate(-60deg);transform-origin:20% -90%;}
65% {transform:rotate(-80deg);transform-origin:40% -70%;}
100% {transform:rotate(-80deg);transform-origin:40% -70%;}
}

#robot {
/*filter: drop-shadow(30px 0px 3px rgba(0, 0, 0, 0.7));*/
width:calc(100%/5);
animation:robot 3s 7 forwards;
}

@keyframes robot {
0%, 50% {transform:scale(1);}
50% {transform:scale(1.1);}
65% {transform:scale(1.2);}
70% {transform:scale(2.0);}
100% {transform:scale(1.5);}
}

#lfoot {
margin-top:30px;
width:150px;
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)) contrast(200%);
animation: lf 3s forwards;
}
@keyframes lf {
0% {transform: translate(22em,0em) rotateZ(-30deg);}
20% {transform: translate(9em,0.25em) rotateZ(42deg);}
35% {transform: translate(13em,0em) rotateZ(-30deg);}
50% {transform: translate(0em,0.25em) rotateZ(42deg);}
65% {transform: translate(4em,0em) rotateZ(-30deg);}
80% {transform: translate(-9em,0.25em) rotateZ(42deg);}
85%, 90% {transform: translate(-12em,-3em) rotateZ(75deg);}
91%, 95% {transform: translate(-8em,0em) rotateZ(10deg);}
100% {transform: translate(-8em,0.25em) rotateZ(-10deg) rotateY(180deg);}
}

#rfoot {
margin-top:30px;
width:150px;
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)) contrast(200%);
animation: rf 3s forwards;
}
@keyframes rf {
0% {transform: translate(24em,0em) rotateZ(0deg);}
20%{transform: translate(22em,0em) rotateZ(-72deg);}
35% {transform: translate(15em,0em) rotateZ(0deg);}
50% {transform: translate(13em,0em) rotateZ(-72deg);}
65% {transform: translate(6em,0em) rotateZ(0deg);}
80% {transform: translate(4em,0em) rotateZ(-72deg);}
91%,95% {transform: translate(0em,0em) rotateZ(-30deg);}
100% {transform: translate(0em,0em) rotateZ(30deg) rotateY(180deg);}
}

#rolling {
width:100px;
filter: drop-shadow(7px 7px 2px rgba(0, 0, 0, 0.7));
animation: roll 3s both;
animation-delay: 1s;
}
@keyframes roll {
0% {transform: translate(-24em,0em) rotateZ(0deg);filter: opacity(0);}
45% {transform: translate(-24em,0em) rotateZ(360deg);filter: opacity(0);}
46% {transform: translate(-24em,0em) rotateZ(720deg);filter: opacity(1) drop-shadow(7px 7px 2px rgba(0, 0, 0, 0.7));}
100% {transform: translate(30em,0em) rotateZ(1800deg);filter: opacity(1)drop-shadow(7px 7px 2px rgba(0, 0, 0, 0.7));}
}