body{
    background-color: #eee;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
h1{
    font-size: 22px;
}
h2{
    font-size: 17px;
    margin: 30px 0 10px;
}
a{
    color: #23a6d5;
    text-decoration: none;
    transition: all 300ms ease-out;
}
a:hover{
    color: #24a777;
}
.library{
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.backapps{
    display: block;
    position: fixed;
    text-decoration: none;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    z-index: 10;
}
.backapps::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
    clip-path:polygon(100% 0%, 20% 50%, 100% 100%, 100% 50%);
    background-color: #23a6d5;
    transition: all 500ms ease-out;
}
.backapps:hover::before{
    clip-path:polygon(100% 0%, 0% 50%, 100% 100%, 80% 50%);
    background-color: #24a777;
}
.animchar{
    margin: 0 auto;
    background-color: #47a2da;
    width: 100px;
    height: 100px;
    transition: all 500ms linear;
}

/* 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%);
}