:root { --bg: #ffffff; --copy: #1470af; --muted: #808b96; --media: #000000; } 

* { box-sizing: border-box; } 

html { background: var(--bg); font-size: 16pt; } 

body { background: var(--bg); } 

body { color: var(--copy); font-family: Poppins, sans-serif; font-weight: 300; margin: 0; } 

a { color: inherit; text-decoration: none; } 

.page { margin: 0 auto; max-width: 850px; min-height: 100vh; padding: 5.2rem 2rem 1.8rem; } 

.masthead { text-align: center; } 


.site-title { display: inline-block; font-size: 2.125em; font-weight: 500; letter-spacing: .2rem; line-height: .75; } 

nav { display: flex; gap: 1.4rem; justify-content: center; margin-top: 2rem; } 

nav a { color: var(--muted); font-size: 1.25em; letter-spacing: 0; transition: color .2s ease; } 

nav a:hover, nav a:focus-visible, nav .is-current { color: var(--copy); } 

.reels, .artwork { margin: 5.1rem auto 0; max-width: 760px; } 

.artwork { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } 

.reel + .reel { margin-top: 4.4rem; } 

.reel h1, .reel h2 { font-size: 1em; font-weight: 300; letter-spacing: .1rem; line-height: 1.5; margin: 0 0 1rem; 
text-align: left; } 

.video-frame { aspect-ratio: 16 / 9; background: var(--media); overflow: hidden; } 

.video-frame iframe { border: 0; height: 100%; width: 100%; } 

.motion-study { display: block; margin: 4.4rem auto 0; max-width: 100%; } 

.site-footer { display: flex; gap: 1rem; justify-content: center; margin-top: 5rem; padding-top: 1.3rem; } 

.site-footer a { align-items: center; border-radius: 50%; display: flex; height: 2em; justify-content: center; 
transition: background-color .25s ease; width: 2em; } 

.site-footer svg { fill: var(--muted); height: 60%; shape-rendering: geometricPrecision; transition: fill .25s ease; 
width: 60%; } 

.site-footer .fill { fill: var(--muted); stroke: none; } 

.site-footer a:hover, .site-footer a:focus-visible { background-color: rgba(0, 0, 0, .122); } 

.site-footer a:hover svg, .site-footer a:focus-visible svg { fill: var(--copy); } 

.site-footer a:hover .fill, .site-footer a:focus-visible .fill { fill: var(--copy); } 

.art-gallery { display: flex; flex-direction: column; gap: 1.8rem; } 

.art-row { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } 

.art-tile { background: var(--media); border: 0; cursor: zoom-in; display: block; min-width: 0; padding: 0; } 

.art-tile img { display: block; height: auto; max-height: 16.625rem; max-width: 100%; transition: opacity .2s 
ease, transform .3s ease; width: auto; } 

.animation-row .art-tile img { max-height: 11.875rem; } 

.art-tile:hover img, .art-tile:focus-visible img { opacity: .78; transform: scale(.98); } 


.art-tile:focus-visible { outline: 1px solid var(--copy); outline-offset: 3px; } 

.about-page { display: flex; flex-direction: column; } 

.about-content { display: flex; flex-direction: column; gap: 2rem; margin: 5.1rem auto 0; max-width: 480px; 
width: 100%; } 

.about-content p { font-size: .98rem; line-height: 1.7; margin: 0; } 

.about-animation { display: block; height: auto; margin: 0 auto; max-width: 320px; width: 100%; } 

.resume-button { align-self: center; background-color: rgba(20, 112, 175, .569); border-radius: .5rem; color: 
#fff; font-size: 1.25em; font-weight: 300; height: 2rem; line-height: 2rem; padding: 0 .5rem; text-align: 
center; width: 5.625rem; } 

.resume-button:hover, .resume-button:focus-visible { background-color: rgba(20, 112, 175, .941); } 

.slideshow { background: var(--bg); border: 0; height: 100dvh; margin: 0; max-height: none; max-width: none; 
padding: 4.5rem 5.8rem; width: 100vw; } 

.slideshow::backdrop { background: var(--bg); } 

.slide-image { display: block; height: 100%; margin: 0 auto; max-height: calc(100dvh - 9rem); max-width: 
100%; object-fit: contain; width: auto; } 

.slide-close, .slide-control { background: none; border: 0; color: var(--copy); cursor: pointer; font: 300 .7rem 
Poppins, sans-serif; letter-spacing: .08em; padding: .5rem; position: fixed; text-transform: uppercase; } 

.slide-close { right: 1.5rem; top: 1.5rem; }.slide-control { top: 50%; transform: translateY(-50%); }.previous { 
left: 1.3rem; }.next { right: 1.3rem; } 

.slide-count { bottom: 1.1rem; color: var(--muted); font-size: .72rem; left: 0; margin: 0; position: fixed; text-
align: center; width: 100%; } 

@media (max-width: 600px) { html { font-size: 12pt; } .page { padding: 3.4rem 1.1rem 1.2rem; } .site-title { 
font-size: 2em; letter-spacing: .175rem; } nav { gap: .85rem; } nav a { font-size: 1.25em; } .reels, .artwork, 
.about-content { margin-top: 3.5rem; } .art-gallery { gap: 1.4rem; } .art-row { gap: .375rem; } .art-tile img { 
max-height: 12.46875rem; } .animation-row .art-tile img { max-height: 8.90625rem; } .about-animation { max-
width: 280px; } .slideshow { padding: 4.4rem 1rem; } .slide-control { background: color-mix(in srgb, var(--bg) 
80%, transparent); }.previous { left: 0; }.next { right: 0; } } 

 

 

@media (max-width: 736px) { 

 .icons-component.instance-1 { 


 font-size: 1.25em; 

 gap: 1rem; 

 } 

} 

 

.icons-component.instance-1 { 

 font-size: 1.25em; 

 gap: 1rem; 

} 

.site-main > .inner > * > * { 

 margin-top: var(--spacing); 

 margin-bottom: var(--spacing); 

} 

.icons-component { 

 display: flex; 

 flex-wrap: wrap; 

 justify-content: var(--flex-alignment); 

 letter-spacing: 0; 

 padding: 0; 

} 

 

ol, ul { 

 list-style: none; 

}