:root { --ui-grey--02: #fbfbfb; --ui-grey--03: #f1f1f1; --ui-grey--04: #e9e9e9; --ui-grey--06: #a4a4a4; --ui-grey--07: #808080; --ui-grey--08: #313131; --ui-grey--09: #121212; --text-color: var(--ui-grey--08); --bg-color: var(--ui-grey--02); --text-secondary-color: var(--ui-grey--07); --text-tertiary-color: var(--ui-grey--06); --window--bg: var(--ui-grey--03); --window--bg-hov: var(--ui-grey--04); --window-border-color: var(--ui-grey--09); --input-color: rgba(248, 248, 248, 0.5); --input-disabled-color: rgba(31, 31, 31, 0.05); --input-hover-color: rgba(248, 248, 248, 0.6); --pi-green: #33ff9b; --pi-pink: #ff6492; --pi-yellow: #fff372; --pi-yellow-hov: #dcd268; --pi-blue: #33ceff; }

@media (prefers-color-scheme: dark) { :root { --ui-grey--02: #fbfbfb; --ui-grey--03: #f1f1f1; --ui-grey--04: #e9e9e9; --ui-grey--06: #a4a4a4; --ui-grey--07: #808080; --ui-grey--08: #313131; --ui-grey--09: #121212; --text-color: #b3b3b3; --bg-color: #121212; --text-secondary-color: #808080; --text-tertiary-color: #a4a4a4; --window--bg: #171717; --window--bg-hov: #1f1f1f; --window-border-color: #a8a8a8; --input-color: #171717; --input-disabled-color: rgba(31, 31, 31, 0.05); --input-hover-color: rgba(71, 71, 71, 0.6); --input-active-color: #272727; --pi-green: #33ff9b; --pi-pink: #ff6492; --pi-yellow: #1b1b1b; --pi-yellow-hov: #666021; --pi-blue: #2a839e; } :root video, :root img { filter: brightness(0.8); } }

body { font-family: "SofiaPro", sans-serif; font-weight: 600; color: var(--text-color); background-color: var(--bg-color); }

a { color: inherit; transition: color 0.3s; text-decoration-thickness: 1px; }

a:visited { color: inherit; }

h1 { font-size: 2.3rem; line-height: 1.3em; letter-spacing: 0.3px; margin: 0; }

@media (max-width: 850px) { h1 { font-size: 1.5rem; } }

h2 { font-size: 24px; margin: 0; letter-spacing: 0.1px; }

@media screen and (max-width: 1200px) { h2 { font-size: 24px; line-height: 1.3em; } }

@media (min-width: 1700px) { h2 { font-size: 28px; } }

p { margin: 0; }

h3 { font-size: 24px; margin: 0; letter-spacing: 0.1px; margin: 38px 0 10px 0; }

@media screen and (max-width: 1200px) { h3 { font-size: 24px; line-height: 1.3em; } }

@media (min-width: 1700px) { h3 { font-size: 28px; } }

.text-standard--m { font-size: 18px; font-weight: 500; line-height: 25px; letter-spacing: 0.3px; margin: 14px 0 14px 0; }

@media (min-width: 1700px) { .text-standard--m { font-size: 19px; } }

.text-annotation-xs { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

@media (min-width: 1700px) { .text-annotation-xs { font-size: 15px; } }

.text-sscr-body--s { font-weight: 500; font-size: 15px; line-height: 1.4em; }

.text-sscr-body--m { font-weight: 500; font-size: 16px; line-height: 1.4em; }

.text-sscr-body--l { font-weight: 500; font-size: 20px; line-height: 1.4em; }

.text-sscr-title--m { font-weight: 700; font-size: 14px; line-height: 1.4em; }

.text-sscr-title--l { font-weight: 700; font-size: 26px; line-height: 1.4em; }

.text-sscr-title--xl { font-weight: 700; font-size: 34px; line-height: 1.4em; text-transform: uppercase; }

.font--semibold { font-weight: 600; }

.font--bold { font-weight: 700; }

.small-typo h2 { font-size: 16px; font-weight: 600; margin-bottom: 2px; }

.small-typo p { font-size: 15px; margin-bottom: 15px; }

.small-typo p:last-of-type { margin-bottom: 0; }

body { position: relative; margin: auto; padding-bottom: 60px; max-width: 1760px; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }

.sscr-grid--main { display: grid; grid-template-columns: repeat(9, 1fr); grid-column-gap: 50px; grid-row-gap: 50px; }

.sscr-window { height: fit-content; position: relative; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.17); transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1); }

.sscr-window .sscr-window-main p + p { margin-top: 16px; }

.sscr-window .sscr-window-main img { margin: 20px 0; }

.sscr-input { border: 1px solid var(--window-border-color); border-radius: 0; background: var(--input-color); color: var(--text-color); flex-grow: 1; box-sizing: border-box; padding: 6px 11px; font: inherit; transition: .1s box-shadow ease-in-out; }

.sscr-input:disabled { border-color: var(--text-secondary-color); color: var(--text-secondary-color); background: var(--input-disabled-color); }

.sscr-input:hover:not(:focus, :disabled) { background: var(--input-hover-color); }

.sscr-input-text:focus-visible { box-shadow: 3px 3px 6px #21212138 inset; }

@media screen and (prefers-color-scheme: dark) { .sscr-input-text:focus-visible { box-shadow: 3px 3px 6px #00000078 inset; background: var(--input-active-color); } }

.sscr-input-button:not(:disabled) { cursor: pointer; }

.sscr-input-button:focus-visible, .sscr-input-button:hover:not(:disabled) { box-shadow: 3px 3px 6px #21212138; }

@media screen and (prefers-color-scheme: dark) { .sscr-input-button:focus-visible, .sscr-input-button:hover:not(:disabled) { box-shadow: 3px 3px 6px #00000078; background: var(--input-active-color); } }

.sscr-input-button:active:not(:disabled) { box-shadow: none; }

textarea { padding: 11px !important; resize: vertical; }

.sscr-input-group { display: flex; flex-direction: row; gap: 25px; }

.sscr-input-group + .sscr-input-group { margin-top: 25px; }

.sscr-form-footnote { margin-top: 15px; margin-bottom: -3px; }

.sscr-window--primary { padding: 25px; }

.sscr-window-standard { background-color: var(--window--bg); }

.sscr-window-standard:hover { background-color: var(--window--bg-hov); }

.sscr-window-highlight { background-color: var(--pi-yellow); }

.sscr-window--postit { grid-column: span 2; height: fit-content; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.17); }

.sscr-window--postit .sscr-postit-title { line-break: anywhere; }

.sscr-window--postit .sscr-window-main { padding: 15px; display: flex; flex-direction: column; justify-content: space-between; }

.sscr-window--postit img { object-fit: cover; display: block; height: 100%; }

.sscr-window--postit:focus { outline: 1px solid white; outline-offset: 1px; }

.sscr-window--secondary { grid-column: span 3; }

.sscr-window-bar { padding: 9px 20px; background-color: var(--bg-color); }

.sscr-window-title--l { margin-bottom: 15px; }

.sscr-list-item { display: flex; align-items: center; }

.sscr-list-item svg { margin-right: 11px; }

.sscr-list-item + .sscr-list-item { margin-top: 16px; }

.sscr-window-resize-handle { position: absolute; bottom: 0; right: 0; padding: 5px; cursor: nwse-resize; }

.sscr-button--std { padding: 6px 20px; margin: auto; text-decoration: none; display: flex; width: fit-content; }

.sscr-button--std svg { align-self: center; margin-left: 25px; }

.bg-pointgrid { background-image: url(/assets/src/point.svg); background-repeat: repeat; z-index: -1; }

.bg-grid--radial::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* ff 3.6+ */ background: -moz-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, white 80%); /* safari 5.1+,chrome 10+ */ background: -webkit-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, white 80%); /* opera 11.10+ */ background: -o-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, white 80%); /* ie 10+ */ background: -ms-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, white 80%); /* global 92%+ browsers support */ background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, white 80%); }

.bg-grid--500 { width: 500px; height: 500px; }

.bg-grid--span-all { width: 100vw; height: 200px; }

.bg-grid--linear::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 80%); }

