:root{--loader-color:#8f48ff;--loader-size:20vh}.loader{color:var(--loader-color);font-family:Consolas,Menlo,Monaco,monospace;font-weight:700;font-size:var(--loader-size);opacity:.8}.loader span{display:inline-block;animation:pulse-loader .5s ease-in-out infinite alternate}.loader span:nth-child(odd){animation-delay:.5s}.loading-text{position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;text-transform:uppercase;letter-spacing:10px}.loading-text:before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;color:#8f48ff;overflow:hidden;animation:animate-text 3s linear infinite;border-right:4px solid #8f48ff}@keyframes animate-text{0%{width:0}50%{width:99%}to{width:0}}@keyframes pulse-loader{to{transform:scale(.8);opacity:.5}}.bar,.bar:before{border-radius:1rem}.bar:before{content:attr(data-skill);background-color:#8f48ff;display:inline-block;padding:5px 0 5px 10px;border:none;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.bar.learning:before{width:calc(25%)}.bar.basic:before{width:calc(45%)}.bar.intermediate:before{width:calc(60%)}.bar.advanced:before{width:calc(75%)}.bar.expert:before{width:calc(90%)}.bar.god:before{width:calc(100%)}.typewriter h1{overflow:hidden;border-right:.15em solid #8f48ff;white-space:nowrap;letter-spacing:.15em;animation:typing 3s steps(30),blink-caret .8s step-end infinite;animation-delay:1s}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#8f48ff}}