:root{--main-color:#eaeaea;--stroke-color:black}body{background:var(--main-color)}h1{color:var(--stroke-color);text-align:center;margin:100px auto 0;font-family:Encode Sans Semi Condensed,Verdana,sans-serif;font-size:10rem;font-weight:200;line-height:10rem}h2{text-align:center;margin:20px auto 30px;font-family:Encode Sans Semi Condensed,Verdana,sans-serif;font-size:1.5rem;font-weight:200}h1,h2{transition:opacity .5s linear,margin-top .5s linear}.gears{width:auto;height:0;margin:0 auto;position:relative}.gear{z-index:0;background:var(--stroke-color);border-radius:50%;width:120px;height:120px;margin:0 auto;position:relative}.gear:before{z-index:2;content:"";background:var(--main-color);border-radius:50%;position:absolute;inset:5px}.gear:after{z-index:3;content:"";border:5px solid var(--stroke-color);box-sizing:border-box;background:var(--main-color);border-radius:50%;width:70px;height:70px;position:absolute;top:25px;left:25px}.gear.one{left:-130px}.gear.two{top:-75px}.gear.three{top:-235px;left:130px}.gear .bar{z-index:0;background:var(--stroke-color);border-radius:5px;width:150px;height:30px;margin-top:-15px;position:absolute;top:50%;left:-15px}.gear .bar:before{z-index:1;content:"";background:var(--main-color);border-radius:2px;position:absolute;inset:5px}.gear .bar:nth-child(2){transform:rotate(60deg)}.gear .bar:nth-child(3){transform:rotate(120deg)}@-webkit-keyframes clockwise{0%{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-webkit-keyframes anticlockwise{0%{-webkit-transform:rotate(360deg)}to{-webkit-transform:rotate(0)}}@-webkit-keyframes clockwiseError{0%{-webkit-transform:rotate(0)}20%{-webkit-transform:rotate(30deg)}40%{-webkit-transform:rotate(25deg)}60%{-webkit-transform:rotate(30deg)}to{-webkit-transform:rotate(0)}}@-webkit-keyframes anticlockwiseErrorStop{0%{-webkit-transform:rotate(0)}20%{-webkit-transform:rotate(-30deg)}60%{-webkit-transform:rotate(-30deg)}to{-webkit-transform:rotate(0)}}@-webkit-keyframes anticlockwiseError{0%{-webkit-transform:rotate(0)}20%{-webkit-transform:rotate(-30deg)}40%{-webkit-transform:rotate(-25deg)}60%{-webkit-transform:rotate(-30deg)}to{-webkit-transform:rotate(0)}}.gear.one{-webkit-animation:2s linear infinite anticlockwiseErrorStop}.gear.two{-webkit-animation:2s linear infinite anticlockwiseError}.gear.three{-webkit-animation:2s linear infinite clockwiseError}.loading .gear.one,.loading .gear.three{-webkit-animation:3s linear infinite clockwise}.loading .gear.two{-webkit-animation:3s linear infinite anticlockwise}