.footer { position: relative; }

body .bg-pointgrid { position: absolute; left: 0; bottom: 0; }

.sscr-badge { position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--window--bg); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25); }

.sscr-badge svg { fill: var(--window-border-color); }

.sscr-badge--right { right: 0; transform: translate(50%, -50%); }

.blog-content { margin: auto; }

.blog-content > p, .blog-content ol { font-size: 18px; font-weight: 500; line-height: 1.5em; letter-spacing: 0.3px; margin: 14px 0 20px 0; }

.blog-content > p:last-of-type { margin-bottom: 50px; }

.blog-content > p, .blog-content > h1, .blog-content > h2, .blog-content > h3, .blog-content > h4, .blog-content > .footnotes, .blog-content > .link-back, .blog-content > blockquote, .blog-content > ol, .blog-content > .recent-articles { width: 50%; margin-left: auto; margin-right: auto; }

.blog-content h2, .blog-content h3 { margin: 68px auto 10px auto; }

.blog-content blockquote { border-left: 4px solid; padding-left: 20px; margin-top: 24px; margin-bottom: 24px; box-sizing: border-box; }

.blog-content blockquote p { margin: 14px 0 14px !important; padding: 12px 0; }

.blog-content blockquote * { margin: 12px 0; font-size: 28px; line-height: 1.3em; }

