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