.c-btn,[class^=ButtonBase__ButtonContainer]{font-size:1rem;line-height:1.25;color:#fff;font-weight:400;text-align:center;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;display:inline-block;vertical-align:middle;padding:1rem 3rem .875rem;border:1px solid var(--color-action);background-color:var(--color-action);border-radius:.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;& .c-svg-external-link{margin-top:-.1875em;transition:none}}.c-btn--small{font-size:.875rem;line-height:1;padding:.5rem 1rem .375rem}.theme-light{& .c-btn{color:wheat}}@media (--hover ){.c-btn:hover{color:#fff;background-color:wheat}.theme-light .c-btn:hover{background-color:var(--color-secondary)}}.c-section--occupation,.c-section--skills{&:before{color:wheat;z-index:1;opacity:.1;background-color:red}&:after{z-index:2;color:wheat}& .o-shell{z-index:3}& .c-section__container,& .c-section__wrapper{& a{color:currentcolor;text-decoration:none;pointer-events:none}& a,& svg{color:wheat}& svg{width:100%;display:block;overflow:visible}& text{font-size:1rem;line-height:1;fill:var(--color-primary);text-shadow:0 0 .25rem var(--color-secondary);opacity:0;visibility:hidden;transition:opacity var(--timing) var(--easing),visibility var(--timing) var(--easing);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:wheat}& line{stroke:wheat;stroke-width:.1275rem;color:wheat}& use{opacity:1;visibility:visible;transition:opacity var(--timing) var(--easing),visibility var(--timing) var(--easing);pointer-events:none;color:wheat;&:not([fill]){fill:var(--color-primary)}}& circle{stroke:wheat;stroke-width:.1275rem;cursor:all-scroll;transition:fill var(--timing) var(--easing),stroke var(--timing) var(--easing),stroke-width var(--timing) var(--easing);color:wheat}& g:hover{&>circle{fill:red;stroke:none;stroke-width:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;&~a text,&~text{opacity:1;visibility:visible;text-anchor:middle;fill:#fff;font-weight:700;font-size:1rem}&~a use,&~use{opacity:0;visibility:hidden}}}& .o-grid{max-height:208rem;justify-content:flex-start;overflow:hidden;transition:max-height var(--timing) var(--easing);&.is--hidden{max-height:0}}& .o-shell{position:relative;z-index:2}}}#occupation-graph,#skills-graph{height:100vh;position:relative;transition:height var(--timing) var(--easing);& svg{opacity:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity var(--timing) var(--easing)}&.is--hidden{height:0;pointer-events:none;& svg{opacity:1}}}.c-skill{color:var(--color-secondary);text-align:left;min-height:100%;padding:1rem;margin:0;list-style:none outside none;background-color:color-mod(var(--color-primary) a(70%));border-radius:1rem;& img,& strong{display:block}& strong{padding-bottom:.5rem}& figure{width:3.5rem;height:3.5rem;padding:.0625rem;margin-right:1rem;background-color:color-mod(var(--color-secondary) a(30%));border-radius:50%;& svg{width:auto;margin:auto}}}@media (--tablet-landscape ){.c-section--skills{& .c-section__wrapper .o-grid{max-height:273.5rem}}}@media (--tablet-portrait ){.c-section--skills{& .c-section__wrapper .o-grid{max-height:410rem}}#occupation-graph{& svg{height:100%}}}@media (--mobile ){.c-section--skills{& .c-section__wrapper .o-grid{max-height:630rem}& .o-grid__item+.o-grid__item{padding-top:0}}#skills-graph{height:75vh;& svg{transform:translate(-50%,-25%)}}#occupation-graph{& svg{height:100%;transform:translate(-50%,-25%)}}.c-skill{padding:.5rem;& figure{width:3rem;height:3rem;padding:.25rem;margin-right:.5rem}& strong{padding:0}}}.theme-light{& .c-section--skills{& .c-section__container,& .c-section__wrapper{& text,& use:not([fill]){fill:var(--color-secondary)}& text{text-shadow:0 0 .25rem var(--color-primary)}}}& .c-skill{color:var(--color-primary);background-color:color-mod(var(--color-secondary) a(7%))}}[class^=svg-]{display:inline-block;vertical-align:middle}.c-svg-email{width:1.5rem;height:1.69rem;fill:currentColor}.c-svg-github,.c-svg-gitlab{width:1.5rem;height:1.63rem;fill:currentColor}.c-svg-twitter{width:1.5rem;height:1.38rem;fill:currentColor}.c-svg-npm{width:1.5rem;height:1.5rem;fill:var(--color-secondary);background-color:currentColor;border-radius:.25rem}.c-svg-stackoverflow{width:1.5rem;height:1.5rem;fill:currentColor}.c-svg-youtube{width:3rem;height:1.5rem;fill:currentColor}.c-svg-linkedin{width:1.5rem;height:1.63rem;fill:currentColor}.c-svg-logo{width:3.13rem;height:3.13rem;fill:currentColor;stroke:currentColor;stroke-width:.25rem}.c-svg-codepen,.c-svg-google-plus{width:1.5rem;height:1.5rem;fill:currentColor}.c-svg-codersrank{width:2.5rem;height:1.5rem}.c-svg-external-link{fill:currentcolor;width:1em;height:1em;display:inline-block;vertical-align:middle;margin:-.0625rem 0 0 .25rem}.lines{width:100%;height:100%;position:fixed;top:0;right:0;left:0;z-index:-1;margin:auto;pointer-events:none;color:wheat}.line{position:absolute;overflow:hidden;&:after{content:"";display:block;position:absolute;animation-duration:7s;animation-iteration-count:infinite;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.4,.26,0,.97);color:wheat}&.line--vertical{width:1px;height:100%;top:0;left:50%;color:#fff;&:after{width:100%;height:15vh;top:-50%;left:0;background:linear-gradient(to bottom,#fff 0,var(--color-primary) 75%,var(--color-primary) 100%);animation-name:drop-vertical}&:first-child{margin-left:-30vw;&:after{animation-delay:2s}}&:nth-child(3){margin-left:30vw;&:after{animation-delay:3s}}}&.line--horizontal{width:100%;height:1px;top:50%;left:0;color:wheat;&:after{width:15vw;height:100%;top:0;left:50%;background:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--color-secondary) 75%,var(--color-secondary) 100%);animation-name:drop-horizontal;animation-delay:.5s}&:first-child{margin-top:-30vh;&:after{animation-delay:1s}}&:nth-child(3){margin-top:30vh;&:after{animation-delay:4s}}}}.c-section{position:relative;z-index:2;padding:9rem 0 4rem;overflow:hidden;& .o-shell{position:relative;z-index:2}}.c-section__actions,.c-section__container,.c-section__entry,.c-section__header{position:relative;z-index:2}.c-section__actions,.c-section__header{text-align:center;flex:0 0 100%}.c-section__header{padding-bottom:4rem;& h2{& a{text-decoration:underline}& small{font-size:50%;display:block}}}.c-section__container{padding:4rem 0}.c-section__actions{padding-top:3rem;& .c-btn{margin:0 1rem}}.c-section__actions-list{position:absolute;top:-2rem;left:50%;z-index:3;padding:0;margin:0;list-style:none outside none;transform:translateX(-50%);pointer-events:none;&:before{content:"";position:absolute;top:-10rem;right:-5rem;bottom:-10rem;left:-5rem;z-index:1;background-color:color-mod(var(--color-secondary) a(90%));border-radius:50%;transform:scale(0);box-shadow:0 0 1.5rem color-mod(var(--color-primary) a(30%)) inset,0 0 1.5rem color-mod(var(--color-primary) a(30%))}& li,&:before{opacity:0;visibility:hidden;transition:all var(--timing) var(--easing)}& li{z-index:2;transform:scale(0) translate(0);&:first-child{position:absolute;bottom:18%;left:50%;transform:translateX(-50%)}&:not(:first-child){& .c-btn{font-size:1rem;line-height:1;text-transform:none;width:10rem;height:10rem;align-content:center;padding:1.5rem;border:1px solid var(--color-primary);background:none;border-radius:50%}}}& .c-btn{margin:0;& span{flex:0 0 100%;display:block;padding:.5rem 0}& svg{fill:currentColor;transition:none}& .c-section__actions-icon{width:3rem;height:3rem;display:block;margin:auto}& .c-svg-external-link,& strong{display:inline-block;vertical-align:middle}& .c-svg-external-link{width:1em;height:1em;margin-top:0}}}.c-section__actions-list--open{pointer-events:auto;& li,&:before{opacity:1;visibility:visible;transform:scale(1)}& li{&:nth-child(2){transform:scale(1) translate(-2rem,-1rem)}&:nth-child(3){transform:scale(1) translateY(-8rem)}&:nth-child(4){transform:scale(1) translate(2rem,-1rem)}}}.c-section__actions-close{color:var(--color-primary);font-size:0;line-height:0;width:2rem;height:2rem;display:block;padding:0;border:1px solid var(--color-action);background-color:var(--color-action);border-radius:50%;box-shadow:none;&:after,&:before{content:"";width:.125rem;height:1.25rem;display:block;z-index:2;background-color:currentColor}&:before{transform:rotate(45deg)}&:after{transform:rotate(-45deg)}}.c-section__animation{position:absolute;right:0}.c-section__grid{& .o-grid__item{position:relative}& .c-article-link{padding-bottom:75%;border:1px solid}}@media (--tablet-portrait ){.c-section__actions-list{width:70vw}}@media (--mobile ){.c-section{padding:7rem 0 2rem}.c-section__header{padding-bottom:2rem;& h2{text-align:left;& small{display:block;padding:0}}}.c-section__actions{padding-top:1rem;& .c-btn{&~.c-btn{margin-top:2rem}}}.c-section__container{padding:0}.c-section__actions-list{width:90vw;top:auto;bottom:-1rem;&:before{top:-8rem;right:0;bottom:-8rem;left:0}& li{&:first-child{bottom:1.75rem}&:not(:first-child){& .c-btn{font-size:.75rem;line-height:1;width:6rem;height:6rem;padding:.25rem}}}& .c-btn{& span{padding:.25rem 0}& .c-section__actions-icon{width:1.25rem;height:1.25rem}}}.c-section__actions-list--open{& li{&:nth-child(2){transform:scale(1) translateY(-1rem)}&:nth-child(3){transform:scale(1) translateY(-6rem)}&:nth-child(4){transform:scale(1) translateY(-1rem)}}}.c-section__animation{position:relative;top:auto!important;right:auto;margin-bottom:2rem}.c-section__grid{& .o-grid__item+.o-grid__item{padding-top:0}}}.theme-light{& .c-section__actions-close,& .c-section__header h2{color:var(--color-secondary)}& .c-section__actions-list{& li:not(:first-child) .c-btn{border-color:var(--color-secondary)}}}@media (--hover ){.c-section__actions-list{& li{&:not(:first-child){& .c-btn:hover{color:var(--color-action);border-color:var(--color-action);background-color:var(--color-primary)}}}}.theme-light .c-section__actions-close:hover{color:var(--color-action)}}