img { width: 100%; object-fit: cover; display: block; }

video { display: block; width: 100%; }

.tilt-helper { transform-style: preserve-3d; transform: perspective(1000px); }

.project-item-desc { height: 100%; box-sizing: border-box; }

.project-item-desc p { display: inline; margin-right: 12px; font-size: 17px; font-weight: 600; line-height: 1.4em; letter-spacing: 0.5px; text-transform: uppercase; font-size: 16px; opacity: 0.7; }

@media screen and (max-width: 1200px) { .project-item-desc p { font-size: 16px; } }

@media (min-width: 1700px) { .project-item-desc p { font-size: 18px; } }

figcaption p, .use-case-figcaption p, figcaption-project p { font-size: 18px; font-weight: 500; line-height: 25px; letter-spacing: 0.3px; margin: 14px 0 14px 0; margin-bottom: 0; }

@media (min-width: 1700px) { figcaption p, .use-case-figcaption p, figcaption-project p { font-size: 19px; } }

.project-media-figure .media-wrapper, .project-media-figure .player-wrapper, .use-case-figure .media-wrapper, .use-case-figure .player-wrapper { width: 75%; }

.project-media-figure { grid-column: 1 / -1; display: flex; flex-direction: row; grid-auto-flow: dense; }

.project-media-figure img { cursor: pointer; max-height: 750px; object-fit: cover; object-position: right; margin-left: auto; }

.project-media-figure figcaption { display: flex; margin-top: auto; padding-left: 60px; width: 25%; box-sizing: border-box; }

.lightbox { z-index: 1; }

.lightbox .lightbox-group { z-index: 3; position: fixed; top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.98); transition: 0.3s all; max-width: 90%; max-height: 90%; display: flex; align-items: flex-end; width: max-content; }

.lightbox .lightbox-group p { width: 25%; max-width: 320px; padding-left: 60px; margin-bottom: 0; margin-right: auto; box-sizing: border-box; color: white; }

.lightbox .lightbox-img { background-color: black; width: 75%; max-height: 90vh; object-fit: contain; }

