@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap"');

html {font-size: 16px; margin: 0; padding: 0; scroll-behavior: smooth;}
body {background: #1D1D1D; margin: 0 auto; padding: 0; width: 100%; height: 100%; color: #EEEBDD; font-family: Inter Tight; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
.clearfix {display: block!important;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both!important; height: 0;}
img {display: block; margin: 0px auto; max-width: 100%; height: auto!important; width: auto\9!important; object-fit: cover; image-rendering: auto; overflow-clip-margin: content-box;overflow: clip;}
* {box-sizing: border-box;}

/* -------------------------------- Body -------------------------------- */
header {display: block; background-color: rgba(29,29,29,1);}
.container {z-index: 2; width: 90%; max-width: 1440px; margin-left: auto; margin-right: auto; position: relative;}
.body-content {position: relative; top: 109px; width: 100%; margin: auto; padding: 0;}
.evan-logo {max-width: 200px; margin: 0; padding: 0;}

/* -------------------------------- Hero -------------------------------- */
.hero {position: relative; width: 100%; margin: 0 auto; height: 80vh; padding: 0 0 10% 0; display: flex; justify-content: flex-start; align-items: center;}
.hero-light {font-size: clamp(40px, 4vw, 88px); width: 100%; font-weight: 400; margin: 0; padding: 0; color: rgba(238, 235, 221, 1)}
.hero-main-copy-bold {color: #fff; display: contents; font-weight: 700;}
.hero-bold {font-size: clamp(40px, 4vw, 88px); font-weight: 700; display: contents!important; margin: 0; padding: 0;}

/* -------------------------------- Text leftToRight Animation -------------------------------- */
.slidingHorizontal {display: inline; text-indent: 1px;}
.slidingHorizontal span {animation: leftToRight 12.5s linear infinite 0s; -ms-animation: leftToRight 12.5s linear infinite 0s; -webkit-animation: leftToRight 12.5s linear infinite 0s; opacity: 0; overflow: hidden; position: absolute; font-size: clamp(40px, 4vw, 88px); font-weight: 700; /*color: #00abe9;*/ color: #fff;}
.slidingHorizontal span:nth-child(2) {animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s;}
.slidingHorizontal span:nth-child(3) {animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s;}
.slidingHorizontal span:nth-child(4) {animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s;}
.slidingHorizontal span:nth-child(5) {animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s;}

@-moz-keyframes leftToRight {0% {opacity: 0;} 5% {opacity: 0; -moz-transform: translateX(-50px);} 10% {opacity: 1; -moz-transform: translateX(0px);} 25% {opacity: 1; -moz-transform: translateX(0px);} 30% {opacity: 0; -moz-transform: translateX(50px);} 80% {opacity: 0;} 100% {opacity: 0;}}
@-webkit-keyframes leftToRight {0% {opacity: 0;} 5% {opacity: 0; -webkit-transform: translateX(-50px);} 10% {opacity: 1; -webkit-transform: translateX(0px);} 25% {opacity: 1; -webkit-transform: translateX(0px);} 30% {opacity: 0; -webkit-transform: translateX(50px);} 80% {opacity: 0;} 100% {opacity: 0;}}
@-ms-keyframes leftToRight {0% {opacity: 0;} 5% {opacity: 0; -ms-transform: translateX(-50px);} 10% {opacity: 1; -ms-transform: translateX(0px);} 25% {opacity: 1; -ms-transform: translateX(0px);} 30% {opacity: 0; -ms-transform: translateX(50px);} 80% {opacity: 0;} 100% {opacity: 0;}}

/* -------------------------------- Work -------------------------------- */
.work {display: block; padding: 0;}
.work h1 {font-size: clamp(24px, 4vw, 64px); font-weight: 600; padding: 0; margin: 0; scroll-margin-top: 120px; scroll-padding-top: 120px; overflow-y: scroll; overflow-x: hidden;}
.longspace {min-height: 400px; height: 100vh;}

/* -------------------------------- Cards -------------------------------- */
:root {--cards: 4; --cardHeight: 80vh; --cardTopPadding: 1.5em; --cardMargin: 4vw;}
#cards {list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--cards), var(--cardHeight)); gap: var(--cardMargin); padding-bottom: calc(var(--cards) * var(--cardTopPadding)); margin-bottom: var(--cardMargin);}
#card1 {--index: 1;}
#card2 {--index: 2;}
#card3 {--index: 3;}
#card4 {--index: 4;}
.card {position: sticky; top: 96px; padding-top: calc(var(--index) * var(--cardTopPadding)); cursor: pointer; }
.card-body {background-color: #1D1D1D; border: 1px solid #333; box-sizing: border-box; padding: 32px; border-radius: 8px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.3); height: var(--cardHeight); display: flex; justify-content: center; align-items: center; transition: all 0.3s; flex-direction: column; overflow:hidden;}
.title-plus-link {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0px 0 24px 0;}
.cardtitle {display: flex; width: max-content; font-size: clamp(17px, 4vw, 24px); font-weight: 600;}
.card-link {display: flex; width: max-content;}
.year-plus-tasks {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 0 8px 0;}
.work-year, .work-tasks {font-size: clamp(12px, 4vw, 16px); font-weight: 400;}
.card-link {width: fit-content; padding: 0; border-radius: 50px; font-size: clamp(13px, 4vw, 16px); font-weight: 500; display: flex; justify-content: space-between;align-content: space-between; align-items: center; flex-wrap:nowrap; cursor: pointer; color: #FFF;}
.card-link-btn-img {display: inline-flex; width: max-content; width: 32px; height: 32px; padding: 0; margin: 0 10px 0 0; transition: all 0.3s ease-in-out;}
.card-image {object-fit: cover; position: relative; height: 90%; width: 100%; overflow:hidden; background: #333; border-radius: 4px;}
.card-image img {overflow: hidden; image-rendering: auto!important; transition: .4s ease all; opacity: 0.7; display: block!important; width: 100%!important; height: 100%!important; object-position: center top!important; object-fit: cover!important; }

.card-body:hover img {opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%); visibility: visible; left: 3%; transform: scale(1.02);}
.card-body:hover .card-link-btn-img {visibility: visible; position: relative; margin-right: 0px;}

/* ------------------------------- About Me ------------------------------- */
.info-blurb {background: #1D1D1D; margin: 24px auto; padding: 24px 32px; border: 1px solid #333; border-radius: 8px;}
.info-blurb:last-child {margin: 24px auto 0 auto;}
.info-blurb-heading {font-size: clamp(24px, 2vw, 32px)!important; font-weight: 600!important; margin: 0; padding: 0;}
.background-blurb-heading {font-size: clamp(20px, 2vw, 24px)!important; font-weight: 500!important; margin: 0; padding: 0;}
.about-me-work {font-size: clamp(16px, 2vw, 24px); font-weight: 500; padding: 16px 0 0 0; margin: 0; letter-spacing: 1.05px; line-height: 1.3;}
.about-me-links {display: flex; flex-direction: row; align-content: center; justify-content: space-between; }
.my-links {margin: 32px auto 0 -6px; padding: 0; list-style: none; padding-left: 0; display: flex; flex-direction: row; align-content: center; gap: 24px; flex-wrap: wrap-reverse;}
.e-mail {width:40px; height: 40px; padding: 0; margin: 0; top: 5px;}
.linked-in {width:40px; height: 40px; padding: 0; margin: 0; top: 5px;}
.resume-download {display: flex; justify-content: center; max-width: 200px; border: 1px solid #333; border-radius: 120px; max-height: 32px; align-items: center; gap: 8px; font-size: 16px; padding: 7px 16px 7px 20px; font-weight: 600; background: #333;}
.resume-download a {color: #FFF!important; margin-right: 8px;}
.resume-download:hover {background: #151718; transition: 0.3s ease-in-out; border: 1px solid #151718;}
.resume-download a:hover {color: #FFF!important;}
.resume-download-img {width: 20px!important; height: 20px!important; margin: 0 0 0 12px; padding: 0;}

.timeline {padding: 40px 0; margin: 0 auto; display: flex; flex-direction: column; }
.timeline-unit {display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #333; padding: 24px 0; gap: 16px;}
.timeline-unit:first-child {padding: 0px 0 24px 0;}
.timeline-unit:last-child {border-bottom: none; padding: 24px 0 0 0;}
.date {width: 24%; color: #AAA; font-size: clamp(16px, 2vw, 18px)!important;}
.place-job {width: 40%;}
.place {font-size: clamp(18px, 2vw, 20px)!important; font-weight: 600; color: #eeebdd;}
.job {color: #AAA; font-size: clamp(16px, 2vw, 18px)!important;}
.job-description {width: 36%; font-size: clamp(14px, 2vw, 16px)!important; color: #AAA; letter-spacing: 0.8px;}
.job-description p {margin: 0; padding: 0;}

.tool-stack {display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: start; padding: 24px 0 0 0;}
.tool-stack span {width: auto; max-width: 84px !important;}

/* -------------------------------- Tool tip -------------------------------- */
ul.example-1 {list-style: none;}
.example-1 {display: flex; align-items: center; width: 100%; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap;}
.example-1 .icon-content {margin: 0 24px 0 0; position: relative;}
.example-1 .icon-content .tooltip {position: absolute; top: -32px; left: 50%; transform: translateX(-50%); background-color: #000; color: #fff; padding: 6px 10px; border-radius: 5px; opacity: 0; visibility: hidden; font-size: 14px; transition: all 0.3s ease; text-wrap: nowrap;}
.example-1 .icon-content:hover .tooltip {opacity: 1; visibility: visible; top: -40px;}
.example-1 .icon-content a {display: flex; justify-content: center; align-items: center; width: auto; max-width: 84px !important; background-color: none; transition: all 0.3s ease-in-out; filter: grayscale(100%); opacity: 0.8;}
.example-1 .icon-content a:hover {transition: 0.3s ease-in-out; opacity: 1; cursor: pointer;}

.tool-stack {display: flex; align-items: center; width: 100%; padding: 0; margin: 2rem auto;}
.tool-stack ul {width: 100%; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: left;}
.tool-stack ul li {list-style: none; display: flex; flex-direction: column; position: relative; min-width: 0; margin: 0; padding: 0; align-items: center; width: 12.5%; font-size: 14px;}
.tool-stack li .tooltip {text-align: center;}
.tool-stack li:hover .tooltip {opacity: 1; visibility: visible; top: -40px;}
.tool-stack li a {display: flex; justify-content: center; align-items: center; width: auto; max-width: 84px !important; background-color: none; transition: all 0.3s ease-in-out; filter: grayscale(100%); opacity: 0.8;}
.tool-stack li a:hover {transition: 0.3s ease-in-out; opacity: 1; cursor: pointer;}

/* -------------------------------- Case studies -------------------------------- */
.fixed-nav {position: fixed; width: 100%; padding: 32px 0; top: 0; z-index: 3; height: auto; background-color: rgba(29,29,29,1);}
.case-study-header {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.case-study-btn {display: flex; border-radius: 120px; align-items: center; font-weight: 400; color: #FFF; gap: 8px; border-width: 1px; margin: 0 auto; border: 2px solid #555;}
.case-studies-back {padding: 8px 20px 8px 8px; margin: 0 0 0 -8px;}
.case-studies-forward {padding: 8px 8px 8px 20px; margin: 0 -8px 0 0;}
.case-study-btn-left-img {display: flex; width: 24px; height: 24px;}
.case-study-btn-text-left {display: flex; transition: all 0.3s ease;}
.case-study-btn-text-right {display: flex; transition: all 0.3s ease;}
.case-study-btn-right-img {display: flex; width: 24px; height: 24px;}

.case-study-btn:hover .case-study-btn-text-left {margin-left: 8px; visibility: visible;}
.case-study-btn:hover .case-study-btn-text-right {margin-right: 8px; visibility: visible;}


.post-header {top: 120px; position: relative; background: #1D1D1D;}
.case-study-title {position: relative; padding: 0; margin: 0 auto; z-index: 0; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap;}
.case-study-title h1 {font-size: clamp(40px, 6vw, 64px); padding: 0; margin: auto; font-weight: 700; width: 100%;}
.case-study-title p {font-size: clamp(16px, 4vw, 20px); padding: 2rem 0; margin: 0; text-align: left; font-weight: 300;}

.first-image {width: 100%; margin: auto; padding: 0; border-radius: 32px; margin: 2rem 0 4rem 0;}
.first-image img {width: 100%; max-width: 1920px; max-height: 786px; overflow: hidden; object-fit: cover; object-position: center top; border-top-left-radius: 8px; border-top-right-radius: 8px;}

.role-details-main {display: flex; align-items: center; flex-direction: row; gap: 24px; padding: 0px 0 24px 0;}
.role-details-single {display: flex; flex-direction: column;}
.role-details-title {font-weight: 300; padding: 0 0 4px 0; color: #AAA; font-size: 16px;}
.role-details-info {font-weight: 400; font-size: 16px;}
.case-study-paragraph {font-size: clamp(15px, 2vw, 20px); letter-spacing: 1.01px; max-width: 1000px; width: 80%; margin: 0; padding: 32px 0 0 0; text-align: left;}
.two-row-content {display: flex; flex-direction: row; gap: 24px; align-items:flex-start; justify-content: space-evenly; flex-wrap: nowrap; align-content: stretch; padding: 0; margin: 0 auto;}
.one-row-content {flex-basis: 50%; max-width: 50%; padding: 0; margin: 0; flex: 1;}
.one-row-content h4 {font-size: clamp(24px, 4vw, 28px); font-weight: 600 !important; margin: 0; padding: 0.25rem 0 0 0;}
.one-row-content p {font-size: clamp(16px, 4vw, 20px); font-weight: 400; line-height: 1.5; padding: 0.5rem 0 1rem 0; margin: 0;}

.single-row-content {display: flex; flex-direction: column; align-items:flex-start; justify-content: space-evenly; flex-wrap: wrap; padding: 0; margin: 4rem auto 0 auto;}
.single-row-content h2 {font-size: clamp(32px, 4vw, 40px) !important; font-weight: 500; padding: 0; margin: 0; line-height: 1;}
.single-row-content p {font-size: clamp(16px, 4vw, 20px); font-weight: 400; line-height: 1.5; padding: 1rem 0 2rem 0; margin: 0; width: 60%;}
.single-row-content img {width: 100%; border-radius: 8px; max-width: 1920px;}
.view-more-work {display: flex; flex-direction: column; align-items: center; margin: 8rem auto 4rem auto; padding: 0; position: sticky; top: 90px;}
.view-more-work h2 {font-size: clamp(32px, 4vw, 40px)!important; padding: 1rem 0 0.5rem 0; margin: 0; text-align: center;}
.link-btn-group {display: flex; flex-direction: row; gap: 24px; align-items: center; margin-top: 1rem;}
.view-link-btn {padding: 12px 24px; border: 1px solid #EEEBDD; border-radius: 120px; background: #EEEBDD; color: #333; font-weight: 600; display: flex; max-width: max-content;}
.view-link-btn-alt {padding: 12px 24px; border: 1px solid #555; border-radius: 120px; background: #1D1D1D; color: #EEEBDD; font-weight: 600; display: flex; max-width: max-content; transition: 0.5s ease;}
.view-link-btn:hover {border: 1px solid #EEEBDD; background: #FFF; color: #333;}
.view-link-btn-alt:hover {background: #FFF; color: #333;}
.mb2 {margin: 2rem 0rem;}
.mb3 {margin: 0rem 0rem 3rem 0rem;}

.view-more-btn {padding: 12px 24px; margin: 1rem 0 2rem 0; border: 1px solid #333; border-radius: 120px; background: #333;}

/*body:has(.view-more-btn:hover) .more-work-image img {opacity: 1; -webkit-filter: grayscale(0%); filter: grayscale(0%); visibility: visible; left: 3%; transform: scale(1.01);}*/

/* ------------------------------- Playground ------------------------------- */
.playground-items {display: flex; flex-flow: row wrap; justify-content:space-between; align-items: center; width: 100%; padding: 0; row-gap: 1.5vw; margin: 2vw auto 5vw auto;}
.pl-item {display: flex; width: 32%; background: none; border-radius: 8px; padding: 0; height: 40vh; position: relative; overflow: hidden!important; border: 2px solid #333;}
.pl-item-text {position: absolute; bottom: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 5%; flex-direction: column; text-align: left;}
.pl-item-img {margin: auto;position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.pl-item-img img {width: -webkit-fill-available; transition: all 0.5s; display: block; transform: scale(1); position: absolute; z-index: 0; -webkit-transition: 0.5s ease; transition: 0.5s ease; object-fit: cover; height: 100%!important; opacity: 0.4; object-position: center top;}
.pl-item-img img:hover {-webkit-transform: scale(1.02); transform: scale(1.02); opacity: 0.6; -webkit-filter: grayscale(0%); filter: grayscale(0%);}
.pl-item-title {color: #FFF; font-size: clamp(18px, 4vw, 20px); font-weight: 600; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;}
.pl-item-role {color: #EEE; font-size: clamp(14px, 4vw, 16px); font-weight: 500; padding: 4px 0 0 0; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;}

/* -------------------------------- Footer -------------------------------- */
footer {display: block; margin: auto; width: 90%; text-align: center; padding: 3% 0; color: #868686; font-size: clamp(12px, 4vw, 16px);}

/* -------------------------------- Responsive -------------------------------- */
@media (max-width: 1440px) {
.container {margin: 0 auto; width: 100%; padding: 0 5%; max-width: 1440px;} 
.hero h1 {width: 100%;}
}

@media (max-width: 1440px) {
.work {display: block;}
.playground-items {height: auto; row-gap: 1.5vw;}
.pl-item {height: 30vh;}
.first-image img {min-width: auto !important; max-height: 640px;}
.case-study-paragraph {width: 100%; letter-spacing: 1px; padding: 16px 0 0 0;}
}

@media (max-width: 1024px) {
.hero {height: 40vh;}
.card-body {display: flex; justify-content: space-evenly; align-items: center; flex-direction: column; overflow: hidden;}
.card-left {width: 100%; padding-right: 0; padding-bottom: 4%;}
.card-right {width: 100%; padding-left: 0; display: block;}
.card-body img {overflow-clip-margin: content-box;}
.card-image img {opacity: 1; filter: blur(0px); object-position: left top!important; width: 200% !important; max-width: 200% !important;} 
.playground-items {row-gap: 2.5vw; height: auto;}
.pl-item {width: 48%;}
.tool-stack ul li {width: 25%; font-size: 14px; margin-bottom: 16px;} 
}

@media (max-width: 840px) {
.timeline-unit {flex-direction: column; width: 100%; gap: 0;}
.date, .place-job, .job-description {width: 100%;}
.place-job {padding: 16px 0;}
.job-description {color: #DDD; letter-spacing: 0.7px;}
}

@media (max-width: 769px) {
.hero {height: 64vh;}
.body-content {top: 90px;}
.evan-logo {max-width: 160px; margin: 0; padding: 0;}
.hero {padding: 20% 0 35% 0; margin: 0 auto;}
.hero h1 {font-size: clamp(24px, 4vw, 64px); display: flex; width: 100%;}
.slidingHorizontal span {font-size: clamp(24px, 4vw, 64px);}
.hero {height: 4vh;}
.work h1 {scroll-margin-top: 96px; scroll-padding-top: 96px; overflow-y: scroll; overflow-x: hidden;}
.work {padding: 5% 0 0 0;}
.year-plus-tasks {padding: 8px 0;}
.playground-items {row-gap: 2.5vw; height: auto;}
.pl-item {width: 48%; height: 30vh;}
.post-header {top: 104px;}
.case-study-title h1 {font-size: clamp(48px, 4vw, 64px);}
.single-row-content p {width: 100%; padding: 1rem 0;}
.more-work-image img {opacity: 1;}
}

@media (max-width: 576px) {
:root { --cardTopPadding: 0;}
.evan-logo {}
.hero {height: 32vh; padding: 16% 0 24% 0;}
.hero h1 {font-size: clamp(24px, 4vw, 64px); display: flex; width: 100%;}
.card-body {padding: 16px;}
.work-year, .work-tasks {font-size: clamp(12px, 4vw, 14px); font-weight: 300;}
.title-plus-link {padding: 4px 0 12px 0;}
.playground-items {margin: 4vw auto 5vw auto; row-gap: 4.5vw;}
.pl-item {width: 100%; height: 30vh;}
.pl-item-img img {width: 100%; -webkit-filter: grayscale(0%); filter: grayscale(0%);}
.info-blurb {padding: 16px;}
.info-blurb:last-child {margin: 24px auto 0 auto;}
.timeline {padding: 24px 0;}
.tool-stack {margin: 2rem auto 1rem auto;}
.tool-stack span {width: auto; max-width: 60px !important;}
.tool-stack ul li {width: 25%; font-size: 12px;}
.tool-stack ul li img {max-width: 60%!important;}
.fixed-nav {padding: 16px 0;}
.post-header {top: 96px;}
.case-study-title h1 {font-size: clamp(28px, 4vw, 40px);}
.case-study-title p {font-size: clamp(16px, 2vw, 24px); padding: 1rem 0;}
.first-image {margin: 0 0 1em 0;}
.first-image img {max-height: 360px; border-radius: 2px;}
.two-row-content {flex-direction: column; gap: 4px;}
.link-btn-group {display: flex; flex-direction: column; align-items: flex-start;}
.one-row-content {max-width: 100%; flex-basis: 100%;}
.single-row-content {margin: 2rem auto 0 auto;}
.view-more-work {margin: 4rem auto;}
.more-work-image {max-height: 360px;}
footer {padding: 8% 0;}
}

@media (max-width: 460px) {
.evan-logo {max-width: 120px;}
.nav-toggle {margin-top: 4px!important;}
.hero h1 {font-size: clamp(20px, 4vw, 24px);}
.card {top: 80px;}
.tool-stack ul li {width: 33.3%; font-size: 12px;}
.more-work-image {max-height: 240px;}
.more-work-image {width: 80%;}
}

@media (max-width: 320px) {
.evan-logo {max-width: 120px; margin: 0; padding: 0;}
.hero h1 {font-size: clamp(24px, 3vw, 40px); display: flex; width: 100%;}
.slidingHorizontal span {font-size: clamp(20px, 3vw, 40px);}
.body-content {top: 80px;}
}