<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">* {
    box-sizing: border-box;
}

@font-face {
    font-family: "NeueHaasGroteskTextPro65Medium";
    src: url('webFonts/NeueHaasGroteskTextPro65Medium/font.woff2') format('woff2'), url('webFonts/NeueHaasGroteskTextPro65Medium/font.woff') format('woff');
}

:root {
    --doc-width: 100%;
    --dialogTime: 300ms;
    --figureTime: 400ms;
    --sectionTime: 200ms;
}

body {
    margin:0;
    padding:0;
    width:100%;
    width:var(--doc-width);
    height:auto;
    overflow-x:hidden;

    font-family: 'NeueHaasGroteskTextPro65Medium', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:rgb(20, 20, 20);

    font-size:18px;
    line-height:23px;
}

a {
    color:rgb(20, 20, 20);
    text-decoration: none;
}

p {
    padding:0;
    margin:0;
}

img, video {
    -webkit-user-select: none;
    user-select: none;
    width:100%;
    display:block;
}

header {
    position:fixed;
    width:100%;
    width:var(--doc-width);
    padding:20px 20px 0 20px;
    z-index:3;
}

.title {
    display:block;
    text-align:center;
    width:100%;
}

.info {
    position:absolute;
    top:20px;
    left:20px;
    cursor: pointer;
}

.info-window {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    width:var(--doc-width);
    height:100%;
    height:100dvh;
    background:white;
    z-index:2;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:100px 0 100px 0;
    transition:opacity var(--dialogTime);
    cursor: url('x-symbol.svg') 8 8, auto;
    overflow-y: scroll;

    opacity:0;
    pointer-events:none;
    display:none;
}

.info-window p{
    display:block;
    width:100%;
    max-width:740px;
    padding:20px;
    cursor: auto;
}

main {
    position:relative;
    width:100%;
    padding:80px 20px 0 20px
}

figure {
    position:relative;
    padding:0;
    margin:20px auto 0 auto;
    width:100%;
    height:auto;
    cursor:pointer;
}

figure img, figure video{
    position:relative;
    width:100%;
    height:auto;
    opacity: 0;
    transition: opacity var(--figureTime);
    z-index:1;
}

.placeholder {
    position:absolute;
    top:0;
    left:0;
    background:rgb(200, 200, 200);
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index:0;
}

aside {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    width:var(--doc-width);
    height:100%;
    background:white;
    z-index:4;
    overflow:hidden;
    touch-action: auto;

    display:none;
    pointer-events: none;
    opacity:0;
    transition: opacity var(--dialogTime);
}

.project-header {
    position:fixed;
    text-align:center;
    display:block;
    width:80%;
    width:calc(var(--doc-width) * 0.8);
    top:0;
    left:50%;
    left:calc(var(--doc-width) * 0.5);
    transform: translateX(-50%);
    padding:20px 0 20px 0;
    z-index:2;
}

.project-title-back{
    -webkit-user-select: none;
    user-select: none;
}

.invisible {
    opacity:0;
    visibility: hidden;
}

.project-media span{
    width:1px;
    height:1px;
    background:white;
    color:white;
    opacity:0;
}

.project-button{
    position:fixed;
    display:none;
    z-index:-10;
    opacity:0;
    transition:opacity var(--sectionTime);
}

.project-button:hover{
    border-bottom:1px solid black;
}

.project-close{
    position:fixed;
    top:22px;
    left:20px;
    cursor:pointer;
    z-index:2;
    -webkit-user-select: none;
    user-select: none;
}

section {
    position:relative;
    width:100%;
    height:100%;
    z-index:1;
}

section img, section video{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    height:100%;
    object-fit: contain;
    margin:auto;
    display:block;
    padding:80px 20px 60px 20px;
    overflow:hidden;

    opacity:0;
    pointer-events:none;
    transition:opacity var(--sectionTime);
}

section p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;
    max-width:660px;
    display:block;
    margin:auto;
    padding:20px;

    opacity:0;
    pointer-events:none;
    transition:opacity var(--sectionTime);
}

section p.scroll{
    top:0;
    transform:translate(-50%, 0);
    padding:80px 20px 60px 20px;
}

.close-area{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    cursor: url('x-symbol.svg') 8 8, auto;
    -webkit-user-select: none;
    user-select: none;
}

.arrows {
    display:flex;
    position:absolute;
    left:50%;
    top:calc(50% + 10px);
    transform:translate(-50%, -50%);
    -webkit-user-select: none;
    user-select: none;
    z-index:2;
}

.arrows.scroll {
    top:0;
    transform:translate(-50%, 0);
}

.prev-box{
    width:50%;
    height:100%;
    cursor: url('left-arrow.svg') 5 9, auto;
}

.next-box{
    width:50%;
    height:100%;
    cursor: url('right-arrow.svg') 25 9, auto;
}

.close-box{
    cursor: url('x-symbol.svg') 8 8, auto;
}

footer {
    position:relative;
    width:100%;
    padding:40px 20px 20px 20px;
}

.copyright{
    text-align:center;
    font-size:12px;
    line-height:16px;
    font-family: Helvetica, sans-serif;
}

@media only screen and (max-width: 600px) {
    header {
        padding:20px 10px 0 10px;
    }

    .info {
        left:10px;
    }

    .info-window{
        padding:100px 0 100px 0;
    }

    .info-window p{
        padding:20px 10px 20px 10px;
    }

    main {
        padding:43px 10px 0 10px
    }

    .project-close{
        left:10px;
    }

    .arrows {
        top:calc(50% + 20px);
    }

    section img, section video{
        padding:60px 10px 20px 10px;
    }

    section p{
        padding:10px;
    }
    
    section p.scroll{
        padding:60px 10px 20px 10px;
    }

    footer {
        padding:20px 10px 20px 10px;
    }
}</pre></body></html>