.lightbox .lightbox-bg { z-index: 2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: #000000de; transition: 0.3s opacity; }

.lightbox.open { visibility: visible; }

.lightbox.open .lightbox-group { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.lightbox.open .lightbox-bg { opacity: 1; }

.article-list-item { margin-bottom: 26px; }

.article-list-item a { color: #f2f2f2; }

.article-list-item .article-date { font-size: 15px; line-height: 21px; letter-spacing: 0.3px; margin: 3px 0; }

@media (min-width: 1700px) { .article-list-item .article-date { font-size: 16px; } }

footer p { grid-column: 1 /-1; }

sup { line-height: 0; }

sup a { padding: 4px; }

.footnotes { margin-top: 60px; grid-column: 2 / -1; width: 475px; }

.footnotes:before { content: "Footnotes"; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

@media (min-width: 1700px) { .footnotes:before { font-size: 15px; } }

.footnotes ol { border-top: 4px solid var(--text-color); margin-top: 6px; padding: 40px 0 0; }

#message-submit { position: relative; overflow: hidden; }

.submit-text { transition: 0.3s ease-in-out; }

.show-spinner .submit-text, .send-success .submit-text, .spinner-fade-out .submit-text { opacity: 0; transform: scale(0.1); }

.show-spinner .loading-spinner, .send-success .loading-spinner { opacity: 1; }

.show-spinner .loading-spinner > span, .send-success .loading-spinner > span { animation: submit-load-animation 1s alternate infinite cubic-bezier(0.73, 0, 0.23, 1); }

.spinner-fade-out .loading-spinner { display: none; }

.spinner-fade-out .popup-success-notification { clip-path: circle(100%); opacity: 0; }

.loading-spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; opacity: 0; transition: 0.3s ease-in-out; height: 100%; width: 100%; }

.loading-spinner > span { margin: auto; background: var(--text-color); height: 10px; width: 10px; clip-path: circle(50%); transition: 0.3s ease-in-out; }

.send-success .popup-success-notification { clip-path: circle(100%); opacity: 1; }

.send-success .checkmark { transform: rotate(45deg) scale(1); }

.popup-success-notification { background-color: var(--pi-green); margin: auto; clip-path: circle(5px); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: 0.3s ease-in-out; display: flex; }

.checkmark { width: 20px; height: 20px; transform: rotate(45deg) scale(0.5); transition: 0.3s ease-in-out; margin: auto; }

.checkmark span { height: 2px; background: black; border-radius: 2px; position: absolute; }

.checkmark > span:nth-child(1) { width: 12px; top: 18px; right: 7px; }

.checkmark > span:nth-child(2) { width: 2px; height: 20px; right: 7px; }

.popup-success-notification-show { display: inline; clip-path: circle(100%); }

#error-popup { display: none; width: 100%; background-color: #f18383; }

#error-popup.show { display: block; }

@keyframes submit-load-animation { 0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); } }

@media (max-width: 1200px) { .project-media-figure { cursor: revert; } .project-media-figure figcaption { padding-left: 26px; } }

@media (max-width: 1000px) { .sscr-window--postit { grid-column: span 3; } .blog-content > p, .blog-content > h1, .blog-content > h2, .blog-content > h3, .blog-content > h4, .blog-content > .footnotes, .blog-content > .link-back, .blog-content > blockquote, .blog-content > .recent-articles, .blog-content > ol { width: 70%; margin-left: auto; margin-right: auto; } .blog-content ol { padding-left: 20px; } }

@media (max-width: 850px) { .project-item-desc { padding: 15px 0; } .project-media-figure .media-wrapper, .project-media-figure .player-wrapper, .use-case-figure .media-wrapper, .use-case-figure .player-wrapper { width: 100%; } .project-media-figure { flex-direction: column; } .project-media-figure figcaption { display: flex; margin-top: 10px; padding-left: 0; width: 100%; } figcaption p:first-of-type, .use-case-figcaption p:first-of-type, figcaption-project p:first-of-type { margin: 0; } }

@media screen and (max-width: 550px) { .sscr-grid--main { grid-template-columns: repeat(8, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } .grid-4 { display: block; } .blog-content > p, .blog-content > h1, .blog-content > h2, .blog-content > h3, .blog-content > h4, .blog-content > .footnotes, .blog-content > .link-back, .blog-content > blockquote, .blog-content > ol, .blog-content > .recent-articles { width: 100%; margin-left: auto; margin-right: auto; } .blog-content > p, .blog-content ol { font-size: 18px; font-weight: 500; line-height: 25px; letter-spacing: 0.3px; margin: 14px 0 14px 0; } }

@media screen and (max-width: 550px) and (min-width: 1700px) { .blog-content > p, .blog-content ol { font-size: 19px; } }

@media screen and (max-width: 550px) { .projects-page-item:nth-of-type(2n) { margin-top: 40px; } .figure-project, .use-case-container { padding: 16px 0; } .project-media-figure:first-of-type img { object-fit: contain; } .sscr-input-group { flex-direction: column; } }

button { padding: 0; }

@media (min-width: 1700px) { .blog-content { margin-left: auto; margin-right: auto; } .blog-content > p, .blog-content > h1, .blog-content > h2, .blog-content > h3, .blog-content > h4, .blog-content > .footnotes, .blog-content > .link-back, .blog-content > blockquote, .blog-content > ol, .blog-content > .recent-articles { margin-left: 25%; margin-right: auto; } .blog-content a { font-size: 18px; font-weight: 500; line-height: 1.5em; letter-spacing: 0.3px; margin: 14px 0 20px 0; } .project-media-figure .media-wrapper, .project-media-figure .player-wrapper, .use-case-figure .media-wrapper, .use-case-figure .player-wrapper { width: 82%; } .project-media-figure img { max-height: 900px; } .project-media-figure figcaption { width: 18%; } .lightbox .lightbox-group { width: 90%; } }

.nav { color: var(--text-color); opacity: 0.5; }

.nav a { text-decoration: unset; }

.nav .current { opacity: 1; }

.nav-wrapper { margin: 0 auto; display: flex; align-items: center; gap: 40px; justify-content: space-between; }

.nav-items { display: flex; gap: 18px; }

#hamburger { display: none; }

@media (max-width: 1000px) { .nav-wrapper { width: 70%; } }

@media (orientation: landscape) and (max-width: 850px) { .nav { margin: 26px 0; } }

@media screen and (max-width: 850px) { .nav { margin: 26px 0; } .nav-wrapper { width: 70%; flex-direction: column; } .nav-items { margin: 20px 0 -135px 0; flex-direction: column; transition: all 0.46s cubic-bezier(0.42, 0, 0.12, 0.98); background-color: inherit; width: 100%; padding: 0; visibility: hidden; } .nav-items a { opacity: 0; margin: 0; font-size: 14px; width: fit-content; transform: translateY(-10px); } .nav-items a:nth-of-type(1) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.16s; } .nav-items a:nth-of-type(2) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.12s; } .nav-items a:nth-of-type(3) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.08s; } .nav-items a:nth-of-type(4) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.04s; } .nav-title { width: 100%; display: flex; justify-content: space-between; align-items: center; } #hamburger { z-index: 1; width: 40px; height: 4px; display: block; padding: 4vw 0 4vw 4vw; cursor: pointer; background-color: unset; position: relative; transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98); } #hamburger span { display: block; height: inherit; width: 100%; background: white; opacity: 1; left: 0; } .open .nav-items { visibility: visible; margin-bottom: 10%; } .open #hamburger { transform: scaleY(2); } .open .nav-items a { opacity: 1; transform: translateX(0); } .open .nav-items a:nth-of-type(1) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.04s; } .open .nav-items a:nth-of-type(2) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.08s; } .open .nav-items a:nth-of-type(3) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.12s; } .open .nav-items a:nth-of-type(4) { transition: all 0.3s cubic-bezier(0.42, 0, 0.12, 0.98) 0.16s; } }

