/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Nastaliq+Urdu:wght@400..700&family=Noto+Rashi+Hebrew:wght@100..900&family=Noto+Sans+Cuneiform&family=Noto+Sans+Indic+Siyaq+Numbers&family=Noto+Sans+Math&family=Noto+Sans+Mayan+Numerals&family=Noto+Sans+SignWriting&family=Noto+Sans+Symbols+2&family=Noto+Sans+Symbols:wght@100..900&family=Noto+Sans+Tagalog&family=Noto+Sans+Tai+Viet&family=Noto+Sans+Wancho&family=Noto+Serif+Ahom&family=Noto+Serif+Balinese&family=Noto+Serif+Bengali:wght@100..900&family=Noto+Serif+Devanagari:wght@100..900&family=Noto+Serif+Dogra&family=Noto+Serif+Georgian:wght@100..900&family=Noto+Serif+Gujarati:wght@100..900&family=Noto+Serif+Hentaigana:wght@200..900&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif+KR:wght@200..900&family=Noto+Serif+Kannada:wght@100..900&family=Noto+Serif+Lao:wght@100..900&family=Noto+Serif+Makasar&family=Noto+Serif+Malayalam:wght@100..900&family=Noto+Serif+Ottoman+Siyaq&family=Noto+Serif+SC:wght@200..900&family=Noto+Serif+Sinhala:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif+Tamil:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Telugu:wght@100..900&family=Noto+Serif+Thai:wght@100..900&family=Noto+Serif+Tibetan:wght@100..900&family=Noto+Serif+Todhri&family=Noto+Serif+Vithkuqi:wght@400..700&display=swap');
*/

:root {
  --star-path: path("M25 40 c -2,-3 -25,15 -12,-12 c -2,-5 -18,-12 6,-14 c 5,-3 10,-21 17,0 c 2,5 25,3 4,16 c -4,3 9,24 -15,9.9");
  --comsi-path: path("M1 2 H7 M9 2 H9 M1 4 H7 M9 4 H9 M1 6 H7 M9 6 H9 M1 8 H7 M9 8 H9");
  --link-path: path("M-6 9 a3 3 0 0 0 0 6 h3 a3 3 0 0 0 3 -4 M3 15 a3 3 0 0 0 0 -6 h-3 a3 3 0 0 0 -3 4");
  --ired-path: path("M15.5 37 c5,-35 5,-40 -7,-30 C6,12 9,20 12.2,36 Q13.5,40 15.5,37 M15 41 A.9 1 0 0 0 14 48 A.7 1 0 0 0 15 41");
  --play-path: path("M53 53 c-2,-5 -3,-9 -8,-9.5 c0,0 -3,1 -6,4 c-3,2.5 10,9 15,10 c3,1 -1,-5 1.5,-17 c0,0 -1,-1.5 -2,-1.5 c0,0 -5,2 -9.8,5 c2,2 2,-1 9.5,-4 c0,0 -1,3 .5,16 c0,0 -14,-6 -12,-9 c0,0 6,-7 12,10");
  --book-t-path: path("M9 19 c2,-5 3,-13 9,-10 c5,5 -3,-2 -7,9 M21 10 c0,0 1,-.5 2.6,.5 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 1.5,1.5 -.2,17 c0,0 14,-6 12,-9");
  --book-c-path: path("M9 19 c0,-5 3,-12 1,-16 c4,2 4,5 -1,16 M21 10 c0,0 1,-.5 2.6,.5 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 1.5,1.5 -.2,17 c0,0 14,-6 12,-9");
  --book-o-path: path("M9 19 c0,-9 6,-5 9,-10 c4,1 4,5 -9,10 M21 10 c0,0 1,-.5 2.6,.5 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 1.5,1.5 -.2,17 c0,0 14,-6 12,-9");
}

.stroke {fill: none;
  stroke: black;
  stroke-linecap: round;
}
svg.fill {fill:black !important;}

.play path {d:var(--play-path)}
svg.up {stroke: white !important; padding: 5%}
svg.up path {d: path("M0 40 l25 -20 l25 20 l-25 -15 l-25 15");}
.upbtn[disabled] path, .upbtn:active path, .up.ing path {animation: upping 1s infinite !important;}

svg.star path {d: var(--star-path)}
svg.star:hover path {animation: star-anim 1s;}

svg.comsi path {d: var(--comsi-path)}
svg.comsi:hover path {animation: comsi-anim 1s ease-in}

svg.link path {d: var(--link-path);
  transform: rotate(-45deg);}
svg.link:hover path {animation: link-path 1s}

svg.ired {stroke: orangered !important}
svg.ired.fill {fill: orangered !important}
svg.ired path {d: var(--ired-path)}
svg.ired:hover path {animation: ired-anim 1s}

.emoji {position:relative; height:calc(var(--font-size) + 5pt); margin-bottom:-5pt}

.book path {
    d: var(--book-c-path);
    animation: 1s book infinite ease-in;
}

@keyframes upping {
    90% {d: path("M0 20 l25 -20 l25 20 l-25 -15 l-25 15")}
}

@keyframes star-anim {
  15%, 20% {
    d: path("M25 43 c -2,-3 -28,15 -12,-13 c -2,-5 -18,-15 6,-13 c 5,-3 13,-21 17,0 c 2,5 22,5 4,16 c -4,3 7,25 -15,9.9");
  }
  50% {
    d: path("M25 38 c -2,-3 -9,15 -12,-13 c -2,-5 -15,-15 6,-13 c 5,-3 13,-21 17,0 c 2,5 20,5 4,16 c -4,3 5,25 -15,9.9");
  }
  100% {d: var(--star-path)}
}

@keyframes comsi-anim {
  10% {d: path("M5 2 H7 M9 2 H9 M5 4 H7 M9 4 H9 M5 6 H7 M9 6 H9 M5 8 H7 M9 8 H9")}
  30% {d: path("M1 2 H7 M9 2 H9 M5 4 H7 M9 4 H9 M7 6 H7 M9 6 H9 M7 8 H7 M9 8 H9")}
  50% {d: path("M1 2 H7 M9 2 H9 M1 4 H7 M9 4 H9 M5 6 H7 M9 6 H9 M7 8 H7 M9 8 H9")}
  90% {d: var(--comsi-path)}
}

@keyframes link-path {
  50% {d: path("M-6.8 9 a3 3 0 0 0 0 6 h3 a3 3 0 0 0 3 -4 M3.8 15 a3 3 0 0 0 0 -6 h-3 a3 3 0 0 0 -3 4")}
  100% {d: var(--link-path)}
}

@keyframes ired-anim {
  50% {d: path("M15.5 35 c5,-30 7,-35 -5,-30 C3,10 9,20 12.2,36 Q13.5,38 15.5,35 M15 42 A.9 1 0 0 0 14 47 A.7 1 0 0 0 15 42")}
  70% {d: path("M15.5 39 c5,-30 7,-35 -5,-30 C3,10 9,20 12.2,36 Q12,40 15.5,39 M15 40 A.9 1 0 0 0 14 48 A.7 1 0 0 0 15 40")}
  100% {d: var(--ired-path)}
}

@keyframes book {
  30% {d: var(--book-t-path)}
  80% {d: var(--book-o-path)}
  100% {d: var(--book-c-path)}
}