.hidden{
    display: none;
}
.run{
    margin: 0 auto;
}
.animchar{
    margin: 30px auto;
    background-color: #47a2da;
    width: 60px;
    height: 60px;
    transition: all 300ms linear;
}
.lucky .animchar{
    background-color: #e25583;
}
.can{
    width: 200px;
    height: 184px;
    margin: 0 auto;
    background-position: center;
    background-size: contain;
    background-image: url(cola-can1.jpg);
    transition: all 200ms linear;
}
.moved .can{
    background-image: url(cola-can2.jpg);
}
.cutted .can{
    background-image: url(cola-can3.jpg);
}

/* alextade minimal bold letters */
.animchar[data-char="a"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 60% 100%, 60% 30%, 40% 30%, 40% 50%, 60% 50%, 60% 80%, 40% 80%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="b"]{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 100%, 0% 100%);
}
.animchar[data-char="c"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 40%, 100% 40%, 40% 40%, 40% 40%, 40% 40%, 40% 60%, 40% 60%, 100% 60%, 100% 60%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="d"]{
    clip-path:polygon(0% 0%, 0% 0%, 80% 0%, 80% 0%, 100% 20%, 100% 20%, 100% 81%, 80% 100%, 60% 100%, 60% 50%, 40% 30%, 40% 70%, 60% 50%, 60% 100%, 60% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="e"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 80%, 100% 80%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="f"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 60%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="g"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 80%, 80% 80%, 80% 60%, 60% 60%, 60% 40%, 100% 40%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="h"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 40%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="i"]{
    clip-path:polygon(30% 0%, 30% 0%, 30% 0%, 30% 0%, 30% 0%, 70% 0%, 70% 0%, 70% 0%, 70% 0%, 70% 100%, 70% 100%, 70% 100%, 70% 100%, 30% 100%, 30% 100%, 30% 100%, 30% 100%);
}
.animchar[data-char="j"]{
    clip-path:polygon(60% 0%, 60% 0%, 60% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 60%, 0% 60%, 40% 60%, 40% 60%, 40% 80%, 40% 80%, 60% 80%, 60% 80%);
}
.animchar[data-char="k"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="l"]{
    clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 0%, 40% 60%, 40% 60%, 40% 60%, 100% 60%, 100% 60%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="m"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 50% 10%, 50% 10%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 40%, 50% 50%, 40% 40%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="n"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 60% 40%, 60% 40%, 60% 0%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 40% 60%, 40% 60%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="o"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 60% 100%, 60% 100%, 60% 40%, 40% 40%, 40% 60%, 60% 60%, 60% 60%, 60% 100%, 60% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="p"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 80%, 100% 80%, 40% 80%, 40% 100%, 0% 100%, 0% 50%, 60% 50%, 60% 30%, 40% 30%, 40% 50%, 40% 50%, 0% 50%, 0% 50%);
}
.animchar[data-char="q"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 90%, 100% 90%, 60% 90%, 60% 35%, 40% 35%, 40% 55%, 60% 55%, 60% 100%, 40% 100%, 40% 90%, 40% 90%, 0% 90%, 0% 90%);
}
.animchar[data-char="r"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="s"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 40%, 100% 40%, 100% 100%, 0% 100%, 0% 80%, 60% 80%, 60% 60%, 60% 60%, 0% 60%, 0% 60%)
}
.animchar[data-char="t"]{
    clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 40%, 100% 40%, 70% 40%, 70% 40%, 70% 100%, 70% 100%, 30% 100%, 30% 100%, 30% 40%, 30% 40%, 0% 40%, 0% 40%);
}
.animchar[data-char="u"]{
    clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 60%, 40% 60%, 60% 60%, 60% 60%, 60% 0%, 60% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="v"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 60%, 40% 60%, 50% 70%, 60% 60%, 60% 0%, 100% 0%, 100% 80%, 80% 100%, 80% 100%, 20% 100%, 20% 100%, 0% 80%, 0% 80%);
}
.animchar[data-char="w"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 60%, 40% 60%, 50% 50%, 60% 60%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="x"]{
    clip-path:polygon(0% 0%, 0% 0%, 30% 0%, 50% 20%, 70% 0%, 100% 0%, 100% 30%, 80% 50%, 100% 70%, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0% 100%, 0% 70%, 20% 50%, 0% 30%);
}
.animchar[data-char="y"]{
    clip-path:polygon(0% 0%, 0% 0%, 30% 0%, 30% 0%, 50% 20%, 50% 20%, 70% 0%, 100% 0%, 100% 30%, 70% 60%, 70% 100%, 30% 100%, 30% 100%, 30% 60%, 30% 60%, 0% 30%, 0% 30%);
}
.animchar[data-char="z"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 30%, 100% 30%, 60% 70%, 60% 70%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 0% 70%, 40% 30%, 40% 30%, 0% 30%, 0% 30%);
}


.animchar[data-char="gama"]{
    clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 40%, 100% 40%, 100% 40%, 40% 40%, 40% 40%, 40% 100%, 40% 100%, 40% 100%, 0% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="delta"]{
    clip-path:polygon(30% 0%, 30% 0%, 70% 0%, 70% 0%, 100% 40%, 100% 40%, 100% 100%, 0% 100%, 0% 70%, 70% 70%, 50% 40%, 30% 70%, 30% 70%, 0% 70%, 0% 70%, 0% 40%, 0% 40%);
}
.animchar[data-char="theta"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="lamda"]{
    clip-path:polygon(30% 0%, 30% 0%, 70% 0%, 70% 0%, 100% 60%, 100% 60%, 100% 100%, 100% 100%, 70% 100%, 50% 50%, 50% 50%, 30% 100%, 30% 100%, 0% 100%, 0% 100%, 0% 60%, 0% 60%);
}
.animchar[data-char="ksi"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 20%, 100% 20%, 0% 20%, 0% 20%, 0% 40%, 100% 40%, 100% 60%, 0% 60%, 0% 80%, 0% 80%, 100% 80%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="pi"]{
    clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 100%, 60% 40%, 60% 40%, 40% 40%, 40% 40%, 40% 100%, 40% 100%, 0% 100%, 0% 100%, 0% 100%)
}
.animchar[data-char="sigma"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 30%, 100% 30%, 50% 30%, 70% 50%, 50% 70%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 20% 50%, 20% 50%, 0% 30%, 0% 30%);
}
.animchar[data-char="phi"]{
    clip-path:polygon(35% 0%, 35% 0%, 65% 0%, 100% 30%, 100% 60%, 65% 90%, 65% 60%, 80% 45%, 65% 30%, 65% 100%, 35% 100%, 35% 30%, 20% 45%, 35% 60%, 35% 90%, 0% 60%, 0% 30%);
}
.animchar[data-char="psi"]{
    clip-path:polygon(0% 0%, 0% 0%, 30% 0%, 30% 0%, 30% 50%, 50% 30%, 70% 50%, 70% 0%, 100% 0%, 100% 80%, 65% 80%, 65% 100%, 35% 100%, 35% 80%, 35% 80%, 0% 80%, 0% 80%);
}
.animchar[data-char="omega"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%, 100% 80%, 100% 60%, 0% 60%, 0% 40%, 70% 40%, 70% 20%, 30% 20%, 30% 40%, 0% 40%, 0% 40%);
}