.navbar{background:#ddd;height:16px;width:100%}.navbar .dot{background:#fff;border-radius:100%;display:inline-block;height:8px;margin:4px;width:8px}.navbar .dot:first-child{background:#e76d6b}.navbar .dot:nth-child(2){background:#dfbc43}.navbar .dot:nth-child(3){background:#37d488}.display{background:#fff;border:10px solid #222;border-radius:12px 12px 4px 4px;border-top-width:20px;box-shadow:0 0 0 1px #ddd;box-sizing:border-box;height:350px;margin:0 auto;max-width:450px;position:relative;width:80%}.display:before{background:#e6e8e7;border-radius:50%;content:"";height:3px;left:50%;position:absolute;top:-12px;transform:translateX(-50%);width:3px}.editor{display:flex}.sidebar{background:#777;border-right:1px solid #666;height:273.5px;width:30px}.css-typing{padding-top:10px}.css-typing p{animation:type 5s steps(40);color:#000;font-family:Roboto,sans-serif;font-size:22px;margin-left:5px;overflow:hidden;white-space:nowrap;width:20em}.css-typing p:nth-child(2){animation:type2 5s steps(40);animation-delay:1.5s;animation-fill-mode:forwards;opacity:0}.css-typing p:nth-child(3){animation:type3 5s steps(40);animation-delay:2.3s;animation-fill-mode:forwards;color:#000;margin-left:15px;opacity:0}.css-typing p:nth-child(4){animation:type3 5s steps(40);animation-delay:3s;animation-fill-mode:forwards;color:#000;margin-left:25px;opacity:0}.dots{font-size:24px;margin-left:5px}.dots,.dots:after{display:inline-block}.dots:after{animation:typingDots 1.5s steps(1) infinite,blink .75s step-end infinite;content:""}@keyframes typingDots{0%{content:"!"}33%{content:"!!"}66%{content:"!!!"}to{content:"!"}}@keyframes blink{0%{border-right:2px solid transparent}50%{border-right:2px solid #000}to{border-right:2px solid transparent}}@keyframes type{0%{width:0}}@keyframes type2{0%{width:0}0%{opacity:0}1%{opacity:1}to{opacity:1}}@keyframes type3{0%{width:0}0%{opacity:0}1%{opacity:1}to{opacity:1}}.base{background:#999;background-image:-webkit-linear-gradient(left,#555,#777 50%,#555);border-bottom:3px solid #555;border-radius:2px 2px 25px 25px;box-shadow:1px 1px 10px 0 #333;height:17px;max-width:500px;position:relative;width:90%}.base,.base:before{left:50%;transform:translateX(-50%)}.base:before{background:#999;border-radius:0 0 10px 10px;content:"";display:block;height:8px;position:absolute;width:100px}