Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="blue bird" />
<meta charset="utf-8" />
</head>
  
<body>
<div class="panel circular">
​
<div id="panel1">
    
<div class="fox">
  <div class="tail"></div>
  <div class="ear left"></div><!-- sad -->
  <div class="ear right"></div>
     <!--<div class="prop"></div>-->
  <div class="arm left"></div><!-- bend -->
  <div class="arm right"></div>
  <div class="body"></div><!-- belly -->
  <div class="snout fang"></div><!-- fang -->
  <div class="nose"></div><!-- party-hat glasses -->
  <div class="eye left"></div><!-- closed sad shifty glee glasses shades squint  -->
  <div class="eye right"></div>
  <div class="cheek left"></div><!-- blush absent -->
  <div class="cheek right"></div>
     <div class="eyebrow left absent"></div><!-- concern frown absent -->
     <div class="eyebrow right absent"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
     <div class="speech"><p>Oh look!<br>A robin!</div><!-- speech thought orphan -->
</div>
    
<div class="bluebird">
  <div class="tail"></div>
  <div class="body"></div>
  <div class="beak"></div>
  <div class="wing left"></div>
  <div class="wing right"></div><!-- extend -->
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="cheek left"></div>
  <div class="cheek right"></div>
     <div class="eyebrow left absent"></div>
     <div class="eyebrow right absent"></div><!-- concern frown absent -->
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shadow"></div>
</div>
    
    <div class="branch"><div class="twig"><div class="leaf"></div></div></div>
    
</div><!-- panel1 -->
    
<div id="panel2">
    
<div class="bluebird">
  <div class="tail"></div>
  <div class="body"></div>
  <div class="beak"></div>
  <div class="wing left"></div>
  <div class="wing right"></div><!-- extend -->
  <div class="eye left squint"></div>
  <div class="eye right squint"></div>
  <div class="cheek left"></div>
  <div class="cheek right"></div>
     <div class="eyebrow left frown"></div>
     <div class="eyebrow right frown"></div><!-- concern frown absent -->
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shadow"></div>
    <div class="speech"><p>Actually,<br>I&rsquo;m a <em>blue</em>bird.</div>
</div>
    
</div><!-- panel2 -->
    
<div id="panel3">
    
    
<div class="fox">
  <div class="tail"></div>
  <div class="ear left sad"></div><!-- sad -->
  <div class="ear right sad"></div>
     <!--<div class="prop"></div>-->
  <div class="arm left"></div><!-- bend -->
  <div class="arm right"></div>
  <div class="body"></div><!-- belly -->
  <div class="snout"></div><!-- fang -->
  <div class="nose"></div><!-- party-hat glasses -->
  <div class="eye left"></div><!-- closed sad shifty glee glasses shades squint  -->
  <div class="eye right"></div>
  <div class="cheek left blush"></div><!-- blush absent -->
  <div class="cheek right blush"></div>
     <div class="eyebrow left concern"></div><!-- concern frown absent -->
     <div class="eyebrow right concern"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
     <div class="speech"><p>I&rsquo;m<br>colour<br>blind.</div><!-- speech thought orphan -->
</div>
    
<div class="bluebird">
  <div class="tail"></div>
  <div class="body"></div>
  <div class="beak"></div>
  <div class="wing left"></div>
  <div class="wing right"></div><!-- extend -->
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="cheek left"></div>
  <div class="cheek right"></div>
     <div class="eyebrow left concern"></div>
     <div class="eyebrow right concern"></div><!-- concern frown absent -->
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shadow"></div>
     <div class="speech"><p>Oh&hellip;</div><!-- speech thought orphan -->
</div>
    
    <div class="branch"><div class="twig"><div class="leaf"></div></div></div>
</div><!-- panel3 -->
    
    <div id="template">
  <!-- FOX ------------>
  
<div class="fox">
  <div class="tail"></div>
  <div class="ear left sad"></div><!-- sad -->
  <div class="ear right sad"></div>
     <!--<div class="prop"></div>-->
  <div class="arm left bend"></div><!-- bend -->
  <div class="arm right bend"></div>
  <div class="body"></div><!-- belly -->
  <div class="snout"></div><!-- fang -->
  <div class="nose"></div><!-- party-hat glasses -->
  <div class="eye left"></div><!-- closed sad shifty glee glasses shades squint  -->
  <div class="eye right"></div>
  <div class="cheek left blush"></div><!-- blush absent -->
  <div class="cheek right blush"></div>
     <div class="eyebrow left absent"></div><!-- concern frown absent -->
     <div class="eyebrow right absent"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
     <!--<div class="speech"><p>.</div><!-- speech thought orphan -->
</div>
  
  
  
  
  
  <!-- BUNNY ------------>
  
​
<div class="bunny">
  <div class="tail"></div>
  <div class="ear left back"></div><!-- back party-hat -->
  <div class="ear right back"></div>
     <!--<div class="prop grass"></div><!-- grass -->
  <div class="arm left"></div><!-- bend -->
  <div class="arm right"></div><!-- bend -->
  <div class="body"></div>
  <div class="mouth small"></div><!-- ooo whistle horror dribble small wry -->
  <div class="nose"></div><!-- horror wrinkle absent-->
  <div class="eye left"></div><!-- happy closed surprise horror squint animu-->
  <div class="eye right"></div>
  <div class="cheek left blush"></div><!-- blush absent -->
  <div class="cheek right blush"></div>
     <div class="eyebrow left"></div><!-- concern frown absent -->
     <div class="eyebrow right"></div>
  <div class="leg left"></div>   
  <div class="leg right"></div>
  <div class="shadow"></div>
    <div class="speech"><p></p></div><!-- speech thought orphan -->
     
</div>
  
    
    <!-- environment behind? --->
    <div class="grass"></div>
  
  
  <!-- WOLF earl grey flavour ------------>
  
  
  
<div class="wolf">
  <div class="tail"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="arm left"></div>
  <div class="arm right"></div>
  <div class="body"></div>
  <div class="snout"></div>
  <div class="nose glasses"></div>
  <div class="eye left glasses shades"></div>
  <div class="eye right glasses shades"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
</div>
  
  <!-- BEAR cinnamon fudge ------------>
  
  
  
<div class="bear">
  <div class="tail"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="arm left"></div>
  <div class="arm right"></div>
  <div class="body"></div>
  <div class="snout"></div>
  <div class="nose"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
</div>
  
  <!-- BLUEBIRD blueberry ------------>
  
