#bot,#head{position:relative}#head,#switches li,.samuelpasaribu{display:inline-block}#switches,.samuelpasaribu,h2{text-align:center}#switches{width:100%;padding:0;list-style-type:none}#switches li{font-size:large;padding:.5em;cursor:pointer}#bot{background:#323232;text-align:left;border-radius:10px;width:21em;height:21em;min-width:10em;min-height:10em;margin:0 auto}#head{margin-top:15%;margin-left:10%;width:80%;height:70%}#face{position:absolute;margin-left:0;margin-right:0;width:94%;height:100%;border:.4em solid #fff;border-radius:1.5em}#left-ear,#right-ear{position:absolute;top:30%;width:6%;height:25%;border:.15em solid #fff;background-color:#d3d3d3;border-radius:.1em}#left-eye,#mouth,#right-eye{position:absolute;border-radius:.5em}#left-ear{left:-6%}#right-ear{right:-6%}#left-ear-inner,#right-ear-inner{position:absolute;top:20%;width:100%;height:60%;background-color:#d3d3d3;border-radius:.1em}#left-ear-inner{left:-150%}#right-ear-inner{right:-150%}#eyes{position:absolute;width:70%;height:20%;margin-left:16%;margin-top:20%}#left-eye,#right-eye{width:35%;height:100%;background-color:#20b2aa}#right-eye{right:0}#mouth{width:30%;height:4%;border-left:.2em solid #fff;border-right:.2em solid #fff;border-bottom:.2em solid #fff;border-top:0 solid #fff;left:35%;bottom:20%}#bot.neutral #left-eye,#bot.neutral #right-eye{animation:3s ease-in 2s infinite alternate blink-eyes}#bot.neutral #left-ear-inner{animation:5s infinite alternate move-left-ear-inner}#bot.neutral #right-ear-inner{animation:5s infinite alternate move-right-ear-inner}@keyframes blink-eyes{0%{height:10%;margin-top:10%}10%,100%{height:100%;margin-top:0}}#bot.speaking #mouth{border-top:.2em solid #fff;background-color:#fff;animation:1s infinite alternate speak-mouth}@keyframes speak-mouth{0%{width:10%;height:4%;left:45%}25%{width:30%;height:10%;left:35%}50%{width:6%;height:4%;left:47%}75%{width:40%;height:8%;left:30%}100%{width:30%;height:4%;left:35%}}#bot.thinking #eyes{animation:8s ease-in-out 2s infinite glance-eyes}#bot.thinking #mouth{animation:6s 4s infinite alternate pinch-mouth}#bot.thinking #left-ear-inner{animation:6s 4s infinite alternate move-left-ear-inner}#bot.thinking #right-ear-inner{animation:6s 4s infinite alternate move-right-ear-inner}@keyframes glance-eyes{0%,100%,80%{margin-left:16%}10%,40%{margin-left:6%}60%,70%{margin-left:24%}}@keyframes pinch-mouth{0%,100%,48%,52%{width:30%;left:35%}50%{width:10%;left:45%}}@keyframes move-left-ear-inner{0%,100%,48%,52%{left:-150%}50%{left:-100%}}@keyframes move-right-ear-inner{0%,100%,48%,52%{right:-150%}50%{right:-100%}}#bot.listening #left-eye,#bot.listening #right-eye{background-color:#90ee90;border-radius:1em;transition:border-radius .25s linear;animation:none}#bot.listening #left-ear,#bot.listening #left-ear-inner,#bot.listening #right-ear,#bot.listening #right-ear-inner{background-color:#90ee90}#bot.listening #face,#bot.listening #left-ear,#bot.listening #right-ear{border-color:#90ee90;transition:border-color .25s linear}#bot.listening #left-ear-inner,#bot.listening #right-ear-inner{animation:.4s .5s infinite alternate border-bump}@keyframes border-bump{0%{outline:lightgreen dotted .4em}100%{outline:black dotted .2em}}#bot.computing #left-eye,#bot.computing #right-eye{height:100%;width:25%;border-radius:100%;transition:.25s linear;border:.3em dashed #000;background-color:#9ff}#bot.computing #left-eye{animation:1s linear infinite reverse border-dance}#bot.computing #right-eye{animation:1s linear infinite border-dance}#bot.computing #face,#bot.computing #left-ear,#bot.computing #left-ear-inner,#bot.computing #right-ear,#bot.computing #right-ear-inner{border-color:#9ff;transition:border-color .25s linear}#bot.computing #left-ear,#bot.computing #left-ear-inner,#bot.computing #right-ear,#bot.computing #right-ear-inner{background-color:#9ff;transition:background-color .25s linear;animation:none}#bot.computing #mouth{border:.5em solid #fff;width:10%;left:45%}@keyframes border-dance{100%{transform:rotateZ(360deg)}}.samuelpasaribu{vertical-align:middle;padding:8px 20px;background-color:#5b449a;border-radius:2px;color:#fff!important;font-size:14px;margin:15px 0}h2{margin:0;padding:10px 0;border-bottom:1px solid #ddd}