body,html{padding:0;margin:0;line-height:1.5;font-family:sans-serif;--navbar-height:78px;--icon-size:55px;--border-radius:6px}body *,html *{box-sizing:border-box}body a,body h1,body h2,body h3,body h4,body h5,body h6,body img,body input,body p,html a,html h1,html h2,html h3,html h4,html h5,html h6,html img,html input,html p{margin:0;padding:0;border:0}body a,html a{color:var(--theme-color);text-decoration:none}body a:hover,html a:hover{color:var(--theme-accent-color);text-decoration:underline}body .app-warpper,html .app-warpper{--theme-color:#888;--theme-accent-color:#2d4597;--theme-strong-color:#000;--theme-background-color:#fff;--theme-background-color-translucent:#fffd;min-height:100vh;background-color:var(--theme-background-color);color:var(--theme-color)}body .app-warpper .strong,body .app-warpper .title,html .app-warpper .strong,html .app-warpper .title{color:var(--theme-strong-color)}body .app-warpper .accent,html .app-warpper .accent{color:var(--theme-accent-color)}body .app-warpper.dark-mode,html .app-warpper.dark-mode{--theme-color:#bbb;--theme-accent-color:#7d9bff;--theme-strong-color:#fff;--theme-background-color:#000;--theme-background-color-translucent:#000c}body .title,html .title{font-size:2rem;line-height:2}body .container,html .container{margin:0 auto;max-width:1200px;padding:0 1rem}@media(min-width:576px){body .container,html .container{padding:0 2rem}}body .switch,html .switch{width:35px;height:17px;border-radius:8.5px;background:#fff;position:relative;cursor:pointer}body .switch input,html .switch input{opacity:0}body .switch input,body .switch input+label,body .switch input+label:before,html .switch input,html .switch input+label,html .switch input+label:before{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}body .switch input+label:before,html .switch input+label:before{content:"";background:#aaa;border-radius:8.5px;cursor:pointer;transition:all .2s}body .switch input+label:after,html .switch input+label:after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:#fff;transition:all .2s;box-shadow:0 4px 5px 0 rgba(0,0,0,.2);cursor:pointer}body .switch input:checked+label:before,html .switch input:checked+label:before{background:#0070f3}body .switch input:checked+label:after,html .switch input:checked+label:after{left:19px}body .skill-border,html .skill-border{width:var(--icon-size);height:var(--icon-size);border-radius:var(--border-radius);overflow:hidden;border:1px solid hsla(0,0%,75%,.6);margin:0 0 var(--icon-margin) var(--icon-margin)}body .skill-item,html .skill-item{--percentage:100;--shadow-color:#0003;z-index:2;pointer-events:none;width:var(--icon-size);height:var(--icon-size);border-radius:var(--border-radius);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}body .skill-item svg,html .skill-item svg{height:80%;width:80%}body .skill-item:before,html .skill-item:before{content:"";position:absolute;inset:0;background:conic-gradient(transparent calc(var(--percentage) * 1%),var(--shadow-color) 0)}body .header,html .header{position:fixed;top:0;left:0;width:100vw;z-index:100;background-color:var(--theme-background-color)}body .header .wrapper,html .header .wrapper{height:var(--navbar-height);display:flex;align-items:center;justify-content:space-between}body .header .wrapper .name,html .header .wrapper .name{z-index:2;display:inline-block;padding:0 0 0 1rem}body .header .wrapper .name a,html .header .wrapper .name a{color:var(--theme-strong-color);display:block;transition:all .3s}body .header .wrapper .name a:hover,html .header .wrapper .name a:hover{color:var(--theme-strong-color);text-decoration:none}body .header .wrapper .header-nav,html .header .wrapper .header-nav{flex-grow:1}body .header .wrapper .header-nav ul,html .header .wrapper .header-nav ul{display:flex;padding:0;align-items:center;justify-content:flex-end}body .header .wrapper .header-nav ul li,html .header .wrapper .header-nav ul li{font-size:12px;margin:0 .4rem;display:inline-block;padding:0;text-transform:uppercase;letter-spacing:.2rem}body .header .wrapper .header-nav ul li a,html .header .wrapper .header-nav ul li a{font-weight:500;display:inline-block;color:var(--theme-color);padding:1rem;transition:.3s}body .header .wrapper .header-nav ul li a.current,body .header .wrapper .header-nav ul li:hover a,html .header .wrapper .header-nav ul li a.current,html .header .wrapper .header-nav ul li:hover a{color:var(--theme-strong-color);text-decoration:none}body .header .wrapper .dark-mode-wrapper,html .header .wrapper .dark-mode-wrapper{display:flex;align-items:center;z-index:2;padding-left:4rem}body .header .wrapper .dark-mode-wrapper .moon,html .header .wrapper .dark-mode-wrapper .moon{margin-left:.75rem;fill:var(--theme-color)}body .header .wrapper .dark-mode-wrapper .moon.on,html .header .wrapper .dark-mode-wrapper .moon.on{fill:var(--theme-strong-color)}body .header .wrapper .header-menu-toggle,html .header .wrapper .header-menu-toggle{display:none;height:42px;width:42px;line-height:42px;font-family:Lora,serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.2rem;color:hsla(0,0%,100%,.5);transition:all .3s;position:relative}body .header .wrapper .header-menu-toggle span,html .header .wrapper .header-menu-toggle span{display:block;width:24px;height:2px;margin-top:-1px;background-color:var(--theme-strong-color);transition:all .5s;font:0/0 a;text-shadow:none;color:transparent;position:relative;top:50%;left:9px;right:auto;bottom:auto}body .header .wrapper .header-menu-toggle span:before,html .header .wrapper .header-menu-toggle span:before{top:-9px;content:"";width:100%;height:100%;background-color:var(--theme-strong-color);position:absolute;left:0;transition:all .5s}body .header .wrapper .header-menu-toggle span:after,html .header .wrapper .header-menu-toggle span:after{top:9px;content:"";width:100%;height:100%;background-color:var(--theme-strong-color);position:absolute;left:0;transition:all .5s}@media(max-width:575px){body .header .wrapper .header-nav,html .header .wrapper .header-nav{inset:0;position:absolute}body .header .wrapper .header-nav ul,html .header .wrapper .header-nav ul{margin:-10px 0 0;opacity:0;pointer-events:none;background-color:var(--theme-background-color);padding-top:var(--navbar-height);flex-direction:column;align-items:stretch;justify-content:flex-start;transition:margin .3s ease-in-out,opacity .3s ease-in-out}body .header .wrapper .header-nav ul li a,html .header .wrapper .header-nav ul li a{width:100%}body .header .wrapper .header-menu-toggle,html .header .wrapper .header-menu-toggle{display:block}body .header .wrapper.expanded ul,html .header .wrapper.expanded ul{pointer-events:unset;margin-top:0;opacity:1}body .header .wrapper.expanded .header-menu-toggle span,html .header .wrapper.expanded .header-menu-toggle span{background-color:hsla(0,0%,100%,0)}body .header .wrapper.expanded .header-menu-toggle span:before,html .header .wrapper.expanded .header-menu-toggle span:before{top:0;transform:rotate(135deg)}body .header .wrapper.expanded .header-menu-toggle span:after,html .header .wrapper.expanded .header-menu-toggle span:after{top:0;transform:rotate(225deg)}}body main section,html main section{padding:6rem 0 5rem}body main .hero,html main .hero{min-height:100vh;display:flex;justify-content:center;align-items:center}body main .hero .wrapper,html main .hero .wrapper{margin-top:calc(var(--navbar-height)/2);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}body main .hero .wrapper .title,html main .hero .wrapper .title{margin:0;line-height:1.15;font-size:5rem}body main .hero .wrapper .description,html main .hero .wrapper .description{max-width:680px;font-size:1.25rem;line-height:1.7;margin:1.25rem 0}body main .hero.project-hero,html main .hero.project-hero{margin-top:var(--navbar-height);margin-bottom:3rem;min-height:unset}body main .about,html main .about{background-color:hsla(0,0%,75%,.1)}body main .about .wrapper,html main .about .wrapper{display:flex;flex-wrap:wrap;justify-content:stretch;align-items:flex-start}body main .about .wrapper .image-wrapper,html main .about .wrapper .image-wrapper{width:100%;flex-shrink:0;padding:1rem;display:flex;justify-content:center;align-items:center}body main .about .wrapper .content,html main .about .wrapper .content{padding:1.5rem 1rem;width:100%}body main .about .wrapper .content p,html main .about .wrapper .content p{font-size:1.15rem;line-height:1.7;margin-bottom:3rem}body main .about .wrapper .content p:last-child,html main .about .wrapper .content p:last-child{margin-bottom:0}@media(min-width:576px){body main .about .wrapper .image-wrapper,html main .about .wrapper .image-wrapper{width:50%;flex-shrink:0}}@media(min-width:768px){body main .about .wrapper,html main .about .wrapper{align-items:center}body main .about .wrapper .image-wrapper,html main .about .wrapper .image-wrapper{max-width:600px;padding-right:3rem}body main .about .wrapper .content,html main .about .wrapper .content{width:50%}}body main .skills,html main .skills{background-color:hsla(0,0%,75%,.05)}body main .skills .title,html main .skills .title{margin-left:4rem}body main .skills .wrapper,html main .skills .wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}body main .skills .wrapper .content,html main .skills .wrapper .content{--icon-margin:16px;--5-icons-width:calc(5 * (var(--icon-size) + var(--icon-margin)));--4-icons-width:calc(4 * (var(--icon-size) + var(--icon-margin)));--icons-width:100%;width:100%;padding-left:1rem;padding-bottom:.8rem;margin-top:1.8rem}@media(min-width:768px){body main .skills .wrapper .content,html main .skills .wrapper .content{--icons-width:var(--4-icons-width);width:50%}}@media(min-width:992px){body main .skills .wrapper .content,html main .skills .wrapper .content{--icons-width:var(--5-icons-width);width:50%}}@media(min-width:1200px){body main .skills .wrapper .content,html main .skills .wrapper .content{--icons-width:var(--4-icons-width);width:33.3%}}body main .skills .wrapper .content h3,html main .skills .wrapper .content h3{font-size:1.7rem;font-weight:600;margin-bottom:1.2rem}body main .skills .wrapper .content .items,html main .skills .wrapper .content .items{width:var(--icons-width);display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-left:calc(-1*var(--icon-margin))}body main .skills .wrapper .content .details-wrapper,html main .skills .wrapper .content .details-wrapper{margin-left:var(--icon-margin);width:100%}body main .skills .wrapper .content .details-wrapper .details,html main .skills .wrapper .content .details-wrapper .details{position:relative;border-radius:9px;min-height:104px;border:1px solid hsla(0,0%,75%,.4);display:flex;align-items:center;justify-content:flex-start}body main .skills .wrapper .content .details-wrapper .details .skill-item,html main .skills .wrapper .content .details-wrapper .details .skill-item{position:absolute;left:15px;top:15px;width:70px;height:70px;border:1px solid hsla(0,0%,75%,.2)}body main .skills .wrapper .content .details-wrapper .details .placeholder,html main .skills .wrapper .content .details-wrapper .details .placeholder{position:absolute;inset:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;opacity:.6}body main .skills .wrapper .content .details-wrapper .details .description,html main .skills .wrapper .content .details-wrapper .details .description{padding-left:100px;height:100%}body main .skills .wrapper .content .details-wrapper .details .description .strong,html main .skills .wrapper .content .details-wrapper .details .description .strong{font-size:1.3rem;line-height:1.1;font-weight:600;margin-bottom:.4rem}body main .experience,html main .experience{padding-top:2rem;background-color:hsla(0,0%,50%,.1)}body main .experience .wrapper,html main .experience .wrapper{display:flex;justify-content:stretch;align-items:flex-start;flex-wrap:wrap}body main .experience .wrapper .content,html main .experience .wrapper .content{--icon-radius:35px;padding:1rem;width:100%;margin-top:4rem;margin-bottom:2rem}@media(min-width:768px){body main .experience .wrapper .content,html main .experience .wrapper .content{padding:0 3rem 0 2rem;--icon-radius:40px}}@media(min-width:992px){body main .experience .wrapper .content,html main .experience .wrapper .content{padding:0 2rem;width:50%}}body main .experience .wrapper .content .timeline,html main .experience .wrapper .content .timeline{position:relative;margin:0 0 0 var(--icon-radius);border-left:1px solid hsla(0,0%,50%,.5)}body main .experience .wrapper .content .timeline .item,html main .experience .wrapper .content .timeline .item{position:relative;padding-left:5rem;padding-bottom:.8rem;margin-top:2.8rem}body main .experience .wrapper .content .timeline .item:last-child,html main .experience .wrapper .content .timeline .item:last-child{padding-bottom:.25rem}body main .experience .wrapper .content .timeline .item .icon,html main .experience .wrapper .content .timeline .item .icon{display:block;width:calc(2*var(--icon-radius) - 2px);height:calc(2*var(--icon-radius) - 2px);background-color:#fff;border-radius:50%;border:1px solid hsla(0,0%,50%,.5);position:absolute;top:0;left:calc(-1*var(--icon-radius));padding:10px;overflow:hidden}body main .experience .wrapper .content .timeline .item .item-header,html main .experience .wrapper .content .timeline .item .item-header{margin-bottom:1.2rem}body main .experience .wrapper .content .timeline .item .item-header .timeframe,html main .experience .wrapper .content .timeline .item .item-header .timeframe{font-size:.9rem;text-transform:uppercase;letter-spacing:.1rem;margin-bottom:.8rem}body main .experience .wrapper .content .timeline .item .item-header .company,html main .experience .wrapper .content .timeline .item .item-header .company{font-size:1.6rem;font-weight:600}body main .experience .wrapper .content .timeline .item .item-header .position,html main .experience .wrapper .content .timeline .item .item-header .position{font-size:1.25rem;font-weight:500}body main .experience .wrapper .content .timeline .item .item-header .position2,html main .experience .wrapper .content .timeline .item .item-header .position2{font-size:1rem;font-weight:500}body main .experience .wrapper .content .timeline .item .description ul,html main .experience .wrapper .content .timeline .item .description ul{padding-left:20px}body main .experience .wrapper .content .timeline .item .description ul li,html main .experience .wrapper .content .timeline .item .description ul li{list-style:square}body main .experience .wrapper .content .timeline .item .description p,html main .experience .wrapper .content .timeline .item .description p{margin-bottom:1rem}body main .projects,html main .projects{background-color:hsla(0,0%,75%,.15)}body main .projects .content,html main .projects .content{display:flex;flex-flow:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:4rem 1rem;border-bottom:1px solid hsla(0,0%,53%,.333)}body main .projects .content:first-child,html main .projects .content:first-child{padding-top:2rem}body main .projects .content:last-child,html main .projects .content:last-child{border-bottom:none;padding-bottom:2rem}body main .projects .content .snapshot-wrapper,html main .projects .content .snapshot-wrapper{position:relative;width:100%;flex-shrink:0;overflow:hidden}body main .projects .content .snapshot-wrapper .snapshot,html main .projects .content .snapshot-wrapper .snapshot{display:flex}body main .projects .content .snapshot-wrapper .snapshot img,html main .projects .content .snapshot-wrapper .snapshot img{transition:.3s}body main .projects .content .snapshot-wrapper:hover .snapshot img,html main .projects .content .snapshot-wrapper:hover .snapshot img{transform:scale(1.15)}body main .projects .content .snapshot-wrapper .menu,html main .projects .content .snapshot-wrapper .menu{position:absolute;inset:0;width:100%;height:100%;background-color:var(--theme-background-color-translucent);opacity:0;transition:.3s;display:flex;flex-flow:column;align-items:stretch;justify-content:center}body main .projects .content .snapshot-wrapper .menu a,html main .projects .content .snapshot-wrapper .menu a{font-size:1.3rem;color:var(--theme-color);margin:.5rem 1rem;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--theme-color);overflow:hidden;height:40%;padding:.5rem;transition:.3s}body main .projects .content .snapshot-wrapper .menu a:hover,html main .projects .content .snapshot-wrapper .menu a:hover{color:var(--theme-strong-color);border-color:var(--theme-strong-color);text-decoration:none}body main .projects .content .snapshot-wrapper .menu:hover,html main .projects .content .snapshot-wrapper .menu:hover{opacity:1}@media(pointer:coarse),(pointer:none){body main .projects .content .snapshot-wrapper .menu,html main .projects .content .snapshot-wrapper .menu{opacity:1;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:static;background-color:unset}body main .projects .content .snapshot-wrapper .menu a,html main .projects .content .snapshot-wrapper .menu a{margin:.75rem 0 0}}body main .projects .content .description,html main .projects .content .description{padding:2rem 0 0;width:100%}body main .projects .content .description .stack,html main .projects .content .description .stack{display:flex;flex-wrap:wrap;margin-left:-1rem}body main .projects .content .description .stack>*,html main .projects .content .description .stack>*{margin:0 0 1rem 1rem}body main .projects .content .description ul,html main .projects .content .description ul{padding-left:20px}body main .projects .content .description ul li,html main .projects .content .description ul li{list-style:square}@media(min-width:768px){body main .projects .content:nth-child(2n),html main .projects .content:nth-child(2n){flex-flow:row-reverse}body main .projects .content .snapshot-wrapper,html main .projects .content .snapshot-wrapper{width:45%}body main .projects .content .description,html main .projects .content .description{padding:0 0 0 1.5rem;width:45%}}@media(min-width:992px){body main .projects .content,html main .projects .content{padding:6rem 2rem}}body .footer,html .footer{display:flex;flex:1 1;padding:2rem 0;background-color:rgba(0,0,0,.1);border-top:1px solid hsla(0,0%,53%,.333);justify-content:center;align-items:center}