@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";.container{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.photoContainer{width:300px;position:relative;display:inline-block;justify-content:center;align-items:center;overflow:hidden}.discount{position:absolute;top:65px;left:65px;width:35%;height:35%;animation:spin 1s steps(1,end) infinite}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(10deg)}to{transform:rotate(0)}}.Khoa{position:absolute;top:6px;left:-10px;width:30%;height:30%;animation:spin 1s steps(1,end) infinite}.Rachel{position:absolute;top:-5px;right:-15px;width:35%;height:35%;animation:spin 1s steps(1,end) infinite}.curtain{position:absolute;top:94px;right:-11px;width:45%;height:45%;transition:transform .5s ease-in-out;transform:translate(0)}.photoButton{position:absolute;top:235px;left:20px;width:30%;cursor:pointer}.photoButton:hover~.curtain{transform:translate(50%)}@media screen and (max-width: 430px){.photoContainer{width:200px}.curtain{top:63px}.discount{top:45px;left:45px}.photoButton{top:157px;left:13px}}.secondContainer{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.innerContainer{width:70%;height:70%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.instruction,.boothFrame{width:400px;display:flex;justify-content:center;align-items:center}.bottomRow{width:400px;display:flex;justify-content:start;align-items:center}.outputContainer{position:relative;width:100%;margin-right:10px}.outputRow{width:100%}.strip{position:absolute;top:45px;left:40px;width:8%;opacity:0;will-change:transform,opacity;cursor:pointer}.strip.animate{animation:stripFadeSlide .8s ease-out forwards}.strip2{position:absolute;top:45px;left:40px;width:8%;opacity:0;will-change:transform,opacity;cursor:pointer}.strip2.animate{animation:stripFadeSlide2 .8s ease-out forwards;animation-delay:1s}.strip2:hover{width:9%;left:35px;top:42px}@keyframes stripFadeSlide{0%{opacity:0;transform:translateY(-20%)}90%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translate(15%) rotate(-15deg)}}@keyframes stripFadeSlide2{0%{opacity:0;transform:translateY(-30%)}90%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translate(15%) rotate(-5deg)}}.buttonPressContainer{position:relative;width:20%;height:90%;background-color:#fff;border:8px solid #ffffff;animation:wiggleBox .6s steps(1,end) infinite;transform-origin:center;border-radius:255px 15px 225px/15px 225px 15px 255px;margin-right:10px}.boothFrameContainer{position:relative}@keyframes wiggleBox{0%,to{transform:rotate(0)}50%{transform:rotate(2deg)}}.cameraContainer,.bigg-ahh-rec{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:140px;width:210px;background-color:#fff}.photoFrame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:150px;width:220px;z-index:99}.cameraContainer{transform-origin:center}.bigg-ahh-rec{z-index:80}.flash{animation:flashTwice .8s ease-in-out forwards}@keyframes flashTwice{0%{background:#fff;opacity:1}25%{background:transparent;opacity:0}50%{background:#fff;opacity:1}to{background:transparent;opacity:0}}.countDown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:50px;color:#fff;font-weight:900}.pre-photo{width:85px;border:"4px solid #fff";animation:morphBorder 1s steps(1,end) infinite}.pre-photo:nth-child(1){animation-delay:0s}.pre-photo:nth-child(2){animation-delay:.25s}.pre-photo:nth-child(3){animation-delay:.5s}.pre-photo:nth-child(4){animation-delay:.75s}@media screen and (max-width: 430px){.instruction,.boothFrame,.bottomRow{width:300px}.cameraContainer,.bigg-ahh-rec{height:100px;width:150px}.photoFrame{height:110px;width:156px}.strip,.strip2{top:33px;left:30px}.strip2:hover{width:9%;left:27px;top:30px}.pre-photo{width:60px;border:"3px solid #fff";animation:morphBorder 1s steps(1,end) infinite}}@keyframes morphBorder{0%{border-radius:255px 15px 225px/15px 225px 15px 255px}50%{border-radius:15px 255px 15px 225px/225px 15px 255px}to{border-radius:255px 15px 225px/15px 225px 15px 255px}}.frame{cursor:pointer;-webkit-user-select:none;user-select:none;background:transparent;border:0;padding:0;line-height:0;position:absolute;width:150%;top:-50px;left:3px}@media screen and (max-width: 430px){.frame{top:-36px;left:3px}}.psm-backdrop{position:fixed;inset:0;background:#00000080;display:grid;place-items:center;z-index:1000;animation:psmFade .28s ease-out both;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:20px;padding-bottom:20px}.psm-strip-container{position:relative;width:500px;display:flex;justify-content:center;align-items:center}.psm-strip-button{position:absolute;top:0;right:0;width:45px;height:45px;color:#fff;background-color:#000;border-radius:100px;font-size:25px;border-width:0px;z-index:99;transition:all .1s;cursor:pointer;margin-right:20px;box-shadow:0 4px 10px #0000004d}.psm-strip-button:hover{background-color:#fff;color:#000;width:100px}.psm-strip-button:after{content:"＋";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}.psm-strip-button:active{transform:scale(.9) translateY(2px);box-shadow:0 1px #0003}.psm-strip-button:hover:after{content:"Filter";font-size:18px;font-weight:600}.psm-strip-button.psm-clicked:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}.psm-strip-button.psm-clicked:hover:after{content:"Close";font-size:18px;font-weight:600}.psm-strip{position:relative;width:200px;height:600px;transform:rotate(-5deg);transition:transform .3s ease;padding:10px;gap:5px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.psm-strip-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}.psm-img{width:100%;aspect-ratio:3 / 2;background-repeat:no-repeat;background-size:contain;object-fit:contain}.psm-strip:hover{transform:scale(.95) translateY(6px) rotate(-10deg)}.filterContainer{position:relative;width:40%;height:200px;margin:40px 0;padding:10px 20px;animation:psmStagger .35s ease-out both;background-color:#fff;border:solid 5px black}.frameContainer{display:flex;justify-content:start;align-items:center}.psm-frame{margin:2px 5px;border-radius:50%;border:solid 2px black;width:40px;height:40px;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center}.psm-frame:nth-child(1){margin-left:0}.psm-frame:hover{border:solid 4px black}.active-frame{border:2px solid dodgerblue;box-shadow:0 0 8px #1e90ff99}.uploadIcon{font-size:25}.psm-actions{display:flex;gap:12px;justify-content:center;align-items:center}.psm-btn{border:solid 8px #000000;padding:20px 30px;cursor:pointer;font-family:Roboto,sans-serif;font-weight:900;font-size:20px;background-color:#e5e7ebbc;color:#000;background:#000;transition:transform .1s ease,box-shadow .1s ease!important;color:#fff}.psm-btn:active{transform:scale(.9)!important;box-shadow:0 1px #0003!important}.psm-btn:hover{background:#202123}.psm-btn:disabled{opacity:.6;cursor:not-allowed}.psm-btn.psm-secondary{color:#000;background:#d1d5db8f}.psm-btn.psm-secondary:hover{color:#000;background:#ffffffda}.psm-actions .psm-btn{animation:psmStagger .35s ease-out both}.psm-actions .psm-btn:nth-child(1){animation-delay:.24s}.psm-actions .psm-btn:nth-child(2){animation-delay:.32s}.psm-actions .psm-btn:nth-child(3){animation-delay:.42s}@keyframes psm-pop{0%{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes psmFade{0%{opacity:0}to{opacity:1}}@keyframes psmPop{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes psmRise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes psmStagger{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){.psm-backdrop,.psm-img,.psm-actions,.psm-actions .psm-btn{animation:none!important}}@media screen and (max-width: 768px),screen and (max-height: 600px){.psm-btn{border:solid 5px #000000;padding:12px 17px}.psm-strip{width:150px;height:450px}.psm-strip-container{width:400px}.psm-strip{padding:7.5px;gap:4px}}@media screen and (max-width: 768px){.filterContainer{width:70%}}@media screen and (max-width: 430px){.psm-btn{border:solid 3px #000000;padding:8px 13px;font-size:15px}.psm-strip-container{width:300px}.psm-strip{padding:7px;gap:3px}.psm-strip-button{width:40px;height:40px;font-size:20px}.filterContainer{width:80%}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:Roboto,sans-serif;font-size:1.4rem;font-weight:400;line-height:1.43}