<div class="bluebird">
  <div class="tail"></div>
  <div class="body"></div>
  <div class="beak"></div>
  <div class="wing left"></div>
  <div class="wing right"></div><!-- extend -->
  <div class="eye left bags"></div>
  <div class="eye right bags"></div>
  <div class="cheek left"></div>
  <div class="cheek right"></div>
     <div class="eyebrow left"></div>
     <div class="eyebrow right"></div><!-- concern frown absent -->
  <div class="leg left"></div>
  <div class="leg right"></div>
  <div class="shadow"></div>
    <div class="speech"><p>Chirp.</p></div><!-- speech thought orphan -->
</div>
  
  
<div class="hedgehog">
  <div class="spike"></div>
  <div class="tail"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="arm left"></div>
  <div class="arm right"></div>
  <div class="body"></div>
  <div class="snout"></div>
  <div class="nose"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="leg left"></div> 
  <div class="leg right"></div>
  <div class="shadow"></div>
</div>
  
  
  
     
  <div class="a-experiment-snout"></div>
  <div class="b-experiment-snout"></div>
  <div class="c-experiment-snout"></div>
  <div class="d-experiment-snout"></div>
  <div class="e-experiment-snout"></div>
​
  <div class="test"></div>
  
  
  
<div class="star a-star"></div>
<div class="star b-star"></div>
    </div><!-- template -->
    </div><!-- panel circular -->
  </body>
</html>
 
