*,*:before,*:after{box-sizing:border-box}:root{--ff-primary: "Lora", serif;--ff-secondary: "Roboto Slab", serif;--fw-reg: 400;--fw-bold: 700;--clr-light: #FFFFFB;--clr-dark: #303030;--clr-accent: #5B5F97;--fs-h1: 3rem;--fs-h2: 2.25rem;--fs-h3: 1.25rem;--fs-body: 1rem;--bs: .25em .25em .75em rgba(0,0,0,.25), .125em .125em .25em rgba(0,0,0,.15);--modal-duration: 1s;--transition-speed: .3s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes zoomInShopify{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes seeSaw{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@media (min-width: 800px){:root{--fs-h1: 4.5rem;--fs-h2: 3.75rem;--fs-h3: 1.5rem;--fs-body: 1.125rem}}a{color:var(--clr-accent);font-weight:700;transition:color var(--transition-speed) ease,transform var(--transition-speed) ease;position:relative}a:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background-color:var(--clr-accent);transition:width var(--transition-speed) ease}a:hover:after{width:100%}a:hover{transform:translateY(-1px)}html{scroll-behavior:smooth}body{background:var(--clr-light);color:var(--clr-dark);margin:0;font-family:var(--ff-primary);font-size:var(--fs-body);line-height:1.6}section{padding:3em 2em;animation:fadeIn .8s ease-out}img{display:block;max-width:100%;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}img:hover{transform:scale(1.02)}strong{font-weight:var(--fw-bold)}hr{width:100%;color:gray}:focus{outline:3px solid var(--clr-accent);outline-offset:3px}h1,h2,h3{line-height:1;margin:0;animation:fadeInUp .6s ease-out}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}.btn{display:inline-block;padding:.5em 2.5em;background:var(--clr-accent);color:#fff;text-decoration:none;cursor:pointer;font-size:.8rem;text-transform:uppercase;letter-spacing:2px;font-weight:var(--fw-bold);transition:all var(--transition-speed) ease;font-size:1rem;position:relative;overflow:hidden;box-shadow:0 2px 5px #5b5f974d}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.btn:hover:before{width:300px;height:300px}.btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #5b5f9780}.btn:active{transform:translateY(-1px);box-shadow:0 3px 10px #5b5f9766}.section__title{margin-bottom:.25em}.section__title--intro{font-weight:var(--fw-reg)}.section__title--intro strong{display:block}.section__subtitle{margin:0;font-size:var(--fs-h3);color:#fff}.section__subtitle--about,.section__subtitle--intro{background:var(--clr-accent);padding:.25em 1em;font-family:var(--ff-secondary);margin-bottom:1em;animation:slideInLeft .8s ease-out .3s both}.section__subtitle--work{color:var(--clr-accent);font-weight:var(--fw-bold);margin-bottom:2rem}.intro{position:relative;animation:fadeIn 1s ease-out}.intro__img{box-shadow:var(--bs);z-index:-10;animation:scaleIn .8s ease-out .2s both;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.intro__img:hover{transform:scale(1.05) rotate(1deg);box-shadow:.5em .5em 1.5em #00000059,.25em .25em .5em #0003}.section__subtitle--intro{display:inline-block}@media (min-width:600px){.intro{display:grid;width:min-content;margin:0 auto;grid-column-gap:1em;grid-template-areas:"img title" "img subtitle";grid-template-columns:min-content max-content}.intro__img{grid-area:img;min-width:250px;position:relative;z-index:2}.section__subtitle--intro{align-self:start;grid-column:-1/1;grid-row:2;text-align:right;position:relative;left:-1.5em;width:calc(100% + 1.5em)}}.my-services{background-color:var(--clr-dark);background-image:url(https://maya-jade.github.io/img/services-bg.jpg);background-size:cover;color:var(--clr-light);text-align:center}.section__title--services{color:var(--clr-accent);position:relative}.section__title--services:after{content:"";display:block;width:2em;height:1px;margin:.5em auto 1em;background:var(--clr-light);opacity:.25;animation:scaleIn 1s ease-out .5s both;transform-origin:center}.services{display:flex;justify-content:center;gap:2em;flex-wrap:wrap;max-width:1200px;margin:0 auto 2em}.service{flex:1 1 calc(25% - 2em);max-width:300px;text-align:center;opacity:0;transition:transform var(--transition-speed) ease,background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease;padding:1.5em;border-radius:8px;box-shadow:0 4px 12px #0000001a}.services-visible .service{animation:zoomInShopify .6s cubic-bezier(.34,1.56,.64,1) forwards}.services-visible .service:nth-child(1){animation-delay:.1s}.services-visible .service:nth-child(2){animation-delay:.2s}.services-visible .service:nth-child(3){animation-delay:.3s}.services-visible .service:nth-child(4){animation-delay:.4s}.service:hover{transform:translateY(-10px) scale(1.05);background-color:#ffffff0d;box-shadow:0 12px 24px #0003}@media (max-width: 1200px){.service{flex:1 1 calc(33.33% - 2em)}}@media (max-width: 800px){.service{flex:1 1 calc(50% - 2em)}}@media (max-width: 500px){.service{flex:1 1 100%}}.about-me{max-width:1000px;margin:0 auto;opacity:0;transition:opacity .6s ease-out}.about-me.animate-in{opacity:1}.about-me.animate-in .section__title--about{animation:slideInFromLeft .8s ease-out forwards}.about-me.animate-in .section__subtitle--about{animation:slideInFromLeft .8s ease-out .2s forwards}.about-me.animate-in .about-me__body{animation:slideInFromLeft .8s ease-out .4s forwards}.about-me.animate-in .about-me__img{animation:slideInFromRight .8s ease-out .4s forwards}.about-me__body p{animation:fadeInUp .8s ease-out both;transition:transform var(--transition-speed) ease}.about-me__body p:nth-child(1){animation-delay:.2s}.about-me__body p:nth-child(2){animation-delay:.3s}.about-me__body p:nth-child(3){animation-delay:.4s}.about-me__body p:hover{transform:translate(5px)}.about-me__img{box-shadow:var(--bs);animation:slideInRight .8s ease-out .3s both;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.about-me__img:hover{transform:scale(1.05) rotate(-1deg);box-shadow:.5em .5em 1.5em #00000059,.25em .25em .5em #0003}@media (min-width:600px){.about-me{display:grid;grid-template-columns:1fr 200px;grid-template-areas:"title img" "subtitle img" "text img";grid-column-gap:2em}.section__title--about{grid-area:title}.section__subtitle--about{grid-column:1/-1;grid-row:2;position:relative;left:-1em;width:calc(100% + 2em);padding-left:1em;padding-right:calc(200px + 4em)}.about-me__img{grid-area:img;position:relative;z-index:2}}.projects-section{opacity:0;transition:opacity .6s ease-out}.projects-section.animate-in{opacity:1}.projects-section.animate-in .section__title--work{animation:slideInFromLeft .8s ease-out forwards}.projects-section.animate-in>p{animation:slideInFromLeft .8s ease-out .2s forwards}.projects-section.animate-in h3{animation:slideInFromLeft .8s ease-out .3s forwards}.projects-section.animate-in .project-list{animation:slideInFromLeft .8s ease-out .4s forwards}.projects-section.animate-in .project-list-header{animation:slideInFromLeft .8s ease-out .5s forwards}#work{background-color:var(--clr-dark);color:var(--clr-light);text-align:center}.footer{background:#111;color:var(--clr-accent);text-align:center;padding:2.5em 0;font-size:var(--fs-h3);animation:fadeIn .8s ease-out}.footerheader{color:#fff;display:block;animation:seeSaw 2s ease-in-out infinite;transform-origin:center center;margin:0 auto;width:fit-content}.footer a{color:inherit;text-decoration:none}.footer__link{font-weight:var(--fw-bold)}.footer__link:hover,.social-list__link:hover{opacity:.7;transform:translateY(-2px)}.footer__link{transition:all var(--transition-speed) ease}.footer__link:hover{text-decoration:underline}.social-list{list-style:none;display:flex;justify-content:center;margin:1em 0 0;padding:0}.social-list__item{margin:0 .5em}.social-list__link{padding:.5em;transition:all var(--transition-speed) ease;display:inline-block}.social-list__link:hover{transform:translateY(-5px) scale(1.2)}.project-list{list-style-type:none;padding-left:0;margin-left:0}.project-list li{animation:fadeInUp .6s ease-out both;transition:transform var(--transition-speed) ease}.project-list li:hover{transform:translate(10px)}.project-list img{margin:auto}.section__title--work{margin-bottom:1em}.project-list-header{margin-top:1em}.case-studies-section{opacity:0;transition:opacity .6s ease-out}.case-studies-section.animate-in{opacity:1}.case-studies-section.animate-in .section__title--work{animation:slideInFromRight .8s ease-out forwards}.case-studies-section.animate-in>p{animation:slideInFromRight .8s ease-out .2s forwards}.case-studies-section.animate-in .project-list{animation:slideInFromRight .8s ease-out .4s forwards}#case-studies{display:flex;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto;text-align:center}#case-studies>*{transition:transform var(--transition-speed) ease}#case-studies>*:hover{transform:scale(1.03)}