@media screen and (max-width: 550px) { .nav-wrapper { width: 100%; } }

article a { color: #5691f7; }

article a:visited { color: #8ab5ff; }

.project-header { display: flex; flex-direction: column; align-items: center; }

.project-header .header-title-container { width: 50%; }

.project-header .media-right { display: none; }

.project-header .button-link { height: 100px; margin-left: 60px; width: auto; text-decoration: none; }

.project-header .button-link > * { color: var(--text-color); width: 60%; }

.project-title { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: baseline; margin: inherit; margin-bottom: -30px; }

.project-title h1 { line-height: 1em; color: black; background-color: white; padding: 5px 8px 6px 8px; width: fit-content; margin: 0; }

.project-title span { margin: 0 0 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.7; }

@media (min-width: 1700px) { .project-title span { font-size: 15px; } }

.project-title .project-course { margin-right: 20px; }

.project .project-description { font-size: 24px; font-weight: 600; line-height: 1.5em; margin: 16px 0; margin: 26px auto 60px; grid-column: 2 / -1; position: relative; }

.use-case-container { grid-column: 1 / -1; margin: 60px 0; }

.use-case-selector-group { grid-column: 1 / span 3; margin-bottom: 20px; }

.use-case-figure-group { grid-column: 1 / -1; }

.use-case-figure { display: flex; flex-direction: row; }

.use-case-figcaption { padding-left: 60px; width: 25%; box-sizing: border-box; }

.use-case-selector { font-size: 24px; margin: 0; letter-spacing: 0.1px; font-size: 24px; border: none; background: none; color: var(--text-color); margin-right: 20px; cursor: pointer; position: relative; transition: all 0.3s; opacity: 0.5; }

@media screen and (max-width: 1200px) { .use-case-selector { font-size: 24px; line-height: 1.3em; } }

@media (min-width: 1700px) { .use-case-selector { font-size: 28px; } }

.use-case-selector.active { opacity: 1; }

.use-case-selector:hover { opacity: 1; }

figure { grid-column: 1 / -1; margin: 0; grid-auto-flow: dense; }

figure figcaption { grid-column: 1 / 2; margin-top: auto; }

figure video { grid-column: 2 /-1; }

.link-back { display: block; color: var(--text-color); margin: 50px 0 260px 0; text-decoration: none; }

.link-back:visited { color: inherit; }

.link-back::before { display: inline-block; vertical-align: middle; width: 30px; height: 4px; margin: 0 15px 3px 0; content: " "; background-color: var(--text-color); transition: width 0.5s; }

.link-back:hover::before { width: 45px; }

@media (max-width: 1200px) { .project-description { width: 70%; } .project-header .button-link { margin-right: 26px; } .use-case-figcaption { padding-left: 26px; } .footnotes { width: 70%; } }

@media (max-width: 1000px) { .project-header .header-title-container { width: 70%; } }

@media (max-width: 850px) { .project-header .button-link { margin-right: 0; } .use-case-figure { flex-direction: column; } .use-case-figure .use-case-video { max-width: 100%; } .use-case-figcaption { margin-top: 20px; padding-left: 0; width: 100%; } }

@media (max-width: 550px) { .project .project-description { font-size: 24px; margin: 0; letter-spacing: 0.1px; margin: 26px auto 60px; } }

@media screen and (max-width: 550px) and (max-width: 1200px) { .project .project-description { font-size: 24px; line-height: 1.3em; } }

@media (max-width: 550px) and (min-width: 1700px) { .project .project-description { font-size: 28px; } }

@media (max-width: 550px) { .project-header .header-title-container { width: 100%; } .project-header .header-media-container { height: unset; } .project-header h1 { font-size: 2.3rem; line-height: 1.3em; letter-spacing: 0.3px; margin: 0; } }

@media (max-width: 550px) and (max-width: 850px) { .project-header h1 { font-size: 1.5rem; } }

@media (max-width: 550px) { .project-header .button-link { width: unset; margin-right: 0; } .use-case-selector { line-height: 1em; margin-bottom: 10px; display: block; position: relative; width: fit-content; } }

@media (min-width: 1700px) { .project-header h1 { font-size: 37px; } .use-case-figure .use-case-figcaption { padding-left: 60px; width: 18%; } }

.article > * { grid-column: 2 / -1; }

.article h2 { margin-top: 38px; margin-bottom: 10px; }

.article .project-media-figure { grid-column: 1 / -1; width: revert; }

.article .article-date { margin-bottom: 0; }

.articles-heading { grid-column: 2 / -1; width: 50%; }

.all-article-section { grid-column: 2 / -1; width: 50%; }

.recent-articles { grid-column: 2 / span 2; margin-top: 150px; width: 100%; }

.recent-articles h2 { margin-bottom: 26px; }

.recent-articles .article-list-item h2 { margin: 0; }

.recent-articles a { color: var(--text-color); text-decoration: none; }

.recent-articles a:visited { color: var(--text-color); text-decoration: none; }

@media (max-width: 850px) { .article .project-media-figure { width: revert; } .article .article-date { margin-bottom: 0; } .articles-heading { width: 70%; } .all-article-section { width: 70%; } .recent-articles { margin-top: 80px; } }

@media screen and (max-width: 550px) { .article > * { grid-column: 1 / -1; width: 100%; } .article h2 { margin: 54px 0 20px 0; } .articles-heading { grid-column: 1 / -1; width: 100%; } .all-article-section { grid-column: 1 / -1; width: 100%; } .recent-articles { grid-column: 1 / -1; margin-top: 150px; width: 100%; } .recent-articles > * { grid-column: 1 / -1; width: 100%; } }

body * { box-sizing: border-box; }

.tabular-nums { font-variant: tabular-nums; }

.reset-decoration { text-decoration: none; }

.center--50 { width: 50%; margin-left: auto; margin-right: auto; }

@media (max-width: 1000px) { .center--50 { width: 70%; margin-left: auto; margin-right: auto; } }

@media (max-width: 550px) { .center--50 { width: 100%; margin-left: auto; margin-right: auto; } }

.border--all { border: 1px solid var(--window-border-color); }

.border--top { border-top: 1px solid var(--window-border-color); }

.border--bt { border-bottom: 1px solid var(--window-border-color); }

.grid-item-l { grid-column: span 3; }

.grid-span-all { grid-column: 1 / -1; }

.displ-flex { display: flex; }

.displ-flex--vert { display: flex; flex-direction: column; }

.flex-expand { flex-grow: 1; }

.flex--vert-sp-btw { align-content: space-between; }

.flex-align--center { align-items: center; }

.flex-gap--m { gap: 40px; }

.m--global { margin-left: calc(50px + 6vw); margin-right: calc(50px + 6vw); }

@media (max-width: 1280px) { .m--global { margin-left: calc(32px + 3vw); margin-right: calc(32px + 3vw); } }

@media (max-width: 1000px) { .m--global { margin-left: calc(8vw); margin-right: calc(8vw); } }

.m-top--s { margin-top: 40px; }

.m-top--m { margin-top: 60px; }

.m-top--l { margin-top: 80px; }

.m-top--xl { margin-top: 120px; }

.m-top--xxl { margin-top: 220px; }

.m-bt--xs { margin-bottom: 20px; }

.m-bt--s { margin-bottom: 40px; }

.m-bt--m { margin-bottom: 60px; }

.m-bt--l { margin-bottom: 80px; }

.m-bt--xl { margin-bottom: 120px; }

.m-bt--xxl { margin-bottom: 220px; }

@media screen and (max-width: 850px) { .m-top--s { margin-top: 20px; } .m-top--m { margin-top: 30px; } .m-top--l { margin-top: 40px; } .m-top--xl { margin-top: 60px; } .m-top--xxl { margin-top: 110px; } .m-bt--s { margin-bottom: 20px; } .m-bt--m { margin-bottom: 30px; } .m-bt--l { margin-bottom: 40px; } .m-bt--xl { margin-bottom: 60px; } .m-bt--xxl { margin-bottom: 110px; } }

.player-wrapper { position: relative; }

.player-controls { box-sizing: border-box; position: absolute; bottom: 0; width: 100%; margin: 0 auto; display: none; justify-content: space-between; padding: 12px; background-color: rgba(43, 43, 48, 0.8); opacity: 1; transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; /* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ }

@supports (-webkit-backdrop-filter: blur()) { .player-controls { -webkit-backdrop-filter: brightness(40%) blur(20px); background: none; } }

.player-controls.faded { opacity: 0; }

.vc-button { appearance: none; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; width: auto; min-width: 25px; height: 25px; }

@media (min-width: 1700px) { .vc-button { font-size: 15px; } }

.progress { height: 4px; border-radius: 0; width: 80%; background: linear-gradient(to right, #fff 0%, #fff 0%, #000 0%, #000 100%); margin: 4px 0; }

input[type="range"] { appearance: none; -webkit-appearance: none; }

input[type="range" i]::-webkit-slider-runnable-track { padding: 12px 0; }

input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 12px; width: 0; background-color: red; }

.controls-container { display: flex; width: 100%; justify-content: center; padding: 12px; background-color: #4b4b4b; opacity: 0.8; backdrop-filter: blur(20px) brightness(50%); background: none; margin: 0 30px 30px; }

.sscr-hero-sticky { grid-column: 1 / 7; top: 0; position: sticky; display: flex; align-items: center; height: 100vh; }

.sscr-hero-scroll { grid-column: 7 / -1; background-color: var(--bg-color); -webkit-transform: translate3d(0, 0, 0); }

.sscr-hero-scroll .sscr-window { margin-bottom: 60px; }

.personal-intro p { margin-bottom: 10px; }

.personal-intro h1 { line-height: 1em; color: var(--text-color); padding: 5px 8px 6px 8px; width: fit-content; width: -moz-fit-content; margin: 0; }

.personal-intro .inline-highlight { background-color: var(--text-color); color: var(--bg-color); padding: 0 8px; text-decoration: none; width: fit-content; }

.sscr-project-window a { text-decoration: none; }

.project-section { position: relative; }

.project-section .sscr-window--postit:nth-of-type(1) { margin-top: 100%; }

.project-section .sscr-window--postit:nth-of-type(2) { margin-top: 20%; }

.project-section .sscr-window--postit:nth-of-type(3) { grid-column: 8 / span 2; margin-top: 70%; }

.project-section .postit-video { grid-column: 5 / span 3; margin-top: -20%; background-color: var(--pi-blue); }

.project-section .bg-pointgrid { position: absolute; left: 0; top: 0; transform: translate(10%, 20%); }

.contact-window { grid-column: 1 / span 4; position: relative; }

.link-grid { display: grid; grid-template-columns: min-content auto; column-gap: 75px; row-gap: 10px; margin-top: 10px; }

.contact-window.expanded { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 410px; }

.link-list { grid-column: 7 / span 3; align-self: center; }

.article-section { position: relative; }

.article-section .bg-pointgrid { position: absolute; top: 0; right: 0; transform: translate(-20%, -40%); }

.button-link { display: flex; align-items: flex-end; width: 100%; border-radius: 0; font: unset; cursor: pointer; }

.button-link > * { color: #808080; margin: 0 auto 14px 18px; line-height: 1.3em; transition: transform 0.5s; opacity: 1; }

.button-link:hover * { transform: translateX(12px); }

.aspect-2-1 { aspect-ratio: 2 / 1; }

.aspect-1-1 { aspect-ratio: 1; }

@media screen and (max-width: 1000px) { .sscr-hero-sticky { grid-column: 1 / -1; height: 80vh; } .sscr-hero-scroll { grid-column: 1 / -1; margin-top: 0; } .sscr-hero-scroll .sscr-window { margin-bottom: 60px; } .project-section .sscr-window--postit:nth-of-type(3) { grid-column: 7 / span 3; } .project-section .postit-video { grid-column: 5 / span 4; } .contact-window { grid-column: 1 / span 5; } .link-list { grid-column: 6 / -1; } }

@media (max-width: 850px) { .personal-intro { grid-column: 1 / -1; margin-left: auto; margin-right: auto; transform: translate(0); } .button-link > * { font-size: min(1.8vmax, 13px);; } .contact-window, .link-list { grid-column: 1/-1; } .link-list { margin-top: 40px; } }

@media screen and (max-width: 550px) { .personal-intro { grid-column: span 1; } .personal-intro h1 { margin-bottom: 20px; } .project-section { position: relative; } .project-section .sscr-window--postit:nth-of-type(1) { grid-column: 1 / span 4; margin-top: 0; } .project-section .sscr-window--postit:nth-of-type(2) { grid-column: 5 / span 4; margin-top: 0; } .project-section .sscr-window--postit:nth-of-type(3) { grid-column: 1 / span 4; margin-top: 0; } .project-section .postit-video { grid-row: 2; grid-column: 1 / -1; margin-top: 0; } .sscr-input { width: 100%; } }

@media (min-width: 1700px) { .project-item-desc h2 { font-size: 37px; line-height: 1.4em; } }

/*# sourceMappingURL=main.css.map */