*{box-sizing:border-box}html{scroll-padding-top:100px}body{font-family:Kanit,sans-serif;font-family:Fraunces,serif;width:100%;margin:0;background-color:#ebebeb;scroll-behavior:smooth}a{display:block}h2{font-size:60px;margin:0;color:#367095}h3{text-align:justify;font-family:Kanit;font-weight:500;font-size:28px;color:#636364;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0}h4{color:white;font-size:22px}h4,h5{font-weight:400}h5{font-size:28px;color:#636364;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:1em;margin-block-end:1em}h6{font-family:Kanit;font-weight:400;margin-bottom:10px;color:#367095;-webkit-margin-before:.5em;margin-block-start:.5em;-webkit-margin-after:.5em;margin-block-end:.5em;line-height:1.25em}h6,p{font-size:18px}p{font-weight:300;margin:0 0 10px;color:black}ul{margin-top:0}li{font-size:18px;font-weight:300;margin:0 0 5px -20px;color:black}.section-start{margin:150px 5% 50px}.bold{color:#367095;font-weight:500}#aboutBack{display:block;height:150%;background-color:rgba(255,255,255,.5)}#aboutSection{margin:0 5%;display:flex;border-radius:10px;height:50vh;min-height:600px;align-items:center;justify-content:space-between}.aboutBox{background-image:url(/images/pencils.jpeg);background-position:100%;background-size:cover;background-repeat:no-repeat;background-color:rgba(255,255,255,.5);height:500px;width:500px;border-radius:10px;position:relative}#aboutCopy{width:320px;flex-direction:column;align-items:flex-start;z-index:1;position:absolute;left:73%;top:60px;background-color:rgba(255,255,255,.9);padding:20px;border-radius:10px}#aboutCopy,#aboutSkill{display:flex;transition:.3s}#aboutSkill{justify-content:flex-end;text-align:right}#vertScroll{height:375px;width:350px;overflow-y:scroll}#vertScroll::-webkit-scrollbar{display:none}#scrollHead{display:flex;align-items:center;justify-content:flex-end}.scrollIcon{height:20px;margin-right:8px}#aboutGrid{display:grid;grid-template-rows:1;grid-template-columns:repeat(4,1fr);grid-template-areas:"user content project toolbox";grid-gap:50px;margin:0 5% 50px}.aboutGridCopy{margin-bottom:60px;transition:.3s}#connSection{margin:0;height:35vh;min-height:500px;display:flex;align-items:center;justify-content:space-between}#quote{display:flex;flex-direction:column;justify-content:center;text-align:right;margin:0 5%;height:170px}.blockquote{font-size:44px;font-weight:400;color:#367095}.author{font-size:32px;font-style:italic;font-weight:300;color:#367095;margin-right:50px}#connCopy{display:flex;width:320px;flex-direction:column;align-items:flex-start;margin-left:5%}#links{margin-right:5%;text-align:right;transition:.3s}#links a:visited,a:link{cursor:pointer;text-decoration:none;color:#636364}#links h5:hover{cursor:pointer;text-decoration:none;color:#367095;transition:.3s}.uxuiHeading{margin:0 5%}.uxuiScroll{display:flex;overflow-x:scroll;padding-top:20px}.uxuiScroll::-webkit-scrollbar{display:none}.start{padding-left:5%}.end{padding-right:5%}.projectCard{min-width:450px;margin:0 60px 60px 0}.projectImage{width:100%;height:450px;border-radius:10px;object-fit:cover;transition:.3s}img:hover{transform:scale(1.01)}.footer{background-color:#6363648c;display:flex;height:75px}@media only screen and (max-width:1150px){#aboutSection{flex-wrap:wrap;display:block;height:auto;padding-top:50px}#aboutSkill{margin-top:70px}#aboutGrid{grid-template-columns:repeat(2,1fr);margin-top:100px;grid-template-areas:"user content" "project toolbox"}}@media only screen and (max-width:800px){#navigation{width:100%}.icons{display:none}#categoryGrid{grid-template-rows:repeat(5,1fr);grid-template-columns:1fr;grid-template-areas:"final" "education" "garden" "travel" "health"}.case-study-card img{height:400px}.aboutBox{height:300px;width:300px}#aboutCopy{top:50px}#quote{margin-bottom:50px}#connSection{display:block;height:auto}#links{margin-top:70px}}@media only screen and (max-width:600px){#navigation{width:100%}#navigation p{font-size:14px}#headline{border-radius:10px;background-color:rgba(255,255,255,.9);position:absolute;right:-71px;top:30%;z-index:1;padding:20px;box-shadow:0 0 10px rgba(99,99,99,.1)}#headline p{max-width:225px;font-size:18px;font-weight:500;color:#636364}#headline h2{font-size:32px}#aboutGrid{grid-template-columns:1fr;margin-top:100px;grid-template-areas:"user" "content" "project" "toolbox"}#aboutBox{height:auto;width:200px;position:relative}#aboutCopy{width:200px;left:10%;top:240px}#vertScroll{height:375px;width:200px;overflow-y:scroll}#vertScroll::-webkit-scrollbar{display:none}#scrollHead{display:flex;align-items:center;justify-content:flex-end}.scrollIcon{height:20px;margin-right:8px}#aboutSkill{margin-top:500px}}.case-studies-homepage{margin:0 auto;width:90vw;display:flex;flex-wrap:wrap}.case-study-card{padding:0 30px;flex-grow:1;flex-shrink:0;flex-basis:calc(50vw - 10% - 60px)}.case-study-card.case-study-card-primary{flex-basis:calc(90vw - 60px)}.case-study-card a:link,.case-study-card a:visited{cursor:pointer;text-decoration:none}.case-study-card img{border-radius:10px;object-fit:cover;width:100%;height:500px;transition:.3s;margin-bottom:-10px}.case-study-card img:hover{transform:scale(1.02)}.case-study-card h5{-webkit-margin-before:.85em;margin-block-start:.85em;-webkit-margin-after:0;margin-block-end:0}button{background-color:rgba(99,99,100,.4862745098);border:none;border-radius:10px;width:-moz-fit-content;width:fit-content;max-height:-moz-fit-content;max-height:fit-content;transition:.3s;margin-bottom:20px;margin-right:20px}button h6{color:#fff;font-size:14px;padding:0 6px}button:hover{background-color:#636364}.blue{background-color:rgba(62,128,170,.7450980392)}.blue:hover{background-color:#3e80aa}.buttons{display:flex}.section-hero{margin:0;display:flex;position:relative;min-height:500px;height:70vh;transition:.3s}.section-hero video{mix-blend-mode:multiply;object-fit:cover;position:absolute;top:0;left:0;height:100%;width:100%}.section-hero .hero-content{position:absolute;z-index:2;background:#fff;border-radius:10px;background-color:hsla(0,0%,100%,.9);right:400px;top:160px;padding:50px;box-shadow:0 0 10px rgba(99,99,99,.1);transition:.3s}.section-hero .hero-content p{font-size:18px;font-weight:500;margin:0;color:#636364}.section-hero .cta-image,.section-hero .cta-link,.section-hero .hero-cta-wrapper,.section-hero .hero-video-bg{background-position:50%;background-repeat:no-repeat;background-size:cover;align-items:center;display:flex;position:relative;justify-content:flex-start;transition:.3s}.section-hero .hero-video-bg{flex:0 0 70%;background-color:#a3a8bf}.section-hero .hero-cta-wrapper{flex:0 0 30%;display:flex;flex-direction:column}.section-hero .hero-cta-wrapper .cta-image{flex:1 0 200px;width:100%;background-image:url(/images/screens.jpg);background-color:rgba(54,112,149,.6078431373);background-blend-mode:multiply}.section-hero .hero-cta-wrapper .cta-link{flex:0 0 75px;width:100%;height:75px;background-image:linear-gradient(70deg,#367095,#a3a8bf);justify-content:flex-start;cursor:pointer;transition:.3s;color:#fff;font-size:1.7rem;padding:0 1rem}.section-hero .hero-cta-wrapper .cta-link svg{height:2rem;margin:0 1rem;fill:#fff}.nav-wrapper{display:flex;position:fixed;top:0;width:100%;flex-direction:row;margin:0;height:75px;z-index:3;background-color:hsla(0,0%,100%,.9);align-items:center;padding-right:15px;justify-content:space-between;box-shadow:0 0 10px rgba(99,99,99,.1)}.nav-wrapper #navigation{display:flex;width:75%;align-items:center;justify-content:space-evenly}.nav-wrapper #navigation p{font-family:Kanit,sans-serif;font-weight:500;color:#636364;transition:.3s}.nav-wrapper #navigation a:visited,.nav-wrapper a:link{cursor:pointer;text-decoration:none;color:#636364}.nav-wrapper #navigation p:hover{cursor:pointer;text-decoration:none;color:#367095}.nav-wrapper .icons{display:flex;justify-content:flex-end;align-items:center;width:25%;margin-right:5%}.nav-wrapper .icons img{margin:15px;width:30px;cursor:pointer;opacity:.5;transition:.3s}.nav-wrapper .icons img:hover{opacity:.9}.nav-wrapper #upToTop,.nav-wrapper .carrot{width:30px;cursor:pointer}.nav-wrapper #upToTop{position:fixed;z-index:99;bottom:20px;right:20px;opacity:.5;transition:.3s}.nav-wrapper #upToTop:hover{opacity:.9}