:root { --fox-body: #d67b39; }
​
​
/* FOX
eyes      #47220b     71,34,11
tail      #c06835     192,104,53
body      #d67b39     214,123,57
snout     #df8e47     223,142,71     
tooth     #efe6de     239,239,222
*/
​
* { /* someday box-sizing: border-box; */ }
​
body { background: #8bb; font: 18em arial; color: #2e1115; }
​
/* purple of night: #3a225b; */
​
.panel.circular { height: 1.8em; width: 1.8em; background: #9cc; border-radius: 2em; position: relative; top: 0.45em; left: 0.75em; z-index: -1; background: transparent; }
​
/* purple of night: #443d6f; */
.panel.circular::before { height: 800px; width: 800px; outline: 5px solid #ff0; position: absolute; top: -0.45em; left: -0.45em; z-index: -1; }
.panel.circular::after { content:"Forest Frenemies Alpha"; position: absolute; bottom: -10em; right: -9.5em; z-index: 1; font-size: 0.05em; color: #cff; text-transform: lowercase; text-shadow: -0.1em -0.1em 0 rgba(0,0,0,0.2);  }
​
​
/* cresent moon 
body::before { content:'\1F319'; top: 1em; left: 5em; color: #fff; height: 1em; width: 1em; font: 0.4em arial; transform: rotate(140deg); display: block; position: absolute; } */
​
/* golden sun 
body::before { content:''; background: #fc4; height: 0.1em; width: 0.1em; top: 0.85em; left: 4.5em; color: #fb1; height: 1em; width: 1em; font: 0.4em arial; transform: rotate(140deg); display: block; position: absolute; border-radius: 50%; } */
​
​
/* night grass #316346;
night dandelions? #42824b */
.grass { position: absolute; background: #9b6; height: 0.5em; width: 2.2em; border-radius: 50%; top: 1.77em; right: -0.2em; }
.grass::before { content:'.  : . ..  :'; font: 0.5em times; color: #fb1; transform: rotate(9deg); top: -0.2em; left: 0.2em; }
.grass::after { content:'.  . ..  :'; font: 0.45em times; color: #fb1; transform: rotate(9deg); top: -0.2em; right: 0.4em; }
​
​
div { opacity: 1; }
div::before, div::after { display: block; content: ""; position: absolute; border-radius: 50%; }
​
h1 { font: 0.09em arial; position: absolute; top: 4em; left: 11em; text-shadow: -0.05em -0.05em #cff; text-align: center; font-weight: bold; }
​
h2 { font: 0.09em arial; position: absolute; top: 10.9em; left: -3.5em; text-shadow: -0.05em -0.05em #cff; text-align: center; font-weight: bold; color: #47220b; width: 6em; }
​
p { margin: 0.8em 0; }
​
.fox, .bunny, .wolf, .bear, .bluebird { height: 2.4em; width: 2.4em; outline: 1px dotted rgba(20,20,20,0.2); position: absolute; left: 0.2em; background: rgba(255,255,255,0.3); background: transparent; outline: none; }
​
.bear { display: none; }
/* icon mode 
​
.eye, .snout, .nose { display: none; }
.fox div.leg, .fox div.body, .fox div.tail, .fox div.tail::after { background: #d67b39; }
.bunny div.leg, .bunny div.body, .bunny div.ear { background: #ff99aa; }
.wolf div.leg, .wolf div.body { background: #999; }
.wolf div.tail { border-bottom-color: #999; } */
​
/* common elements */
​
.shadow { background: rgba(0,0,0,0.1) !important; border-radius: 50%; z-index: -10; }
​
div .speech { height: auto !important; width: auto !important; padding: 0 0.3em; text-align: center; z-index: 9 !important; background: currentcolor !important; }
div .speech p { font: bold 0.2em arial; color: rgba(0,0,0,0.7); }
div .speech::after { border: 0.26em solid transparent; border-bottom-color: currentcolor; border-radius: 0; z-index: -1; }
div .speech.orphan::after { border: none; }
​
​
div .thought { height: auto !important; min-width: 0.5em; padding: 0 0.2em !important; text-align: center; z-index: 9 !important; background: currentcolor !important; background: currentcolor !important; border-radius: 5em/4.5em !important; }
div .thought::before, div .thought::after { background: currentcolor; top: -20%; height: 140%; width: 40%;  z-index: -1; border-radius: 5em/4em !important; }
div .thought::before { right: 15%; }
div .thought::after { left: 15%; }
div .thought p { font: bold 0.2em arial; color: rgba(0,0,0,0.7); position: relative; }
div .thought p::before, div .thought p::after { display: block; position: absolute; border-radius: 50%; background: #f9a; z-index: 90; content: ''; }
div .thought p::before { height: 1.8em; width: 1.8em; }
div .thought p::after { height: 1.2em; width: 1.2em; }
div .thought.right p::before { right: 0.8em; }
div .thought.right p::after { right: 1em; }
div .thought.left p::before { left: 0.8em; }
div .thought.left p::after { left: 1.4em; }
div .thought.top p::before { bottom: 3.5em;  }
div .thought.top p::after { bottom: 5.5em;  }
div .thought.bottom p::before { top: 3.5em;  }
div .thought.bottom p::after { top: 5.5em;  }
​
​
​
/* animals */
​
/* FOX
eyes      #47220b     71,34,11
tail      #c06835     192,104,53
body      #d67b39     214,123,57
snout     #df8e47     223,142,71     
tooth     #efe6de     239,239,222
*/
​
.fox { top: 1.43em; left: 0em; font: 0.5em arial; opacity: 0.8; opacity: 1; color: #d67b39; z-index: 1; }
​
.fox div { position: absolute; height: 0; width: 0; border-radius: 50%; background: currentcolor; }
​
​
.fox .tail { height: 2em; width: 0.8em; border-radius: 0.8em/2em; top: 0.3em; left: 1.07em; background: #efe6de; -webkit-transform: rotate(25deg); }
.fox .tail::after { height: 2.01em; width: 0.81em; top: -0.005em; left: -0.005em; border-radius: 0.8em/2em; background: #c06835; -webkit-clip-path: circle(0.9em at 0.45em 1.25em);  }
​
​
.fox .ear { height: 0.8em; width: 0.8em; border-radius: 0.12em; }
.fox .ear.left { top: 0.26em; left: 0.83em; transform: rotate(-75deg) skew(33deg); -webkit-clip-path: circle(0.54em at 0.7em 0.79em); }
.fox .ear.right { top: 0.34em; right: 1.07em; transform: rotate(32deg) skew(47deg); -webkit-clip-path: circle(0.54em at 0.14em 0); }
​
.fox .ear.sad.left { transform: rotate(5deg) skew(47deg); top: 0.15em; left: 0.81em; }
.fox .ear.sad.right{ transform: rotate(-55deg) skew(33deg); top: 0.24em; left: 0.71em; }
​
.fox .ear.swivel.right { transform: rotate(40deg) skew(43deg); top: 0.3em; right: 1em; }
​
​
.fox .eye { height: 0.16em; width: 0.16em; top: 0.55em; color: #47220b; background: currentcolor; }
.fox .eye.left { left: 1.25em; }
.fox .eye.right { left: 0.87em; }
​
.fox .eye.closed { border-bottom: 0.05em solid; background: transparent; border-radius: 0.1em; height: 0.11em; }
​
.fox .eye.closed.shifty { transform: rotate(-10deg); } /* use with closed */
​
.fox .eye.sad { border-bottom: 0.05em solid; background: transparent; border-radius: 0.1em; height: 0.11em; top: 0.7em; }
.fox .eye.sad.left { transform: rotate(15deg); }
.fox .eye.sad.right { right: 0.54em; transform: rotate(-15deg); }
​
.fox .eye.glee { border-bottom: 0.03em solid #d67b39; height: 0.13em; }
.fox .eye.glee::after { height: 0.1em; width: 0.32em; top: 0.1em; left: -0.08em; border-top: 0.045em solid #d67b39; }
.fox .eye.glee.left::after { transform: rotate(-10deg); }
.fox .eye.glee.right::after { transform: rotate(10deg); }
​
.fox .eye.frown::before { height: 0.08em; width: 0.3em; background: #c06835; border-radius: 0.1em; top: -0.01em; left: -0.06em; }
.fox .eye.frown.left::before { transform: rotate(-20deg); }
.fox .eye.frown.right::before { transform: rotate(20deg); }
​
.fox .eye.squint { height: 0.06em; width: 0.2em; top: 0.6em; margin-left: -0.02em;  border-radius: 0.6em;  }
​
​
.fox .eyebrow { height: 0.08em; width: 0.2em; background: #c06835; border-radius: 0.1em; top: 0.46em; }
.fox .eyebrow.left { left: 1.26em; transform: rotate(5deg); }
.fox .eyebrow.right { left: 0.83em; transform: rotate(-5deg); }
​
.fox .eyebrow.absent { display: none; }
​
.fox .eyebrow.frown { width: 0.3em; top: 0.53em; }
.fox .eyebrow.frown.left { left: 1.17em; transform: rotate(-20deg); }
.fox .eyebrow.frown.right { left: 0.8em; transform: rotate(20deg); }
​
.fox .eyebrow.concern { width: 0.3em; top: 0.43em; }
.fox .eyebrow.concern.left { left: 1.17em; transform: rotate(25deg); }
.fox .eyebrow.concern.right { left: 0.81em; transform: rotate(-25deg); }
​
​
.fox .cheek.absent { display: none; }
​
.fox .cheek.blush { height: 0.16em; width: 0.16em; top: 0.72em; background: rgba(255, 130, 130, 0.55); }
.fox .cheek.blush.left { left: 1.34em; }
.fox .cheek.blush.right { left: 0.77em; }
​
​
.fox .snout { height: 0.16em; width: 0.36em; color: #df8e47; background: currentcolor; top: 0.66em; left: 0.95em; border-bottom: 0.1em solid; border-top: 0.1em solid #d67b39; }
.fox .snout.fang::before { height: 0.1em; width: 0.1em; background: #efe6de; border-radius: 0.02em; top: 0.13em; left: 0.21em; transform: rotate(90deg) skew(-47deg); }
.fox .snout.fang::after { height: 0.2em; width: 0.2em; background: currentcolor; top: 0.05em; left: 0.13em; }
​
​
.fox .nose { height: 0.07em; width: 0.12em; background: #47220b; top: 0.97em; left: 1.07em; }
​
.fox .nose.glasses::before { width: 1em; border-top: 0.03em solid #111; height: 0.05em; top: -0.36em; left: -0.44em; }
​
.fox .nose.party-hat::before { width: 0.9em; border-bottom: 0.4em solid #ee5; top: -0.9em; left: -0.55em; border-radius: 50%/30%; transform: rotate(-25deg); z-index: 4; border-top: 0.08em dashed #ee5; }
.fox .nose.party-hat::after { border: 0.45em solid #ee5; top: -0.88em; left: -0.59em; transform: rotate(-25deg); z-index: 5; border-radius: 0; border-top: 0.3em solid transparent; border-bottom: 0; }
​
​
.fox .eye.glasses { border: 0.075em solid #d67b39; margin-top: -0.08em; margin-left: -0.08em; }
.fox .eye.glasses::before { height: 0.3em; width: 0.35em; top: -0.01em; border: 0.03em solid #111;  box-sizing: border-box; }
.fox .eye.glasses::after { height: 0.07em; width: 0.11em; border-radius: 50%; background: rgba(255,255,255,0.3); top: 0.04em; left: -0.03em; transform: rotate(-22deg); }
.fox .eye.glasses.left::before { border-radius: 50% 50% 40% 50%/29% 35% 50% 50%; transform: rotate(-5deg); left: -0.085em; } 
.fox .eye.glasses.right::before { border-radius: 50% 50% 50% 40%/35% 29% 50% 50%; transform: rotate(5deg); left: -0.1em; }
.fox .eye.glasses.right::after { transform: rotate(-28deg); left: -0.06em; }
​
.fox .eye.glasses.shades::before { background: rgba(50,50,62,0.8); }
​
​
.fox .body { height: 2em; width: 1em; top: 0.26em; left: 0.63em; border-radius: 1.2em; background: linear-gradient(to bottom, currentcolor 0%, currentcolor 55%, rgba(192,104,53,1) 85%, rgba(192,104,53,1) 100%); }
​
.fox .body.belly::after { height: 0.7em; width: 0.9em; top: 1.3em; left: 0.04em; background: #fa5; background: linear-gradient(top, currentcolor 0%,rgba(192,104,53,0) 30%); }
​
​
.fox .leg { height: 1em; width: 0.36em; border-radius: 0.4em; z-index: -1; background: #c06835; }
.fox .leg.left { top: 1.7em; left: 0.63em; }
.fox .leg.right { top: 1.7em; left: 1.27em; }
​
​
.fox .arm { height: 1em; width: 0.36em; z-index: 1; top: 1.1em; border-radius: 50% 50% 50% 50%/50% 50% 25% 25%; }
.fox .arm.left { left: 0.45em; transform: rotate(5deg); }
.fox .arm.right { left: 1.44em; transform: rotate(-5deg); }
​
.fox .arm.bend { height: 0.6em; }
.fox .arm.bend::before { height: 0.6em; width: 0.32em; background: linear-gradient(to top, rgba(223,142,71,1) 0%, rgba(223,142,71,1) 6%, currentcolor 45%, currentcolor 100%); border-radius: 50% 50% 50% 50%/50% 50% 30% 30%; top: 0.1em; }
.fox .arm.bend.left::before { transform: rotate(-125deg); left: 0.19em; }
.fox .arm.bend.right::before { transform: rotate(130deg); right: 0.16em; }
​
​
.fox .shadow { height: 0.3em; width: 1.1em; bottom: -0.38em; left: 0.57em; }
​
​
.fox .speech { background-color: #df8e47 !important; }
.fox .speech::after { border-bottom-color: #df8e47; }
​
​
/* POSITION FOX */ 
/* really sad, clutching tail
.fox .snout, .fox .nose { margin-top: 0.06em; }
.fox .tail { transform: rotate(-65deg); top: 0.64em; left: 0.34em; }
.fox .tail::after { top: 0.01em; }
.fox .tail, 
.fox .tail::after { z-index: 5; border-radius: 50%; }
.fox .arm.right { z-index: 6; transform: rotate(35deg); height: 0.7em; top: 1.2em; left: 1.24em; }
.fox .arm.left { z-index: 6; height: 0.3em; transform: rotate(20deg); top: 1.77em; left: 0.48em; }
*/
​
/* looking at bunny 
.fox .eye,
.fox .snout,
.fox .nose,
.fox .eyebrow { margin-top: 0.08em; margin-left: 0.08em; } */
​
/* holds hand to temple
.fox .arm.left { transform: rotate(150deg) !important; top: 0.8em; left: 0.4em; }
.fox .arm.left.bend::before { transform: rotate(80deg) !important; top: 0.23em; left: -0.12em; }
*/
​
/* fox behind 
.fox { left: 0.2em;}
.fox .snout, .fox .nose, .fox .eye { display: none; }
.fox .arm.left { z-index: -1; }
​
.fox .leg.left { top: 1.66em;  margin-left: 0.05em;}
​
.fox .ear.left { transform: rotate(-70deg) skew(30deg); }
.fox .ear.right { transform: rotate(45deg) skew(40deg); -webkit-clip-path: circle(0.58em at 0.14em 0); } 
​
.fox .tail { height: 2em; width: 0.8em; border-radius: 0.8em/2em; top: 0.3em; left: 1.07em; background: #efe6de; transform: rotate(25deg); }
.fox .tail::after { height: 2.01em; width: 0.81em; top: -0.004em; left: -0.005em; border-radius: 0.8em/2em; background: #c06835; -webkit-clip-path: circle(0.9em at 0.45em 1.25em);  }
​
.fox .tail { z-index: 30; transform: rotate(-115deg); left: -0.1em; top: 1.3em; }
.fox .tail:after { top: 0.003em; } */
​
​
.fox .speech { top: -1em; left: -0.75em;  }
​
/*
​
.fox .speech::after { bottom: -0.5rem; right: 5rem; transform: rotate(20deg); }
.fox .speech::after { border-bottom-color: #fff; z-index: 100; }/* */
​
​
​
​
/* BUNNY
eyes      #2e1115     46,17,21
animu     #590d1a     56,13,20
nose      #c74056     199,64,86
body      #ff99aa     255,153,170
legs      #e67c8e     230,124,142
tail      #fae8eb     250,232,235
*/
​
.bunny { top: 1.6em; left: 1.25em; z-index: 2; font: 0.5em arial; color: #f9a; }
​
.bunny div { position: absolute; height: 0; width: 0; border-radius: 50%; background: currentcolor; }
​
​
.bunny .tail { height: 0.3em; width: 0.3em; top: 1.9em; left: 0.92em; background: #fae8eb; }
​
​
.bunny .ear { height: 1.2em; width: 0.34em; border-radius: 0.3em/0.6em; 
background: linear-gradient(to bottom, rgba(230,124,141,1) 0%, rgba(230,124,141,1) 16%, currentcolor 45%, currentcolor 100%); }
.bunny .ear.left { top: -0.2em; left: 1.53em; -webkit-transform: rotate(45deg); }
.bunny .ear.right { top: -0.2em; left: 0.84em; -webkit-transform: rotate(30deg); }
​
.bunny .ear.back.left { top: 0.48em; left: 1.4em; transform: rotate(150deg); }
.bunny .ear.back.right { top: 0.6em; left: 1.2em; transform: rotate(160deg); }
​
.bunny .ear.party.hat.left { z-index: 3; transform: rotate(140deg); top: 0.4em; left: 1.5em; } /* use with back */
.bunny .ear.party.hat.right { transform: rotate(110deg); top: 0.2em; left: 1.3em; } 
.bunny .ear.party.hat.left::after { height: 0; width: 0; border: 0.4em solid transparent; border-bottom: 0.8em solid #E65045; border-radius: 0.4em/0.2em; transform: rotate(-128deg); z-index: 4; top: 0.9em; left: -0.57em; } 
​
​
.bunny .eye { height: 0.16em; width: 0.16em; color: #2e1115; background: currentcolor; }
.bunny .eye.left { top: 0.85em; left: 1.25em; }
.bunny .eye.right { top: 0.85em; left: 0.81em; }
​
.bunny .eye.happy { border: 0.015em solid transparent; border-top: 0.07em solid; background: transparent; margin-left: -0.015em; border-bottom: none; }
​
.bunny .eye.closed { border: 0.01em solid transparent; border-bottom: 0.06em solid; background: transparent; margin-left: -0.01em; border-top: none; margin-top: -0.07em; }
​
.bunny .eye.surprise::after { height: 0.4em; width: 0.3em; border-top: 0.05em solid #e67c8e; top: -0.2em; left: -0.075em; -webkit-clip-path: circle(0.4em at 0.15em -0.25em); }
​
.bunny .eye.horror { height: 0.08em; width: 0.08em; margin: 0.04em; }
​
.bunny .eye.surprise.horror::after { left: -0.11em; }
​
.bunny .eye.squint { height: 0.06em; width: 0.2em; margin-left: -0.02em; margin-top: 0.1em; border-radius: 0.6em; transform: rotate(5deg); }
.bunny .eye.squint.right { margin-top: 0.055em; }
​
.bunny .eye.animu { border: 0.02em solid; border-bottom-width: 0.04em; border-top-width: 0.04em; margin: -0.08em; background: #590d1a; height: 0.22em; width: 0.24em; transform: rotate(20deg); }
.bunny .eye.animu::before { height: 0.11em; width: 0.18em; top: 0.125em; left: 0.03em; background: #8f0b21; border-top-left-radius: 25%; border-top-right-radius: 25%; opacity: 0.8; }
.bunny .eye.animu::after { height: 1.3em; width: 1em; top: -0.3em; right: 0.4em; background: rgba(255,153,170,0.7); transform: rotate(-70deg); content:"\2726"; color: #fae8eb; font: 0.1em arial; }
​
​
.bunny .eyebrow { height: 0.1em; width: 0.15em; background: #e67c8e; border-radius: 0.1em; top: 0.7em; }
.bunny .eyebrow.left { left: 1.23em; transform: rotate(20deg); }
.bunny .eyebrow.right { left: 0.84em; transform: rotate(-20deg); }
​
.bunny .eyebrow.absent { display: none; }
​
.bunny .eyebrow.frown { width: 0.24em; top: 0.81em; }
.bunny .eyebrow.frown.left { left: 1.19em; transform: rotate(-20deg); }
.bunny .eyebrow.frown.right { left: 0.79em; transform: rotate(20deg); }
​
.bunny .eyebrow.concern { width: 0.22em; top: 0.68em; }
.bunny .eyebrow.concern.left { left: 1.16em; transform: rotate(40deg); }
.bunny .eyebrow.concern.right { left: 0.82em; transform: rotate(-40deg); }
​
​
.bunny .cheek.absent { display: none; }
​
.bunny .cheek.blush { height: 0.1em; width: 0.2em; background: #f88; top: 1.02em; }
.bunny .cheek.blush.left { transform: rotate(-20deg); left: 1.3em; }
.bunny .cheek.blush.right { transform: rotate(20deg); left: 0.7em; }
​
​
.bunny .nose, .bunny .nose::before { height: 0.045em; width: 0.08em; background: #c74056; top: 1.05em; left: 1.05em; border-radius: 0.05em; }
.bunny .nose { transform: rotate(30deg); }
.bunny .nose::before { transform: rotate(-60deg); left: 0.03em; top: -0.017em; }
​
.bunny .nose.wrinkle { height: 0.02em; width: 0.13em;  border-radius: 0; transform: rotate(10deg); border-top: 0.02em solid  #e67c8e; border-bottom: 0.02em solid #e67c8e; background: none; top: 0.92em; z-index: 1; }
.bunny .nose.wrinkle::before,
.bunny .nose.wrinkle::after { display: none; }
​
.bunny .nose.absent { display: none; }
​
​
.bunny .mouth, .bunny .mouth::before { height: 0.08em; width: 0.1em; box-shadow: 0 0.02em 0 0 #e67c8e; }
.bunny .mouth { top: 1.08em; left: 1.005em; background: none; }
.bunny .mouth::before { left: 0.1em; }
​
.bunny .mouth.small, .bunny .mouth.small::before { box-shadow: none; }
.bunny .mouth.small { height: 0.05em; width: 0.1em; top: 1.2em; left: 1.1em; margin: -0.045em; background: #c74056; border-bottom: 0.04em solid #f9a; }
​
.bunny .mouth.ooo { height: 0.07em; width: 0.083em; top: 1.13em; left: 1em; border: 0.07em solid #f9a; margin: -0.045em; box-shadow: -0.05em 0.005em 0 -0.02em rgba(230, 124, 141, 0.55); background: #c74056; transform: rotate(-15deg); }
.bunny .mouth.ooo::before { box-shadow: none; }
​
.bunny .mouth.ooo.whistle::before, .bunny .mouth.whistle::after { color: #c74056; }
.bunny .mouth.ooo.whistle::before { content: "\266C"; font: bold 0.15em arial; top: 1em; left: -2.0em; }
.bunny .mouth.ooo.whistle::after { content: "\266A"; font: bold 0.25em arial; top: -1em; left: -2.0em; transform: rotate(10deg);}
​
.bunny .mouth.ooo.dribble::before { content: "'"; color: #9cf; top: 0.7em; left: -0.1em; font: bold 0.5em times; transform: rotate(192deg); }
​
.bunny .mouth.horror, .bunny .mouth.horror::before { box-shadow: none; }
.bunny .mouth.horror { transform: rotate(6deg); height: 0.18em; border-radius: 0.11em; border: 0.05em solid; top: 0.95em; left: 0.97em; width: 0.16em; background: #c74056; z-index: 1; }
.bunny .mouth.horror::before { background: currentcolor; transform: rotate(180deg); height: 0.22em; width: 0.38em; top: 0.16em; left: -0.04em; border-radius: 0.2em; font: bold 0.5em times; }
.bunny .mouth.horror::after { height: 0.15em; width: 0.17em; top: 0.12em; left: -0.01em; border-radius: 0.11em; transform: rotate(180deg); background: linear-gradient(to bottom, currentcolor 0%, currentcolor 55%, rgba(230,124,141,1) 85%, rgba(230,124,141,1) 100%); } 
​
.bunny .mouth.horror.dribble::before { content: "'"; background: #f9a; color: #9cf; text-indent: -0.16em; line-height: 0.02; }
​
.bunny .mouth.wry,
.bunny .mouth.wry::before,
.bunny .mouth.wry::after { box-shadow: none; }
.bunny .mouth.wry { background: #c74056; width: 0.3em; border-radius: 0.6em 0.6em 0.2em 0.2em; height: 0.08em; transform: rotate(3deg); }
​
​
.bunny .body { height: 1.85em; width: 0.95em; top: 0.46em; left: 0.63em; border-radius: 1.2em; background: linear-gradient(to bottom, currentcolor 0%, currentcolor 55%, rgba(230,124,141,1) 85%, rgba(230,124,141,1) 100%); }
​
​
.bunny .leg { height: 0.94em; width: 0.34em; border-radius: 0.9em; background: #e67c8e; z-index: -1; }
.bunny .leg.left { top: 1.7em; left: 0.63em; }
.bunny .leg.right { top: 1.7em; left: 1.24em; }
​
​
.bunny .arm { height: 0.92em; width: 0.32em; z-index: 1; top: 1.19em; border-radius: 50% 50% 50% 50%/50% 50% 25% 25%; }
.bunny .arm.left { left: 0.47em; transform: rotate(5deg); }
.bunny .arm.right { left: 1.4em; transform: rotate(-5deg); }
​
.bunny .arm.bend { height: 0.6em; }
.bunny .arm.bend::before { height: 0.6em; width: 0.32em; background: linear-gradient(to top, rgba(230,124,141,1) 0%, rgba(230,124,141,1) 6%, currentcolor 45%, currentcolor 100%); border-radius: 50% 50% 50% 50%/50% 50% 30% 30%; top: 0.1em; }
.bunny .arm.bend.left::before { transform: rotate(-125deg); left: 0.19em; }
.bunny .arm.bend.right::before { transform: rotate(130deg); right: 0.16em; }
​
​
.bunny .shadow { height: 0.3em; width: 1.1em; bottom: -0.32em; left: 0.57em; }
​
​
​
/* POSITION BUNNY */
​
/* bunny backside
.bunny { margin-top: 0.25em; margin-left: 0.32em;}
.bunny .ear.back { z-index: 5 !important; }
.bunny .ear.right.back { left: 0.9em; }
.bunny .arm.left { transform: rotate(70deg) !important; top: 1.2em; left: 0.45em; height: 0.6em; }
.bunny .arm.right { display: none; }
.bunny .leg.right { left: 1.2em; top: 1.66em; }
.bunny .eye, .bunny .nose, .bunny .mouth { display: none; }
.bunny .tail { z-index: 3; left: 1.1em; }
.bunny .speech { top: -1.6em; left: 0.45em; width: 1.6em !important; padding: 0.2em; }
.bunny .speech::after { transform: rotate(-45deg); right: 17%; top: 9%; }
*/
​
/* bunny arm bend
.bunny .arm.bend.left::before { transform: rotate(-125deg); left: 0.19em; }
.bunny .arm.bend.right::before { transform: rotate(130deg); right: 0.16em; }
*/
​
​
.bunny .speech { top: 0em; left: 2em;  }
.bunny .speech::after { top: 3rem; left: -1rem; transform: rotate(10deg); }
/*.bunny .speech::after { z-index: 100; border-bottom-color: #fff; }*/
​
​
​
​
/*  WOLF
​
   body      #999    153,153,153
   legs      #888    136,136,136
*/
​
.wolf { top: 6.2em; z-index: 100; font: 0.5em arial; color: #999; }
​
.wolf div { position: absolute; height: 0; width: 0; border-radius: 50%; background: currentcolor; }
​
.wolf .tail { height: 0.8em; width: 1.8em; background: transparent; top: 0.3em; left: 0.55em; border-radius: 1em; border-bottom: 0.5em solid #888; border-top: 0.5em solid transparent; transform: rotate(-50deg); -webkit-clip-path: circle(0.9em at 0.7em 0.79em); z-index: -2; } 
​
.wolf .ear { height: 0.8em; width: 0.8em; border-radius: 0.11em;}
.wolf .ear.left { top: 0.1em; left: 0.8em; transform: rotate(100deg) skew(47deg);-webkit-clip-path: circle(0.54em at 0.14em 0); }
.wolf .ear.right { top: 0.14em; left: 0.54em;transform: rotate(40deg) skew(47deg);-webkit-clip-path: circle(0.54em at 0.14em 0);}
​
.wolf .eye { height: 0.16em; width: 0.16em; background: #333; }
.wolf .eye.left { top: 0.35em; left: 1.25em; }
.wolf .eye.right { top: 0.35em; left: 0.85em; }
​
.wolf .eye.glasses { border: 0.075em solid; margin-top: -0.08em; margin-left: -0.08em; }
.wolf .eye.glasses::before { height: 0.3em; width: 0.35em; top: -0.01em; border: 0.03em solid #111; box-sizing: border-box; }
.wolf .eye.glasses::after { height: 0.07em; width: 0.11em; border-radius: 50%; background: rgba(255,255,255,0.3); top: 0.04em; left: -0.03em; transform: rotate(-22deg); }
.wolf .eye.glasses.left::before { border-radius: 50% 50% 40% 50%/29% 35% 50% 50%; transform: rotate(-5deg); left: -0.085em; } 
.wolf .eye.glasses.right::before { border-radius: 50% 50% 50% 40%/35% 29% 50% 50%; transform: rotate(5deg); left: -0.1em; }
.wolf .eye.glasses.right::after { transform: rotate(-28deg); left: -0.06em; }
​
.wolf .eye.glasses.shades::before { background: rgba(50,50,62,0.8); }
​
.wolf .nose { height: 0.07em; width: 0.12em; background: #444; top: 0.72em; left: 1.07em; }
​
.wolf .nose.glasses::before { width: 1em; border-top: 0.03em solid #111; height: 0.05em; top: -0.33em; left: -0.44em; }
​
.wolf .snout { height: 0.16em; width: 0.36em; background: #777; top: 0.46em; left: 0.95em; border-radius: 0.2em; border-bottom: 0.1em solid #777; border-top: 0.1em solid; }
​
.wolf .body { height: 2.2em; width: 1.02em; top: 0.06em; left: 0.62em; background: currentcolor; border-radius: 1.2em; background: linear-gradient(to bottom, currentcolor 0%, currentcolor 55%, rgba(136,136,136,1) 85%, rgba(136,136,136,1) 100%); }
​
.wolf .leg { height: 1.16em; width: 0.36em;  border-radius: 0.9em; background: #888; z-index: -1; }
.wolf .leg.left { top: 1.6em; left: 0.62em; }
.wolf .leg.right { top: 1.6em; left: 1.28em; }
​
.wolf .arm { height: 1.06em; width: 0.36em; z-index: 1; top: 0.89em; border-radius: 50% 50% 50% 50%/50% 50% 25% 25%; }
.wolf .arm.left { left: 0.43em; transform: rotate(5deg); }
.wolf .arm.right { left: 1.46em; transform: rotate(-5deg); }
​
​
​
/* BEAR */
​
.bear { top: 3.2em; left: 3em; z-index: 100; font: 0.5em arial; }
​
.bear div { position: absolute; height: 0; width: 0; border-radius: 50%; background: #966; opacity: 1; }
​
.bear .tail { height: 0.6em; width: 0.43em; top: 1.45em; left: 1.05em; border-radius: 2em; } 
​
.bear .ear { height: 0.4em; width: 0.4em; }
.bear .ear.left { top: -1.8em; left: 0.4em; }
.bear .ear.right { top: -1.8em; left: 1.6em;  }
​
.bear .eye { height: 0.16em; width: 0.16em; background: #333; }
.bear .eye.left { top: -1.15em; left: 1.5em; }
.bear .eye.right { top: -1.15em; left: 0.75em; }
​
.bear .snout { height: 0.3em; width: 0.5em; background: #855; top: -1em; left: 1em; border-radius: 0.3em; border-bottom: 0.1em solid #855; border-top: 0.1em solid #966; }
​
.bear .nose { height: 0.1em; width: 0.18em; background: #444; top: -0.87em; left: 1.12em; }
​
.bear .body { height: 3.9em; width: 1.92em; top: -1.7em; left: 0.25em; border-radius: 1em; background: linear-gradient(to bottom, #966 0%, #966 55%, #855 85%, #855 100%); }
​
.bear .leg { height: 1.6em; width: 0.6em;  border-radius: 0.9em; background: #855; z-index: -1; }
.bear .leg.left { top: 0.9em; left: 0.25em; }
.bear .leg.right { top: 0.9em; left: 1.57em; }
​
.bear .arm { height: 2.2em; width: 0.5em; z-index: 1; top: -0.6em; border-radius: 50% 50% 50% 50%/50% 50% 25% 25%; }
.bear .arm.left { left: 0em; transform: rotate(5deg); }
.bear .arm.right { left: 1.95em; transform: rotate(-5deg); }
​
​
/* BLUEBIRD 
​
blue          #6b79e6    107,121,230
darker blue   #4f66d2    79,102,201
orange        #e5a200    229,162,0
yellow        #efb425    239,180,37
*/
​
​
​
.bluebird { top: -1em; left: -0.5em; font: 0.36em arial; color: #6b79e6; z-index: 1; }
​
.bluebird div { position: absolute; height: 0; width: 0; border-radius: 50%; background: currentcolor; }
​
​
.bluebird .tail { height: 0.9em; width: 0.5em; border-radius: 50% 50% 50% 50%/25% 25% 50% 50%; top: 0.35em; left: 0.85em; -webkit-transform: rotate(15deg); }
​
.bluebird .eye { height: 0.16em; width: 0.16em; top: 0.55em; color: #47220b; background: currentcolor; z-index: 2; }
.bluebird .eye.left { left: 1.15em; }
.bluebird .eye.right { left: 0.75em; }
​
.bluebird .eye.bags { height: 0.16em; width: 0.16em; top: 0.55em; color: #47220b; background: currentcolor; box-shadow: 0 0.05em 0 rgba(0,0,0,0.1); }
​
.bluebird .eye.closed { border-bottom: 0.05em solid; background: transparent; border-radius: 0.1em; height: 0.11em; }
​
.bluebird .eye.squint { height: 0.07em; width: 0.2em; top: 0.55em; margin-left: -0.02em;  border-radius: 0.6em;  }
​
.fox .eye.squint { height: 0.06em; width: 0.2em; top: 0.6em; margin-left: -0.02em;  border-radius: 0.6em;  }
​
.bluebird .eyebrow { height: 0.09em; width: 0.14em; background: #4f66d2; border-radius: 0.1em; top: 0.42em; }
.bluebird .eyebrow.left { left: 1.12em; transform: rotate(5deg); }
.bluebird .eyebrow.right { left: 0.8em; transform: rotate(-5deg); }
​
.bluebird .eyebrow.absent { display: none; }
​
.bluebird .eyebrow.frown { top: 0.43em; }
.bluebird .eyebrow.frown.left { transform: rotate(-20deg); }
.bluebird .eyebrow.frown.right { transform: rotate(20deg); }
​
.bluebird .eyebrow.concern { top: 0.41em; }
.bluebird .eyebrow.concern.left { transform: rotate(25deg); }
.bluebird .eyebrow.concern.right { transform: rotate(-25deg); }
​
​
.bluebird .cheek.absent { display: none; }
​
.bluebird .cheek.blush { height: 0.16em; width: 0.16em; top: 0.72em; background: rgba(255, 130, 130, 0.55); }
.bluebird .cheek.blush.left { left: 1.34em; }
.bluebird .cheek.blush.right { left: 0.77em; }
​
​
.bluebird .beak { height: 0.05em; width: 0.15em; background: #efb425; top: 0.55em; left: 0.96em; border-bottom: 0.1em solid #efb425; border-top: 0.1em solid #6b79e6; }
​
​
.bluebird .body { height: 1em; width: 0.8em; top: 0.26em; left: 0.63em; border-radius: 1.2em; background: linear-gradient(to bottom, currentcolor 0%, currentcolor 55%, rgba(79,102,201,1) 85%, rgba(79,102,201,1) 100%); }
​
​
.bluebird .leg { height: 0.45em; width: 0.13em; border-radius: 0.4em; background: #e5a200; top: 1em; z-index: -1; background: linear-gradient(to bottom, #e5a200 0%, #e5a200 55%, #efb425 85%, #efb425 100%); }
.bluebird .leg.left { left: 0.75em; transform: rotate(-15deg); }
.bluebird .leg.right { left: 1.18em; transform: rotate(15deg); }
​
​
.bluebird .wing { height: 0.45em; width: 0.2em; top: 0.65em; z-index: 1; border-radius: 50% 50% 50% 50%/25% 25% 50% 50%; }
.bluebird .wing.left { left: 0.56em; transform: rotate(10deg); }
.bluebird .wing.right { left: 1.29em; transform: rotate(-10deg); }
​
.bluebird .wing.extend { width: 1em; top: 0.5em; z-index: -1;}
.bluebird .wing.extend.left { left: -0.05em; border-radius: 50% 50% 25% 50%/50% 50% 25% 50%;
    transform: rotate(20deg) skew(-50deg); }
.bluebird .wing.extend.right { left: 1.1em;  border-radius: 50% 50% 50% 25%/50% 50% 50% 25%;
    transform: rotate(-20deg) skew(50deg); }
​
​
.bluebird .shadow { height: 0.24em; width: 0.8em; bottom: 0.85em; left: 0.625em; }
​
.bluebird .speech {background-color: #808ded !important;  }
.bluebird .speech::after { border-bottom-color: #808ded; }
​
#template { display: none; }
​
#panel1, #panel2, #panel3 { border-radius: 0.05em; clip: rect(0px, 800px, 250px, 0px); background: #99cccc; }
​
#panel1 { height: 250px; width: 800px; position: absolute; top: -0.45em; left: -0.45em; }
#panel1 .bluebird { top: 0.007em; left: 0.1em; }
#panel1 .bluebird .shadow { height: 0; border: 0.1em solid rgba(0,0,0,0.1); border-top-color: transparent; border-left: none; border-right: none; margin-bottom: 0.072em !important; background: transparent !important; }
#panel1 .fox { top: 0.1em; left: 2em; }
#panel1 .fox .speech { top: 0.1em; left: 1.8em; width: 0.85em !important; }
#panel1 .fox .speech::after { bottom: -0.5rem; right: 5rem; transform: rotate(-20deg); }
#panel1 .fox .eye,
#panel1 .fox .snout,
#panel1 .fox .nose { margin-left: -0.12em; }
#panel1 .fox .arm.left { z-index: -2; }
​
#panel2 { height: 250px; width: 800px; position: absolute; top: -0.45em; left: -0.45em; margin-top: 275px; }
#panel2 .bluebird { font-size: 1.5em; top: -10rem; left: -10rem; }
#panel2 .bluebird .speech { font-size: 9rem; top: 13rem; left: 42rem; width: 0.8em !important; }
#panel2 .bluebird .speech::after { top: 3rem; left: -1rem; transform: rotate(0deg); }
​
#panel3 { height: 250px; width: 800px; position: absolute; top: -0.45em; left: -0.45em; margin-top: 550px; }
#panel3 .bluebird { top: 0.007em; left: 0.1em; }
#panel3 .bluebird .shadow { height: 0; border: 0.1em solid rgba(0,0,0,0.1); border-top-color: transparent; border-left: none; border-right: none; margin-bottom: 0.072em !important; background: transparent !important; }
#panel3 .bluebird .speech { top: 11rem; left: 8rem; width: 0.2em !important; }
#panel3 .bluebird .speech p { margin-left: -0.5em; }
#panel3 .bluebird .speech::after { top: -1.5rem; left: 1rem; transform: rotate(60deg); }
#panel3 .bluebird .eye,
#panel3 .bluebird .eyebrow,
#panel3 .bluebird .beak { margin-left: 0.06em; margin-top: 0.02em; }
​
​
#panel3 .fox { top: 0.1em; left: 2em; }
#panel3 .fox .speech { top: 0.1em; left: 1.9em; width: 0.8em !important; height: 1em !important; }
#panel3 .fox .speech::after { bottom: -0.5rem; right: 5rem; transform: rotate(-20deg); }
#panel3 .fox .speech p { margin-top: 2.5em; line-height: 0.9; font-size: 0.125em;  }
#panel3 .fox .eye,
#panel3 .fox .eyebrow,
#panel3 .fox .cheek,
#panel3 .fox .snout,
#panel3 .fox .nose { margin-left: 0.06em; margin-top: 0.1em; }
#panel3 .fox .arm.left { z-index: -2; }
#panel3 .fox .tail { transform: rotate(100deg); top: 0.9em; left: 1.3em; }
​
​
​
​
/* environment */
/* .grass { position: absolute; border-radius: 0.25em/0.4em; background: transparent; height: 0.4em; width: 1em; bottom: -0.7em; left: 1em; border: 0.04em solid #666; border-top: none; border-bottom: none; box-shadow: 20px 0px 0 #ccc; } */
​
/* branch */
.branch,
.twig { position: absolute; background: #7d6149; border-radius: 3em; }
.branch { top: 0.5em; left: -0.1em; height: 0.07em; width: 0.9em; }
.twig { top: -0.05em; left: 0.65em; height: 0.03em; width: 0.3em; transform: rotate(-30deg); }
.leaf { position: absolute; top: -0.115em; left: 0.11em; height: 0.1em; width: 0.12em; background: #75ba1b; border-radius: 5% 50%; transform: rotate(60deg); }
​
​
/* fox gradient 
​
 background: rgba(214,122,57,1);
background: -moz-linear-gradient(top, rgba(214,122,57,1) 0%, rgba(214,122,57,1) 45%, rgba(192,104,53,1) 65%, rgba(113,58,29,1) 80%, rgba(71,34,11,1) 90%, rgba(36,31,11,1) 95%, rgba(36,31,11,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(214,122,57,1)), color-stop(45%, rgba(214,122,57,1)), color-stop(65%, rgba(192,104,53,1)), color-stop(80%, rgba(113,58,29,1)), color-stop(90%, rgba(71,34,11,1)), color-stop(95%, rgba(36,31,11,1)), color-stop(100%, rgba(36,31,11,1)));
background: -webkit-linear-gradient(top, rgba(214,122,57,1) 0%, rgba(214,122,57,1) 45%, rgba(192,104,53,1) 65%, rgba(113,58,29,1) 80%, rgba(71,34,11,1) 90%, rgba(36,31,11,1) 95%, rgba(36,31,11,1) 100%);
background: -o-linear-gradient(top, rgba(214,122,57,1) 0%, rgba(214,122,57,1) 45%, rgba(192,104,53,1) 65%, rgba(113,58,29,1) 80%, rgba(71,34,11,1) 90%, rgba(36,31,11,1) 95%, rgba(36,31,11,1) 100%);
background: -ms-linear-gradient(top, rgba(214,122,57,1) 0%, rgba(214,122,57,1) 45%, rgba(192,104,53,1) 65%, rgba(113,58,29,1) 80%, rgba(71,34,11,1) 90%, rgba(36,31,11,1) 95%, rgba(36,31,11,1) 100%);
background: linear-gradient(to bottom, rgba(214,122,57,1) 0%, rgba(214,122,57,1) 45%, rgba(192,104,53,1) 65%, rgba(113,58,29,1) 80%, rgba(71,34,11,1) 90%, rgba(36,31,11,1) 95%, rgba(36,31,11,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d67a39', endColorstr='#241f0b', GradientType=0 ); */
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers