*{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;font-family:Source Sans Pro,sans-serif;--red: #c62828;--blue: #1565c0;--purple: #6a1b9a;--black: #252525;--nav-width: 30%;--body-width: 70%}button{cursor:pointer;background-color:transparent}[role=button]{cursor:pointer}#root{width:100vw;height:100vh;overflow-x:hidden;display:grid}#root>div{display:grid}#root .content{grid-template-rows:100%;grid-template-columns:var(--nav-width) var(--body-width);width:inherit}nav{background-color:#f8f8f8;display:grid;grid-template-rows:auto;grid-template-columns:auto;width:var(--nav-width);left:0;top:0;height:100vh;justify-self:end;position:fixed;animation:fadeIn .5s linear}nav .nav-container{grid-area:1/1/span 1/span 1;justify-self:end;align-self:start;margin-top:20vh;display:grid;row-gap:25px;margin-right:45px}nav .nav-container *{justify-self:end}nav .nav-container .nav-home{font-size:30px;font-weight:300;color:#263238}nav .nav-container .nav-design,nav .nav-container .nav-dev,nav .nav-container .nav-about{font-size:26px;color:#263238;position:relative;width:75px}nav .nav-container .nav-design:after,nav .nav-container .nav-dev:after,nav .nav-container .nav-about:after{content:"";position:absolute;width:110%;height:4.5px;top:calc(100% + 5px);left:-5%}nav .nav-container .nav-design:before,nav .nav-container .nav-dev:before,nav .nav-container .nav-about:before{display:none;position:absolute;height:100%;top:50%;transform:translateY(-45%);left:-40%}nav .nav-container .nav-design:before{content:url(/resources/nav-design-active.svg)}nav .nav-container .nav-dev:before{content:url(/resources/nav-dev-active.svg)}nav .nav-container .nav-about:before{content:url(/resources/nav-about-active.svg)}nav .nav-container .active:before{display:initial;animation:spinIn .2s linear}nav .nav-container .socials{display:grid;grid-template-rows:auto;grid-template-columns:repeat(3,20px);column-gap:10px;margin-top:45px}nav .nav-container .socials img{width:20px;height:20px}nav .nav-container .open-resume,nav .nav-container .contact-address{color:#231f20;text-decoration:none;font-size:1.1em;font-weight:100;margin:-10px 0}nav .nav-container .contact-address{margin:0}nav .nav-container a,nav .nav-container .nav-home{position:relative;display:flex;align-items:center}nav .nav-container a:hover:before,nav .nav-container .nav-home:hover:before{height:4px!important}nav .nav-container a:before,nav .nav-container .nav-home:before{transition:all .1s;content:"";display:initial;position:absolute;left:-2.5px;top:calc(100% + 2.5px);width:calc(100% + 5px);height:0px;background-color:gray;z-index:-1}nav .made-by{grid-area:1/1/span 1/span 1;width:fit-content;height:fit-content;justify-self:center;align-self:end;margin-bottom:5px;font-size:14px;color:gray;font-style:italic}.nav-design:after{background-color:var(--red)}.nav-dev:after{background-color:var(--blue)}.nav-about:after{background-color:var(--purple)}.about,.dev,.design{grid-area:1/2/span 1/span 1;justify-self:start;margin-left:45px;align-self:start;margin-top:20vh;display:grid;row-gap:20px;width:70%;margin-bottom:100px;animation-delay:.2s;animation:fadeIn .4s linear}.about p,.dev p,.design p{color:var(--black);font-size:1em;line-height:1.6em}.about h1,.dev h1,.design h1{font-size:2.1em;font-weight:600}.about h2,.dev h2,.design h2{font-weight:700;font-size:1.4em}.about h3,.dev h3,.design h3{font-size:1em;font-weight:700}.about .col-2,.dev .col-2,.design .col-2{display:grid;grid-template-rows:auto;grid-template-columns:50fr 50fr;column-gap:25px;width:80%;row-gap:inherit}.about .col-2 div,.dev .col-2 div,.design .col-2 div{display:grid;row-gap:inherit}.about ul,.dev ul,.design ul{position:relative;left:10px;width:calc(100% - 10px);display:grid;row-gap:10px}.about ul li,.dev ul li,.design ul li{color:var(--black);list-style-type:none;position:relative}.about ul li:after,.dev ul li:after,.design ul li:after{content:"";position:absolute;left:-10px;top:50%;border-radius:100%;height:3px;width:3px;background-color:#3d3d3d}.about .key-contributions,.dev .key-contributions,.design .key-contributions{row-gap:15px}h2,h3{margin-top:10px}.design h1{color:var(--red)}.about h1{color:var(--purple)}.dev h1{color:var(--blue)}.numbered-list{display:grid;grid-template-columns:20px auto;row-gap:20px}.numbered-list .number{font-weight:700}.numbered-list p{display:inline}.nav-design,.nav-dev,.nav-about{transition:all .2s}.nav-design:after,.nav-dev:after,.nav-about:after{transition:all .2s}.nav-design:hover,.nav-dev:hover,.nav-about:hover{color:#fff!important;font-weight:700}.nav-design:hover:after,.nav-dev:hover:after,.nav-about:hover:after{top:50%!important;transform:translateY(-45%);height:120%!important;z-index:-1}.more-examples{font-size:1.2em!important;margin-top:50px;line-height:1.4em!important}.more-examples a{text-decoration:none}.more-examples span{font-weight:700}.video-container{width:100%;height:fit-content}video{box-shadow:1px 1px 5px 1px #00000042;width:inherit;height:auto}.fullscreen:after{content:"";position:fixed;z-index:9;top:0;left:0;width:100vw;height:100vh;background-color:#ffffffe6;animation:fadeIn .2s linear}.video-fullscreen{cursor:zoom-out;position:fixed!important;z-index:10}.video-minimized{cursor:zoom-in}.caption{text-align:center;margin:5px 0 15px;color:#565656!important}.dev .more-examples span{color:var(--blue)}.design .more-examples span{color:var(--red)}.hangForASecond{color:#fff;font-weight:700}.hangForASecond:after{top:50%!important;transform:translateY(-50%);height:120%!important;z-index:-1}.home{justify-self:center;grid-template-rows:auto auto;row-gap:30px;align-self:center;position:relative;animation:fadeIn .4s linear;--size: 125px;--dash-size: 4px}.home>div:first-child{height:calc(var(--size) * 2);display:grid;align-content:center}.home>div:first-child h1,.home>div:first-child h2{font-weight:lighter;text-align:center;position:relative;z-index:2}.home>div:first-child h1{font-size:62px}.home>div:first-child h2{font-size:22px}.home>div:last-child{display:grid;grid-template-columns:repeat(3,70px);column-gap:20px;justify-content:center}.home>div:last-child button{font-size:20px;text-align:center;width:100%;position:relative}.home>div:last-child button:after{content:"";position:absolute;width:100%;height:4px;top:calc(100% + 5px);left:0}.home .circle-animation{position:absolute;opacity:.25;width:calc(var(--size) * 2);height:calc(var(--size) * 2);border-radius:100%;border:transparent 3px dashed;top:0;left:50%;transform:translate(-50%);z-index:1}.home .circle-animation .front,.home .circle-animation .spin{position:absolute;z-index:1;border-radius:100%}.home .circle-animation .front{width:calc(var(--size) * 2 - var(--dash-size) * 2);left:var(--dash-size);top:var(--dash-size);height:calc(var(--size) * 2 - var(--dash-size) * 2);background-color:#fff}.home .circle-animation .spin{width:calc(var(--size) * 2 - 0px);height:calc(var(--size) * 2 - 0px);background-color:transparent;border:dashed white var(--dash-size);animation:rotate 20s infinite linear}.home .circle-animation .back{position:absolute;display:grid;grid-template-columns:auto auto;width:calc(var(--size) * 2);height:calc(var(--size) * 2)}.home .circle-animation .back .left,.home .circle-animation .back .right{width:var(--size);height:calc(var(--size) * 2)}.home .circle-animation .back .right{border-bottom-right-radius:calc(var(--size) * 2);border-top-right-radius:calc(var(--size) * 2);background-color:var(--blue)}.home .circle-animation .back .left{border-bottom-left-radius:calc(var(--size) * 2);border-top-left-radius:calc(var(--size) * 2);background-color:var(--red)}.peace:after{opacity:0;content:url(/resources/peace.svg);position:fixed;left:50%;top:50%;width:200px;height:auto;transform:translate(-50%,-50%);animation:peace 1.25s linear;animation-delay:.3s}@keyframes peace{20%{opacity:1}80%{opacity:1}to{opacity:0}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOutHome{animation:fadeOut .15s linear;animation-fill-mode:forwards;animation-delay:.2s}.fadeOutLong{animation:fadeOut .3s linear;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomInTwitch{0%{transform:scale(0) rotate(0)}50%{transform:scale(.5) rotate(10deg)}80%{transform:scale(.8) rotate(-10deg)}to{transform:scale(1)}}@keyframes spinAway{0%{opacity:1;transform:translateY(-45%) rotate(0) scale(1)}to{opacity:0;transform:translateY(-45%) rotate(180deg) scale(0)}}@keyframes spinIn{0%{opacity:0;transform:translateY(-45%) rotate(180deg) scale(0)}to{opacity:1;transform:translateY(-45%) rotate(360deg) scale(1)}}.pseudoSpinAway:before{animation-fill-mode:forwards;animation:spinAway .15s linear forwards!important}.psuedoSpinIn:before{animation:spinIn .15s linear}@keyframes hangForASecond{0%{opacity:1}80%{opacity:1}to{opacity:0}}.hangForASecond{animation:hangForASecond 1s linear}@media only screen and (max-width: 1024px){#root .content{grid-template-columns:100%}.burger-menu{position:fixed;top:25px;left:25px;display:grid;width:50px;height:40px;align-content:space-between;z-index:10}.burger-menu div{background-color:#3e3e3e;width:100%;height:5px;border-radius:100px}.burger-open{grid-template-rows:100%}.burger-open div{transition:transform .2s;grid-area:1/1/span 1/span 1;align-self:center}.burger-open div:first-child{transform:rotate(45deg)}.burger-open div:nth-of-type(2){display:none}.burger-open div:last-child{transform:rotate(-45deg)}nav{width:90vw;left:-100%;transition:all .2s;z-index:9}nav .nav-container{margin-top:10vh;row-gap:30px}nav .nav-container .nav-design:after,nav .nav-container .nav-dev:after,nav .nav-container .nav-about:after{height:5px}nav .nav-container .nav-design:before,nav .nav-container .nav-dev:before,nav .nav-container .nav-about:before{left:-25px}nav .nav-container .socials{margin-top:60px;grid-template-columns:repeat(3,40px);grid-template-rows:40px;gap:15px}nav .nav-container .socials img{width:100%;height:auto}nav .nav-container .open-resume,nav .nav-container .contact-address{font-size:20px;margin:0}.nav-open nav{left:0}.about,.dev,.design{grid-area:1/1/span 1/span 1;width:90%;justify-self:center;margin-left:0;margin-top:15vh;row-gap:20px}.about h1,.dev h1,.design h1{font-size:10vw}.about p,.about ul>li,.dev p,.dev ul>li,.design p,.design ul>li{font-size:4.5vw;line-height:1.6em}.about h2,.dev h2,.design h2{font-size:7vw}.about h3,.dev h3,.design h3{font-size:5vw}.about ul,.dev ul,.design ul{left:0}.about ul li,.dev ul li,.design ul li{row-gap:20px;margin-left:20px}.about ul li:after,.dev ul li:after,.design ul li:after{left:-20px;height:7.5px;width:7.5px}.about .col-2,.dev .col-2,.design .col-2{grid-template-rows:auto auto;grid-template-columns:auto}.about .key-contributions,.dev .key-contributions,.design .key-contributions{row-gap:20px}.about .more-examples,.dev .more-examples,.design .more-examples{margin-top:5vh;font-size:5vw!important;line-height:1.6em!important}.about .numbered-list,.dev .numbered-list,.design .numbered-list{column-gap:20px}}.quickpaw{background-image:url(/resources/quickpaw/background.png);background-size:100vw 100vh;background-attachment:fixed}.quickpaw body{padding:30px 0;display:grid;place-content:center;row-gap:50px}.quickpaw body img{width:100%;max-width:95vw}