:root{--dark-gray:#20282f;--light-blue:#83aadb;--react-bg:#222;--react-color:#32bbf0;--firebase-bg:#32bbf0;--firebase-front:#ffcb2c;--firebase-mid:#f5820c;--firebase-back:#ffa50d;--three-bg:#ffb81d;--smooth-transition:cubic-bezier(.25, 0, .1, 1);--ratio:calc(768 / 150)}@media screen and (width>=992px){:root{--ratio:calc(992 / 150)}}@media screen and (width>=1200px){:root{--ratio:calc(1200 / 150);--overlay-width:min(1440px, calc(100vw - 30px))}}html,body{scroll-behavior:smooth;font-size:16px}@font-face{font-family:icomoon;src:url(icomoon.b6da7bc0.eot);src:url(icomoon.b6da7bc0.eot#iefix)format("embedded-opentype"),url(icomoon.79a3f101.ttf)format("truetype"),url(icomoon.32375c64.woff)format("woff"),url(icomoon.e6e404bd.svg#icomoon)format("svg");font-weight:400;font-style:normal}[class^=icon-],[class*=\ icon-]{speak:none;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;line-height:1;font-family:icomoon!important}.icon-chevron-thin-down:before{content:""}.icon-cross:before{content:""}.icon-new-tab:before{content:""}.icon-mail4:before{content:""}.icon-github:before{content:""}.icon-linkedin:before{content:""}.icon-stackoverflow:before{content:""}*{box-sizing:border-box;-webkit-overflow-scrolling:touch}body{color:var(--dark-gray);font-family:Open Sans,sans-serif}img{border:none!important;border-radius:0!important;padding:0!important;display:block!important}a{color:var(--dark-gray);text-decoration:underline;transition:all .15s cubic-bezier(.25,0,.1,1);&:hover{color:#fff;background:var(--dark-gray)}}.header-link{font-size:1.5rem;& .icon-new-tab{font-size:.85em}}p{line-height:1.6}section{margin-top:50px;padding:50px 0}footer{padding:50px 0}#main{width:100%;height:100%;position:relative;overflow:hidden}#nav{z-index:1000;background:#fff;width:100%;font-family:Inconsolata,monospace;position:fixed;top:0;left:0;& a{font-size:18px;line-height:40px}& #to-home{float:left}& #right-group{float:right}& .nav-button{display:inline-block}}@keyframes arrow{0%{bottom:25px}to{bottom:50px}}#hero{background:var(--dark-gray);color:#fff;width:100vw;height:100vh;min-height:560px;position:relative;& #hero-floater{color:#fff;white-space:nowrap;text-align:center;display:inline-block;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);@media screen and (width<=767px){font-size:40px}& .myname{margin-bottom:50px;font-family:Inconsolata,monospace;font-size:60px;@media screen and (width<=991px){font-size:36px}}& .myskills{text-transform:uppercase;font-size:40px;@media screen and (width<=991px){font-size:24px}@media screen and (width<=767px){line-height:2}}}& .hero-arrow{color:#fff;font-size:4rem;text-decoration:none;animation-name:arrow;animation-duration:1.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;position:absolute;bottom:25px;left:50%;transform:translate(-50%,-50%)}}#projects{& .project-thumb-outline{cursor:pointer;background:var(--dark-gray);& img{transition:.3s transform var(--smooth-transition)}&:hover img{transform:scale(.95)}}& .project-summary{margin-top:100px;margin-bottom:100px;&:last-child{margin-bottom:0}}& .h5-link{transition:.15s all var(--smooth-transition);text-decoration:underline;display:inline-block;&:hover{color:#fff;background:var(--dark-gray)}}& h3,& li,& ul,& h5{margin:0;padding:0}& h3,& ul,& h5{margin-bottom:20px}& h3{border-bottom:2px solid #0000;font-size:32px;text-decoration:none;transition:all .15s cubic-bezier(.25,0,.1,1);display:inline-block;& a{&:hover{text-decoration:none}}&:hover{background:var(--dark-gray);color:#fff;text-decoration:none}}& li,& ul{opacity:.9;font-family:Inconsolata,monospace;text-decoration:none;list-style:none}& .activate-overlay{cursor:pointer}& h5.activate-overlay:hover{text-decoration:underline}& .project-overlay{z-index:10;opacity:0;pointer-events:none;background:#fff;height:calc(100vh - 100px);margin:0 auto;padding:50px 0;transition:all .6s cubic-bezier(.25,0,.1,1);position:fixed;top:50%;left:50%;overflow:hidden scroll;transform:translate(-50%,calc(40px - 50%));@media screen and (width>=1200px){& .container{width:var(--overlay-width)}}& .img-box{text-align:center;margin:75px 0;& img{border:1px solid #ccc!important}& .caption{opacity:.75;color:var(--dark-gray);font-size:12px;font:"Inconsolata", monospace}}&.active{opacity:1;pointer-events:auto;transform:translate(-50%,calc(20px - 50%))}& h1{margin:20px 0}& h5{margin:5px 0}& p{margin:25px 0;font-size:18px}& h1,& h4{text-align:center}& ul.apod-improvements,& .apod-improvements li{opacity:.9;font-size:16px;list-style-type:square}@media screen and (width<=767px){width:100vw;height:calc(100vh - 40px);padding:20px 0 0;top:40px;left:0;transform:translateY(20px);&.active{transform:translateY(0)}}}}.close-overlay{width:40px;height:40px;transition:.6s all var(--smooth-transition);opacity:0;pointer-events:none;cursor:pointer;background:#fff;border:1px solid #000000bf;border-radius:50%;position:absolute;top:60px;left:0;transform:translate(-50%);@media screen and (width>=1200px){left:calc((1170px - var(--overlay-width)) / 2)}& span{color:#000000bf;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay-active &{opacity:1;pointer-events:auto;top:50px}}#overlay-slip{z-index:9;opacity:0;pointer-events:none;background:#000000bf;width:100vw;height:100vh;transition:opacity .6s cubic-bezier(.25,0,.1,1) .15s;position:fixed;top:0;left:0;.overlay-active &{opacity:1;pointer-events:auto;transition-delay:0s}}#clients{vertical-align:center;& .client-image{width:75%;display:inline-block!important}& .col-md-4{text-align:center}}#skills{font-size:18px;& h3{margin-top:0;font-size:32px}& ul,& li{margin:0;padding:0;list-style:none}& ul{margin-bottom:50px}@media screen and (width>=992px){& .col-md-4{position:relative}& .skills-block{display:inline-block;position:relative;left:50%;transform:translate(-50%)}}}#obsessions{& #gadget-wrapper{display:flex;& .gadget-box{flex-grow:1;position:relative;overflow:hidden;&:hover,html.touchevents &{& .gadget-name,& .gadget-description{opacity:1;transform:translate(-50%,-50%)}}}& *{transition:all .3s cubic-bezier(.215,.61,.355,1)}@media screen and (width<=767px){flex-wrap:wrap;& .gadget-box{width:100%}}& .gadget-name,& .gadget-description{color:#fff;z-index:10;text-align:center;pointer-events:none;opacity:0;width:20vw;font-family:Inconsolata,monospace;position:absolute;left:50%;transform:translate(-50%,-45%);@media screen and (width<=767px){width:60vw}@media screen and (width>=768px){width:calc(40px * var(--ratio))}}& .gadget-name{font-size:calc(8px * var(--ratio));top:13%;@media screen and (width<=767px){font-size:12vw}@media screen and (width>=768px){font-size:calc(8px * var(--ratio))}}& .gadget-description{font-size:calc(3px * var(--ratio));top:87%;@media screen and (width<=767px){font-size:3.6vw}@media screen and (width>=768px){font-size:calc(2.4px * var(--ratio))}}}}#react-box{background:var(--react-bg);width:100%;padding-bottom:100%;position:relative;& #dot,& #c1,& #c2,& #c3{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(0)}& #dot{background:var(--react-color);border-radius:50%;@media screen and (width<=767px){width:18.3vw;height:18.3vw}@media screen and (width>=768px){width:calc(12.3px * var(--ratio));height:calc(12.3px * var(--ratio))}}& #c1,& #c2,& #c3{box-sizing:content-box;border-radius:50%;@media screen and (width<=767px){border:4.5vw solid var(--react-color);width:18vw;height:18vw}@media screen and (width>=768px){width:calc(12px * var(--ratio));height:calc(12px * var(--ratio));border:calc(3px * var(--ratio)) solid var(--react-color)}}& #c2{transform:translate(-50%,-50%)rotate(60deg)}& #c3{transform:translate(-50%,-50%)rotate(-60deg)}&:hover,html.touchevents &{& #c1,& #c2,& #c3{@media screen and (width<=767px){border-width:1.5vw;width:36vw;height:15vw}@media screen and (width>=768px){width:calc(24px * var(--ratio));height:calc(10px * var(--ratio));border-width:calc(1px * var(--ratio))}}& #dot{@media screen and (width<=767px){width:9vw;height:9vw}@media screen and (width>=768px){width:calc(6px * var(--ratio));height:calc(6px * var(--ratio))}}}}#firebase-box{background:var(--firebase-bg);width:100%;padding-bottom:100%;position:relative;& #c{transform:translate(-50%, calc(8px * var(--ratio)));position:absolute;top:50%;left:50%;@media screen and (width<=767px){transform:translate(-50%,13.5vw)}@media screen and (width>=768px){transform:translate(-50%, calc(9px * var(--ratio)))}}& #tri1,& #tri2,& #tri3,& #tri4,& #tri5{position:absolute;bottom:0;left:50%;transform:translate(-50%)}& #tri1{width:0;height:0;@media screen and (width<=767px){border-bottom:27vw solid var(--firebase-front);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-bottom:calc(18px * var(--ratio)) solid var(--firebase-front);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}&:hover #tri1,html.touchevents & #tri1{width:0;height:0;@media screen and (width<=767px){border-bottom:24vw solid var(--firebase-front);border-left:25.5vw solid #0000;border-right:4.5vw solid #0000}@media screen and (width>=768px){border-bottom:calc(16px * var(--ratio)) solid var(--firebase-front);border-left:calc(17px * var(--ratio)) solid transparent;border-right:calc(3px * var(--ratio)) solid transparent}}& #tri5{width:0;height:0;transform:translate(-50%,99%);@media screen and (width<=767px){border-top:0px solid var(--firebase-front);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-top:0px solid var(--firebase-front);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}&:hover #tri5,html.touchevents & #tri5{width:0;height:0;transform:translate(-50%,99%);@media screen and (width<=767px){border-top:9vw solid var(--firebase-front);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-top:calc(6px * var(--ratio)) solid var(--firebase-front);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}& #tri2{width:0;height:0;@media screen and (width<=767px){border-bottom:27vw solid var(--firebase-back);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-bottom:calc(18px * var(--ratio)) solid var(--firebase-back);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}& #tri3{width:0;height:0;@media screen and (width<=767px){border-bottom:27vw solid var(--firebase-back);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-bottom:calc(18px * var(--ratio)) solid var(--firebase-back);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}&:hover #tri3,html.touchevents & #tri3{@media screen and (width<=767px){border-bottom:33vw solid var(--firebase-back);border-left:4.5vw solid #0000;border-right:25.5vw solid #0000}@media screen and (width>=768px){border-bottom:calc(22px * var(--ratio)) solid var(--firebase-back);border-left:calc(3px * var(--ratio)) solid transparent;border-right:calc(17px * var(--ratio)) solid transparent}}& #tri4{width:0;height:0;@media screen and (width<=767px){border-bottom:27vw solid var(--firebase-mid);border-left:15vw solid #0000;border-right:15vw solid #0000}@media screen and (width>=768px){border-bottom:calc(18px * var(--ratio)) solid var(--firebase-mid);border-left:calc(10px * var(--ratio)) solid transparent;border-right:calc(10px * var(--ratio)) solid transparent}}&:hover #tri4,html.touchevents & #tri4{@media screen and (width<=767px){border-bottom:22.5vw solid var(--firebase-mid);border-left:12.45vw solid #0000;border-right:15.55vw solid #0000}@media screen and (width>=768px){border-bottom:calc(15px * var(--ratio)) solid var(--firebase-mid);border-left:calc(8.3px * var(--ratio)) solid transparent;border-right:calc(17.5px * 2 / 3 * var(--ratio)) solid transparent}}}#three-box{background:var(--three-bg);width:100%;padding-bottom:100%;position:relative;& #cx{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);@media screen and (width<=767px){perspective:300vw;width:27vw;height:27vw}@media screen and (width>=768px){width:calc(18px * var(--ratio));height:calc(18px * var(--ratio));perspective:calc(200px * var(--ratio))}}& #cube{width:100%;height:100%;transform-style:preserve-3d;position:relative;@media screen and (width<=767px){transform:translateZ(-13.5vw)rotateX(0)rotateY(0)rotate(90deg)}@media screen and (width>=768px){transform:translateZ(calc(-9px * var(--ratio))) rotateX(0deg) rotateY(0deg) rotateZ(90deg)}}& #cube .face{margin:0;display:block;position:absolute;@media screen and (width<=767px){width:27vw;height:27vw}@media screen and (width>=768px){width:calc(18px * var(--ratio));height:calc(18px * var(--ratio))}}& #one{background:#666;@media screen and (width<=767px){transform:rotateX(90deg)translateZ(13.45vw)}@media screen and (width>=768px){transform:rotateX(90deg) translateZ(calc(13.45px * 2 / 3 * var(--ratio)))}}& #two{background:#999;@media screen and (width<=767px){transform:rotateY(90deg)translateZ(13.45vw)}@media screen and (width>=768px){transform:rotateY(90deg) translateZ(calc(13.45px * 2 / 3 * var(--ratio)))}}& #three{background:#ddd;@media screen and (width<=767px){transform:rotateY(0)translateZ(13.45vw)}@media screen and (width>=768px){transform:rotateY(0deg) translateZ(calc(13.45px * 2 / 3 * var(--ratio)))}}&:hover #cube,html.touchevents & #cube{@media screen and (width<=767px){transform:translateZ(-13.5vw)rotateX(67.5deg)rotateY(0)rotate(135deg)}@media screen and (width>=768px){transform:translateZ(calc(-9px * var(--ratio))) rotateX(67.5deg) rotateY(0deg) rotateZ(135deg)}}}#about{background:var(--dark-gray);color:#fff;text-align:center;& a{color:#fff;text-decoration:underline}& a:hover{color:var(--dark-gray);background:#fff}& p{font-size:18px}& #about-me{font-weight:300}& img{filter:grayscale();margin-bottom:50px}& #link-contact{& div{margin:10px;& a{font-size:18px}}}& #link-icons{white-space:nowrap;text-align:center;font-size:40px;& a{margin:0 5px;padding:0 5px;text-decoration:none}& a:hover{text-decoration:none}}}#portrait,.thumbnail{width:100%}.divider-header{text-align:center;width:100%;margin:0 0 50px;& h1{margin:0;padding:0;font-family:Roboto Slab,serif;font-size:44px}}
/*# sourceMappingURL=portfolio.4494f3a2.css.map */