li[data-skill=JavaScript]{background-image:url("../images/logos/js-logo.svg");padding-left:2em}li[data-skill=TypeScript]{background-image:url("../images/logos/typescript-logo.png");background-size:30px 30px;padding-left:2em}li[data-skill=HTML]{background-image:url("../images/logos/html-logo.svg");padding-left:2em}li[data-skill=CSS]{background-image:url("../images/logos/css-logo.svg");background-size:20px 20px;padding-left:2em}li[data-skill=GRAPHQL]{background-image:url("../images/logos/graphql-logo.svg");padding-left:2em}li[data-skill=React]{background-image:url("../images/logos/react-logo.svg");padding-left:2em}li[data-skill="Next.js"]{background-image:url("../images/logos/nextjs-icon-dark-background.svg");background-size:20px 20px;padding-left:2em}li[data-skill="React Testing Library"]{background-image:url("../images/logos/react-testing-library.png");background-size:30px 30px;padding-left:2em}li[data-skill=Redux]{background-image:url("../images/logos/redux-logo.svg");padding-left:2em}li[data-skill=Node]{background-image:url("../images/logos/nodejs-logo.svg");background-size:25px 25px;padding-left:2em}li[data-skill=Express]{padding-left:2em}li[data-skill=MySQL]{background-image:url("../images/logos/mysql-logo.png");background-size:30px 20px;padding-left:2em}li[data-skill=MongoDB]{padding-left:2em}li[data-skill=Mongoose]{padding-left:2em}li[data-skill=Jest]{background-image:url("../images/logos/jest-logo.svg");background-size:30px 30px;padding-left:2em}li[data-skill=Git]{background-image:url("../images/logos/git-logo.svg");background-size:40px 40px;padding-left:2em}li[data-skill=ML],li[data-skill=AWS],li[data-skill=FE],li[data-skill=BE]{padding-left:2em}@keyframes moveDown{0%{transform:translateY(-800px)}100%{transform:translateY(0)}}@keyframes moveLeft{0%{transform:translateX(-1000px);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes moveRight{0%{transform:translateX(1000px);opacity:0}100%{transform:translateX(0);opacity:1}}header{height:400px;margin-top:1em;width:100%;background-color:#d8275f;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}header .logo{font-family:Futura,"Trebuchet MS",Arial,sans-serif;width:6rem;height:6rem;border:1px solid #fff;position:relative;animation-name:moveDown;animation-duration:1.2s;animation-timing-function:ease-out}header .logo .jm{position:absolute;bottom:0;right:0;font-size:2em}header .header-text{margin:1em 1em 0 1em;text-align:center}header .header-text .header-name{animation-name:moveLeft;animation-duration:1.2s;animation-timing-function:ease-in}header .header-text .header-tagline{animation-name:moveRight;animation-duration:1.2s;animation-timing-function:ease-in}.footer-container{position:relative}.footer-container footer{position:absolute;left:0;bottom:0;width:100%}.footer-container footer .contact-conainer .gmail{background-position:left center;background-repeat:no-repeat;margin:1em 0;background-image:url("../images/logos/gmail.svg")}.footer-container footer .contact-conainer .linkedin{background-position:left center;background-repeat:no-repeat;margin:1em 0;background-image:url("../images/logos/linkedin.svg")}.footer-container footer .contact-conainer .github{background-position:left center;background-repeat:no-repeat;margin:1em 0;background-image:url("../images/logos/github.svg")}@media only screen and (max-width: 400px){.nav-header-container{display:flex;flex-wrap:wrap}.nav-header-container header{order:1;margin:0}.nav-header-container nav{order:2;font-size:1.2em;display:flex;justify-content:center;margin:2em auto 0 auto}.nav-header-container nav .domain-header{display:none}.nav-header-container nav .menu{display:flex}.nav-header-container nav .menu a{display:block;margin:0 1em}.main-content{width:90%;margin:0 auto}.about-me{margin-top:2em;display:flex;flex-direction:column;align-items:center}.about-me .story{margin:0 1.5em}.skills{display:flex;flex-wrap:wrap;justify-content:center}.skills h2{width:100%}.projects{margin-top:2em}.projects .project-container{width:80%;margin:4em auto 0 auto}.projects .project-container img{width:100%}.footer-container{margin-top:20vh}.footer-container .gmail,.footer-container .github,.footer-container .linkedin{height:1.4em;width:1.4em}.footer-container .contact-header{font-size:1.2em;text-align:center}.footer-container .contact-conainer{display:flex;justify-content:space-around}}@media only screen and (min-width: 401px)and (max-width: 960px){.about-me{display:flex;margin:2em 2em}.about-me .about-me-header{width:30%}.about-me .story{width:70%;margin-left:1em}.skills{display:flex;flex-direction:column;justify-content:center;margin:0 2em}.skills h2{width:100%;text-align:center}.skills .skills-container{display:flex;flex-wrap:wrap;justify-content:center}.skills .skills-container ul{width:40%}}@media only screen and (min-width: 401px)and (max-width: 870px){.menu{font-size:1em}}@media only screen and (min-width: 871px)and (max-width: 960px){.menu{font-size:1.3em}}@media only screen and (min-width: 401px)and (max-width: 654px){.nav-header-container{display:flex;flex-wrap:wrap}.nav-header-container header{order:1;margin:0}.nav-header-container nav{order:2;font-size:1.2em;display:flex;justify-content:center;margin:2em auto 0 auto}.nav-header-container nav .domain-header{display:none}.nav-header-container nav .menu{display:flex}.nav-header-container nav .menu a{display:block;margin:0 1em}.footer-container{margin-top:20vh}.footer-container .gmail,.footer-container .github,.footer-container .linkedin{height:1.7em;width:1.7em}.footer-container .contact-header{text-align:center;font-size:1.2em}.footer-container .contact-conainer{display:flex;justify-content:space-around}}@media only screen and (min-width: 655px)and (max-width: 960px){nav{display:flex;justify-content:space-between;align-items:center;margin:0 2em}nav .menu a{display:inline-block;margin:0 1em}.footer-container{margin-top:20vh}.footer-container footer{display:flex;align-items:center;justify-content:center;margin:0 auto}.footer-container footer .gmail,.footer-container footer .github,.footer-container footer .linkedin{height:1.7em;width:1.7em}.footer-container footer .contact-header{text-align:center;font-size:1.2em;width:40%}.footer-container footer .contact-conainer{width:60%;display:flex;justify-content:space-around;margin-right:3em}}@media only screen and (min-width: 401px)and (max-width: 795px){.about-me{display:flex;flex-direction:column;margin:2em 2em;align-items:center}}@media only screen and (min-width: 401px)and (max-width: 903px){.projects h2{text-align:center;margin-top:2em}.project-container{display:flex;flex-wrap:wrap;width:80%;margin:2em auto}.project-container img{width:100%}}@media only screen and (min-width: 904px)and (max-width: 960px){.projects{margin-top:2em;display:flex;flex-wrap:wrap;justify-content:flex-start}.projects h2{margin:2em auto 0 auto}.projects .project-container{display:flex;width:80%;margin:4em auto 0 auto}.projects .project-container .project-description{margin-right:1em;width:30%}.projects .project-container .img-container{width:70%}.projects .project-container .img-container img{width:100%}}@media only screen and (min-width: 961px){nav{display:flex;justify-content:space-between;align-items:center;margin:0 2em}nav .menu{font-size:1.5em}nav .menu a{display:inline-block;margin:0 1em}.main-content{width:90%;margin:0 auto}.about-me{display:flex;margin:2em 2em}.about-me .about-me-header{width:30%}.about-me .story{margin-left:1em;width:70%}.skills h2{width:100%;text-align:center}.project-container{display:flex}.project-container .project-description{width:30%}.project-container .img-container{width:70%}.project-container img{width:70%}.footer-container{margin-top:20vh}.footer-container footer{display:flex;align-items:center;justify-content:center;margin:0 auto}.footer-container footer .contact-header{text-align:center;width:40%}.footer-container footer .contact-conainer{width:60%;display:flex;justify-content:space-around;margin-right:3em}}@media only screen and (min-width: 961px)and (max-width: 1130px){footer .contact-header{font-size:1.2em}footer .gmail,footer .github,footer .linkedin{height:2em;width:2em}}@media only screen and (min-width: 1131px){footer .contact-header{font-size:1.5em}footer .gmail,footer .github,footer .linkedin{height:3em;width:3em}}@media only screen and (min-width: 961px)and (max-width: 1035px){.skills{display:flex;flex-direction:column;justify-content:center;margin:0 2em}.skills .skills-container{display:flex;flex-wrap:wrap;justify-content:center}.skills .skills-container ul{width:40%}}@media only screen and (min-width: 1036px){.skills{display:flex;margin:0 2em}.skills .skills-header{width:30%}.skills .skills-container{width:70%;display:flex;flex-wrap:wrap}.skills .skills-container ul{width:30%}}@media only screen and (min-width: 961px){.projects{margin-top:2em;display:flex;flex-direction:column}.projects h2{margin:2em auto 0 auto}.projects .project-container{display:flex;width:80%;margin:4em auto 0 auto}.projects .project-container .project-description{margin-right:1em;width:30%}.projects .project-container .img-container{width:70%}.projects .project-container .img-container img{width:100%}}*:before,*:after{margin:0;padding:0;box-sizing:inherit}body{box-sizing:border-box;font-family:Futura,"Trebuchet MS",Arial,sans-serif;margin:0}a{color:#000}.page{position:relative}.main-content{font-size:1.5em}.skills{margin-top:4em}.skills ul li{list-style-type:none;background-position:left center;background-repeat:no-repeat;margin:1em 0}.github-link{font-size:.9em}.project-disclaimer{padding:1em;width:80%;font-size:14px;margin:6em auto 0}