/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    background-color: #ffffff;
}


div {
    max-width: 100%;
    margin: 0 auto;
    top: 10vh;
    position:relative;
}

div svg {
    width:320px;
    max-width:100%;
    height:auto;
    margin: 0 auto;
    display: block;
}

a{
    color: #aaa;
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: 100;
    font-size: 12px;
    position: relative;
    top: 40px;
    opacity: 0.5;
}

p{
    text-align: center;
    margin-top: 10px;
    font-family: sans-serif;
    font-weight: 100;
    font-size: 14px;
    color: #aaa;
}

a span{
    display: inline-block;
    width: 10px;
    text-align: center;
    opacity: 0.5;
}

svg path{
    transition: 1s ease-in-out;
}

.animation-on #path65-1-4-1-6-5{
    animation: svgmove 3s ease-in-out 1 alternate;
}

.animation-on #path62-4-1-7-6{
    animation: ballmove 3.15s ease-in-out 1 alternate;
    animation-delay: 0.15s;
}

:root{
    --path1: path("m 87.722003,113.36268 c -0.447848,0.33594 -0.915471,0.26407 -1.260617,0.15193 -1.128529,-0.36666 -1.460806,-1.75994 -1.527714,-2.13297 -0.02919,-0.16275 -0.209839,-0.46946 -0.492518,-0.39115 -0.272277,0.0754 -0.255428,0.43329 -0.228299,0.55013 0.294513,1.26839 0.917353,2.79998 2.867918,2.79998 0.472224,0 0.866699,-0.18112 1.190965,-0.45352 0.05857,-0.12771 0.07405,-0.80659 -0.549735,-0.5244 z");
    --path2: path("m 87.722003,113.36268 c -0.447848,0.33594 -1.097372,0.32195 -1.442518,0.20981 -1.128529,-0.36666 -1.77254,-1.5623 -2.002274,-1.86371 -0.10023,-0.13151 -0.400918,-0.32201 -0.616731,-0.12335 -0.207884,0.19132 -0.0296,0.5021 0.04785,0.59369 0.84078,0.99431 1.421881,2.16148 3.372446,2.16148 0.472224,0 0.866699,-0.18112 1.190965,-0.45352 0.05857,-0.12771 0.07405,-0.80659 -0.549735,-0.5244 z");
    --path3: path("m 87.722003,113.36268 c -0.447848,0.33594 -0.915471,0.26407 -1.260617,0.15193 -1.128529,-0.36666 -0.946546,-1.87437 -0.811986,-2.22866 0.05871,-0.15457 0.06162,-0.51052 -0.221068,-0.58881 -0.272266,-0.0754 -0.44196,0.24011 -0.478815,0.35426 -0.400076,1.23914 0.180691,3.2892 2.131256,3.2892 0.472224,0 0.866699,-0.18112 1.190965,-0.45352 0.05857,-0.12771 0.07405,-0.80659 -0.549735,-0.5244 z");

    --ball1: path("m 84.153859,109.74317 q 0.20121,-0.0255 0.351264,-0.17341 0.138935,-0.14609 0.14856,-0.4038 0.011,-0.29286 -0.158698,-0.51587 -0.169185,-0.23475 -0.526808,-0.18883 -0.223523,0.0287 -0.362454,0.17481 -0.14966,0.13579 -0.159287,0.3935 -0.011,0.29287 0.158244,0.52761 0.169186,0.23473 0.549178,0.18587 z");
    --ball2: path("m 83.021599,110.93975 q 0.140037,-0.14671 0.163161,-0.35614 0.01564,-0.201 -0.139458,-0.40703 -0.17621,-0.23418 -0.448563,-0.30016 -0.279362,-0.0754 -0.527881,0.18581 -0.155332,0.16327 -0.170961,0.36428 -0.03046,0.19977 0.124638,0.40581 0.176216,0.23418 0.455617,0.30956 0.27935,0.0754 0.543371,-0.20222 z");
    --ball3: path("m 85.897511,109.86299 q 0.17752,0.0981 0.385935,0.0672 0.198363,-0.036 0.358147,-0.23844 0.181628,-0.23 0.176139,-0.51018 0.0018,-0.28936 -0.314021,-0.46322 -0.197425,-0.10868 -0.395797,-0.0726 -0.200948,0.0214 -0.360734,0.2238 -0.181633,0.23001 -0.183429,0.51939 -0.0018,0.28934 0.33383,0.47403 z");
}

@keyframes svgmove {
    0%{
        d: var(--path1);
    }
    20%{
        d: var(--path2);
    }
    40%{
        d: var(--path3);
    }
    60%{
        d: var(--path2);
    }
    80%{
        d: var(--path3);
    }
    100%{
        d: var(--path1);
    }
}

@keyframes ballmove {
    0%{
        d: var(--ball1);
    }
    20%{
        d: var(--ball2);
    }
    40%{
        d: var(--ball3);
    }
    60%{
        d: var(--ball2);
    }
    80%{
        d: var(--ball3);
    }
    100%{
        d: var(--ball1);
    }
}


@media screen and (max-width: 340px) {
    html, body {
        max-width: 340px;
        overflow-x: hidden;
    }

    div {
        max-width: 340px;
    }
}