:root{background-color:#242424;width:100vw;height:100vh}body{margin:0;scrollbar-width:none;overflow-x:hidden}::-webkit-scrollbar{width:0px;background:transparent}.app-container{position:relative}.photo-mosaic{display:flex;justify-content:center;width:100vw;height:100%;user-select:none;overflow-y:scroll}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));grid-auto-rows:200px;gap:5px;width:100%;height:100%;max-height:100vh;max-width:100vw;grid-auto-flow:dense}.imageContainer{position:relative;overflow:hidden;background-color:#f5f5f5}.imageContainer img{width:100%;height:100%;object-fit:cover;transition:transform .3s;pointer-events:none;user-select:none}.imageContainer:hover img{transform:scale(1.1)}.item-enter{opacity:0;transform:translateY(-20px)}.item-enter-active{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}@keyframes balloonPop{0%{transform:scale(1);opacity:1}90%{transform:scale(1.3);opacity:1}to{transform:scale(0);opacity:0}}.pop{animation:balloonPop .5s forwards}.scroll-controls{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:10}.scroll-controls button{margin:50px 0;background-color:#000000bf;border:none;border-radius:20px;cursor:pointer;padding:20px 25px;font-size:100px;color:#fff}.action-bar{width:100%;bottom:0;height:200px;position:fixed;z-index:10;display:flex;justify-content:center;pointer-events:none}.action-bar .blur-background{width:100vw;height:100vh;position:absolute;top:0;left:0;backdrop-filter:blur(5px);transform:translateY(-91vh);transition:all .5s}.action-bar .camera-container{display:flex;justify-content:center;width:400px;height:400px;pointer-events:all}.action-bar .camera{width:230px;height:230px;background-color:#ffffffd9;filter:drop-shadow(4px 4px 4px rgba(0,0,0,.25)) opacity(.5);box-shadow:0 0 0 2px #fffc;border-radius:50%;transform:translateY(-30%)}.action-bar .camera-idle{width:230px;height:230px;background-color:#ffffffd9;filter:drop-shadow(4px 4px 4px rgba(0,0,0,.25));box-shadow:0 0 0 2px #fffc;border-radius:50%;animation:pulse 1.5s infinite}.action-bar .capture{position:absolute}.action-bar .capture-enter{transform:translateY(50vh)}.action-bar .capture-enter-active{transform:translateY(50vh);transition:all .2s linear}.action-bar .capture-enter-done{transform:translateY(-130%);transition:all .25s linear}.action-bar .capture-exit{transition:all .5s linear}.action-bar .capture-exit-active{transform:translateY(100vh);transition:all .5s linear}.action-bar .past-capture-hours{position:absolute;padding:20px;background-color:#f44336;color:#fff;border-radius:25px}.action-bar .past-capture-hours h1{font-size:20px;margin:0;font-family:Arial,serif}.action-bar .past-capture-hours-enter{transform:translateY(50vh)}.action-bar .past-capture-hours-enter-active{transform:translateY(50vh);transition:all .2s linear}.action-bar .past-capture-hours-enter-done{transform:translateY(-180%);transition:all .25s linear;animation:shake .2s ease-in-out infinite}.action-bar .past-capture-hours-exit{transition:all .5s linear}.action-bar .past-capture-hours-exit-active{transform:translateY(100vh);transition:all .5s linear}@keyframes shake{0%{margin-left:0rem}25%{margin-left:.5rem}75%{margin-left:-.5rem}to{margin-left:0rem}}@keyframes pulse{0%{box-shadow:0 0 #ffffffbd;transform:scale(1) translateY(-30%)}70%{box-shadow:0 0 0 20px #ffffff47;transform:scale(1.05) translateY(-30%)}to{box-shadow:0 0 #cca92c00;transform:scale(1) translateY(-30%)}}.capture-container{display:flex;justify-content:center;width:100vw;height:60vh}.countdown{position:absolute;font-size:100px;transform:translate(-15%,100%);color:#fff;font-family:Arial,serif;animation:countdown 1s ease-in-out infinite;z-index:5}.screenshot{width:45%;height:110%;position:absolute;transform:translate(61%);top:0;left:0;z-index:100;background-color:#fff;animation:screenshot .5s forwards}@keyframes screenshot{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes countdown{0%{scale:1}50%{scale:1.3}to{scale:1}}.loader{width:80px;height:80px;transform:translateY(380%)}.loader:after{content:" ";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #000000;border-color:#000000 transparent #000000 transparent;animation:loading 1.2s linear infinite}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.polaroid{width:45%;height:110%;background-color:#fff;border:1px solid #eee;box-shadow:0 4px 6px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.text-container{display:flex;justify-content:center;width:100vw;height:45vh;position:fixed;top:0;z-index:88}.text-container-enter{transform:translateY(-30vh)}.text-container-enter-active{transform:translate(0);transition:all .2s linear}.text-container-enter-done{transform:translate(0);transition:all .25s linear}.text-container-exit{transition:all .2s linear}.text-container-exit-active{transform:translateY(-30vh);transition:all .25s linear}.text-container .idle{position:absolute;font-size:110px;color:#fff;z-index:100;font-family:Arial,serif;text-shadow:-2px 0px 0px black,2px 0px 0px black,0px -2px 0px black,0px 2px 0px black}
