main.css

:root{--default-text-color:#c5c8c6;--intro-text-color:#1d1f21;--highlight-color:linear-gradient(90deg,#2bde96 10%,#79de2b 50%,#2bde96 90%);--terminal-cursor-color:rgba(51,255,0,.8);--terminal-chevron-color:rgba(51,255,0,.7);--background-color:#1d1f21;--deprecated-color:#969896;--avatar-size:115px;--intro-highlight-size:10px;--badge-background-color:#ededed;--badge-padding:5px;--badge-spacing-inside:7px;--accent-font:GradeGX,"Fira Mono",monospace;--deceleration-curve:cubic-bezier(0.0,0.0,0.2,1)}@keyframes caret{0%,30%{border-right-color:transparent}60%,to{border-right-color:var(--terminal-cursor-color)}}@keyframes enter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes intro-highlight{to{transform:scaleX(0)}}:root{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:var(--background-color);color:var(--default-text-color);font-family:Roboto,sans-serif;font-size:16px}p{margin:.5em 0}em,i{font-family:Lato,sans-serif;font-size:1.05em}a:not(.badge-wrapper){color:inherit;font-family:var(--accent-font);font-variation-settings:"wdth" 90,"wght" 100;text-decoration-skip:ink;transition:font-variation-settings .1s}a:not(.badge-wrapper):focus,a:not(.badge-wrapper):hover{font-variation-settings:"wdth" 90,"wght" 130}.content-section{margin:0 auto;max-width:1000px;padding:0 10px}.header{margin-bottom:95px}.title{position:relative;margin:.75em 0 0;font-family:var(--accent-font);font-size:40px;font-weight:400;font-variation-settings:"wdth" 90,"wght" 105;min-height:48px}.title:before{content:"./";speak:spell-out}.title:after{content:".js";padding-right:3px;border-right:1ch solid transparent;animation:caret .8s alternate infinite}.subtitle{margin-left:1.1em;font-size:24px;min-height:29px}@media (max-width:400px){.title{font-size:34px}.subtitle{font-size:20px}}.intro{position:relative;margin-bottom:50px;color:var(--intro-text-color);min-height:221px;animation:enter .15s var(--deceleration-curve)}.avatar,.intro{background:var(--default-text-color)}.avatar{margin-top:calc(var(--avatar-size) / -2);width:var(--avatar-size);height:var(--avatar-size);border-radius:50%}.intro-content-section{overflow:hidden;animation:enter .15s var(--deceleration-curve) .5s backwards}.badges{margin:15px auto 10px;display:flex;justify-content:space-between;max-width:670px;animation:enter .15s var(--deceleration-curve) .95s backwards}.badge-wrapper{color:inherit;text-decoration:none}.badge-wrapper:focus .badge,.badge-wrapper:hover .badge{transform:translateY(-3px);box-shadow:0 4px 2px -1px gray;transition:all .2s var(--deceleration-curve);transition-property:transform,box-shadow}.badge{display:flex;padding:var(--badge-padding) var(--badge-spacing-inside);min-width:210px;background:var(--badge-background-color);border-radius:4px}.badge-image{max-width:35px;max-height:35px;flex-grow:1;align-self:center}.badge-contents{margin-left:var(--badge-spacing-inside)}.badge-username{margin-bottom:1px;font-size:14px}.badge-stats{font-size:13px;text-shadow:1px 1px 0 #fff}.badge-stats-block{display:inline-block}.badge-stats-block:not(:last-child){margin-right:var(--badge-spacing-inside)}.badge-stat-value{font-family:var(--accent-font);font-variation-settings:"wdth" 90,"wght" 120}.stackoverflow-bronze-badges,.stackoverflow-gold-badges,.stackoverflow-silver-badges{margin-right:3px;display:inline-block;width:8px;height:8px;border-radius:50%}.stackoverflow-gold-badges{background:gold}.stackoverflow-silver-badges{background:silver}.stackoverflow-bronze-badges{background:#cd9965}.npm-badge-image{margin-top:1px}.intro:before{display:block;background:var(--highlight-color)}.intro:after,.intro:before{position:absolute;top:100%;left:0;right:0;content:"";height:var(--intro-highlight-size)}.intro:after{background:var(--background-color);animation:intro-highlight .3s var(--deceleration-curve) 1.45s forwards}@media (max-width:680px){.badges{flex-direction:column;align-items:center}.badge-wrapper:not(:last-child){margin-bottom:10px}}.projects{margin-bottom:10px;min-height:300px}.workspace{animation:enter .15s var(--deceleration-curve)}.chevron{display:inline-block;color:var(--terminal-chevron-color);user-select:none}#termynal:not([data-termynal]){display:none}[data-termynal]{width:100%!important;padding:45px 17px 25px;font-family:inherit;font-size:inherit;color:inherit;min-height:91px!important;animation:enter .15s var(--deceleration-curve)}[data-termynal]:before{width:13px;height:13px}[data-termynal] p{margin:1em 0 0}[data-ty]{line-height:normal}[data-ty]:before{display:none}[data-ty=input]{margin-left:8px;display:inline-block}[data-ty-cursor]:after{margin-top:-5px;margin-left:.1em;display:inline-block;color:var(--terminal-cursor-color)}.text-center{text-align:center}.visuallyhidden{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}