#react,body,html{height:100%}body{font-family:Camphor,sans-serif}.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));background:#000;min-height:100%}.candle{width:34px;height:100px;margin:30px;position:relative;transform:scale(.6);cursor:pointer;opacity:1;animation:blink .1s infinite}.candle.unlit{animation:none}.flame{width:34px;height:60px;animation:move 3s infinite,move-left 3s infinite;margin:0 auto;opacity:1;transition:opacity .3s ease-in-out}.unlit>.flame{opacity:0;transition:all .2s ease-in-out}.orange{margin:0 auto;width:20px;height:60px;position:absolute;top:0;left:5px;background:#fff;box-shadow:0 0 0 3px #fff,0 -10px 1px 4px #fff,0 -15px 2px 3px gold,0 -20px 5px 4px #ff6a00,0 0 100px 10px #ff6a00,0 -10px 2px 4px #fff,0 -5px 3px 3px #fff;border-top-left-radius:100px 750px;border-top-right-radius:100px 750px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;transform:skewY(-10deg);animation:flame-up 4s infinite}@keyframes move{0%{transform:skewX(2deg) skewY(5deg)}50%{transform:skewX(-2deg) skewY(0deg)}to{transform:skewX(2deg) skewY(5deg)}}@keyframes move-left{50%{transform:skewX(3deg)}}@keyframes flame-up{50%{box-shadow:0 0 0 3px #fff,0 -38px 1px 4px #fff,0 -41px 2px 3px gold,0 -50px 5px 4px #ff6a00,0 0 100px 10px #ff6a00,0 -10px 2px 4px #fff,0 -5px 3px 3px #fff}}.blue{transform:scale(.9);bottom:6px;left:14px;height:8px;border-radius:1%;background:#2c2b39;box-shadow:0 6px 10px 12px rgba(60,76,125,.3),0 0 4px 8px #2c2b39,0 -12px 10px 8px rgba(255,106,0,.5),0 5px 7px 12px #2c2b39,0 -3px 10px 12px #2c2b39,5px -10px 10px 5px red,0 -15px 10px 10px gold,5px -25px 10px 5px gold,0 2px 5px 10px #30537d,0 -2px 2px 14px #76daff,0 2px 10px 12px #76daff}.blue,.shadows{position:absolute;width:1px}.shadows{left:40%;top:0;height:20px;border-radius:.1px/10px;box-shadow:0 5px 10px 15px gold,0 0 50px 25px #ff6a00,0 15px 25px 15px #ff6a00,5px 15px 5px 13px #ff6a00,5px 15px 5px 13px #ff6a00,0 35px 25px 15px #000}.wick{position:absolute;width:6px;height:40px;background:#23161a;top:40px;left:13px;transform:skewX(2deg);border-radius:10%;box-shadow:0 0 2px 0 #000}.wax{position:relative;top:15px;left:-22px;width:80px;height:50px;background:linear-gradient(180deg,#ff9224 0,#ff9224 10px,#58523a 30px);border-top-left-radius:10px;border-top-right-radius:10px;box-shadow:inset 0 7px 12px -2px #fbf348,inset 0 9px 57px -3px rgba(255,0,0,.4),0 0 3px 0 #ff6a00;transition:all .3s ease-in-out}.unlit>.wax{box-shadow:inset 0 7px 12px -2px #2a2a2a,inset 0 9px 57px -3px rgba(255,0,0,.4),0 0 3px 0 #2a2a2a;background:linear-gradient(180deg,#292617 0,#58523a 10px,#58523a 30px);transition:all .2s ease-in-out}@keyframes blink{50%{opacity:.9}}.candle-frame{position:relative;margin:10px;display:grid;place-items:center}.message{color:#fff;z-index:2;overflow:hidden;display:grid;place-items:center}.candle-frame:after,.message{position:absolute;top:0;left:0;pointer-events:none;opacity:0;transition:all .1s ease-in;width:100%;height:100%}.candle-frame:after{content:"\A";background:rgba(0,0,0,.6);z-index:1}.lit.candle-frame:hover:after,.lit.candle-frame:hover>.message,.message.composing{opacity:1}.composer-holder{opacity:0;position:absolute;left:-999px}.composing>.composer-holder{opacity:1;position:unset}.composer{border:none;outline:none;background-color:rgba(0,0,0,.8);color:#fff}
/*# sourceMappingURL=index.30c7baa6.css.map */