*{box-sizing:border-box}::-webkit-scrollbar{width:6px;height:6px;background-color:#555}::-webkit-scrollbar-thumb{background-color:#999}svg{width:1em;height:1em;fill:currentColor;vertical-align:-.125em}body{margin:0;padding:0;width:100vw;height:100vh;font-family:Urbanist,sans-serif;color:#fff;background-color:#000;overflow:hidden}body>#app{width:100%;height:100%;padding:4em 1em .5em;text-align:center;overflow-y:auto}body>#app>header>img{width:20em}body>#app>header>h1{margin-bottom:.25em}body>#app>header>p{margin-top:0;margin-bottom:2em;font-size:1.5em}body>#app>header>a{display:inline-block;padding:1em;color:inherit;text-decoration:none;border:4px solid;font-weight:700;border-radius:2em}@media(hover:hover){body>#app>header>a{transition:outline .2s,border-color .2s,color .2s,background-color .2s}body>#app>header>a:hover{background-color:#fff;color:#000;border-color:#000;outline:4px solid #FFF}}body>#app>main{margin:32px auto;display:flex;flex-wrap:wrap;gap:16px}body>#app>main>article{flex:1 0 20%;display:grid;grid-template-rows:auto 1fr auto;align-items:start;justify-items:center;padding:16px;background-color:color-mix(in srgb,#000 90%,#FFF);border-radius:16px}@media(orientation:portrait){body>#app>main>article{flex-basis:100%}}body>#app>main>article>:first-child{margin-top:0}body>#app>main>article>:last-child{margin-bottom:0}body>#app>main>article button{padding:8px 16px;font-family:inherit;font-weight:700;background-color:#575757;color:#fff;border:none;border-radius:32px;box-shadow:2px 2px 2px #ffffff1a;transition:box-shadow .2s linear,transform .2s linear}@media(hover:hover){body>#app>main>article button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 2px #ffffff1a}}body>#app>main>article button:active{transform:translate(2px,2px);box-shadow:1px 1px 2px #ffffff1a}body>#app>main .projects-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-wrap:wrap;align-content:flex-start;gap:2em;padding:0 16px 16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto}body>#app>main .projects-container header{flex-basis:100%;position:sticky;top:0;z-index:10;padding-top:16px}body>#app>main .projects-container header button{padding:8px 16px;color:#fff;font-family:inherit;font-weight:700;font-size:1.5em;background-color:#111;border-radius:32px;border:none;box-shadow:4px 4px 2px #ffffff1a;transition:box-shadow .2s linear,transform .2s linear}@media(hover:hover){body>#app>main .projects-container header button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 2px #ffffff1a}}body>#app>main .projects-container header button:active{transform:translate(2px,2px);box-shadow:1px 1px 2px #ffffff1a}body>#app>main .projects-container>section{position:relative;display:inline-flex;flex-direction:column;justify-content:space-between;align-items:center;gap:5em;width:20em;max-width:100%;aspect-ratio:9/16;padding:1em;background-color:color-mix(in srgb,#000 85%,#FFF);background-image:var(--image);background-size:cover;background-position:center;background-blend-mode:multiply;border-radius:1em;overflow:hidden}@media(orientation:portrait){body>#app>main .projects-container>section{width:100%}}@media(hover:hover){body>#app>main .projects-container>section{transition:transform .4s,box-shadow .4s}body>#app>main .projects-container>section:hover{transform:scale(1.01) translate(-4px,-4px);box-shadow:4px 4px 2px color-mix(in srgb,#000 70%,#FFF)}}body>#app>main .projects-container>section button{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;width:7em;height:7em;font-family:inherit;font-weight:700;background-color:color-mix(in srgb,#000 20%,#FFF);border-radius:100%;border:none}@media(hover:hover){body>#app>main .projects-container>section button{transition:color .2s,background-color .2s}body>#app>main .projects-container>section button:hover{color:#fff;background-color:#000}}body>#app>main .projects-container>section button svg{font-size:2em}body>#app>main .projects-container>section h3{font-size:1.5em}body>#app>main .projects-container>section p{margin:.25em;text-indent:1em;text-align:justify}body>#app>main .projects-container>section>.video{display:none;position:absolute;top:0;left:0;z-index:4;width:100%;height:100%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}body>#app>main .projects-container>section>.video.visible{display:block}body>#app>main .projects-container>section>.video>button{position:absolute;right:1em;top:1em;z-index:5;display:flex;justify-content:center;align-items:center;width:3em;height:3em;color:#fff;background-color:#000;border-radius:100%}@media(hover:hover){body>#app>main .projects-container>section>.video>button{transition:color .2s,background-color .2s}body>#app>main .projects-container>section>.video>button:hover{color:#000;background-color:#fff}}body>#app>main .projects-container>section>.video>video{width:100%;height:100%;object-fit:contain}body>#app>main .projects-container>section>:first-child{margin-top:0}body>#app>main .projects-container>section>:last-child{margin-bottom:0}