body{background-color:#0a0808;margin:0;animation:1s ease-in-out popIn;top:0;left:0;overflow:hidden}@keyframes popIn{0%{opacity:0}to{opacity:1}}.app{width:100vw;height:100dvh;position:relative;overflow:hidden}#RoomBG{z-index:-10;background-image:url(/PortfolioYuko-React/assets/RoomBG-vWRmAZ7A.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomBED{z-index:-9;background-image:url(/PortfolioYuko-React/assets/RoomBED-ChliROls.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomCHAR{z-index:-8;background-image:url(/PortfolioYuko-React/assets/RoomCHAR-CKwAayyD.gif);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomFILTER{z-index:-7;mix-blend-mode:multiply;background-image:url(/PortfolioYuko-React/assets/RoomFILTER-qipvyK1B.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:all .3s ease-in-out;position:absolute}#RoomLIGHT1{z-index:-6;mix-blend-mode:color-dodge;opacity:1;filter:brightness()saturate();background-image:url(/PortfolioYuko-React/assets/RoomLIGHT1-CT9y1Lia.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomLIGHT2{z-index:-5;mix-blend-mode:color-dodge;opacity:1;filter:brightness(.8)saturate();background-image:url(/PortfolioYuko-React/assets/RoomLIGHT2-BbVZsW0Z.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomHIDE{z-index:-1;background-image:url(/PortfolioYuko-React/assets/RoomHIDE-C59QdRKC.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomPARTICLES{z-index:-3;mix-blend-mode:color-dodge;filter:brightness(.8)saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/RoomPARTICLES-DgMSz9rv.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomPLANTS{z-index:-8;background-image:url(/PortfolioYuko-React/assets/RoomPLANTS-DkgowL12.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}@keyframes lightPulse{0%,to{opacity:.8}50%{opacity:1}}#RoomLIGHT1,#RoomLIGHT2{animation:3s ease-in-out infinite alternate lightPulse}.NavTab{will-change:transform;pointer-events:auto;z-index:100;flex-direction:column;justify-content:center;align-items:end;gap:80px;width:50%;height:100%;display:flex;position:fixed;top:0;right:20px}.NavTab a{text-decoration:none}.NavButton{cursor:pointer;width:850px;height:250px;transform-style:preserve-3d;color:#dfba9b;-webkit-user-select:none;user-select:none;cursor:pointer;background-image:url(/PortfolioYuko-React/assets/TAB-Ds8RuA7s.png);background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;font-size:100px;text-decoration:none;transition:transform .3s ease-in-out;display:flex}.NavButton:hover{color:#d67b64}.First{transition:all .3s ease-in-out;transform:perspective(1000px)rotateY(-30deg)rotate(-10deg)}.Second{transition:all .3s ease-in-out;transform:perspective(1000px)rotateY(-30deg)rotate(2deg)}.Third{transition:all .3s ease-in-out;transform:perspective(1000px)rotateY(-30deg)rotate(10deg)}.First:hover{margin-right:50px;transform:perspective(1000px)rotateY(-30deg)rotate(-11deg)translate(-20px);box-shadow:20px 10px #d67b6480}.Second:hover{margin-right:50px;transform:perspective(1000px)rotateY(-30deg)rotate(3deg)translate(-20px);box-shadow:20px 10px #d67b6480}.Third:hover{margin-right:50px;transform:perspective(1000px)rotateY(-30deg)rotate(11deg)translate(-20px);box-shadow:20px 10px #d67b6480}.NavIcon{opacity:0;width:150px;height:150px;margin-left:20px;transition:all .2s ease-in-out;position:absolute;top:-60px;left:-140px;transform:rotate(-15deg)scale(.1)}.NavButton:hover .NavIcon{opacity:1;transform:rotate(-15deg)scale(1)}.transition-overlay{opacity:0;pointer-events:none;z-index:9999;background:#0a0808;width:100%;height:100%;transition:transform .8s,opacity .8s;position:fixed;top:0;left:0}.transition-overlay.active{opacity:1}#devMsg{color:#fff;text-align:center;margin-top:200px;font-size:24px}#devMsg2{color:#ffffff36;text-align:center;margin-top:20px;font-size:18px}#ResponsiveMsg{display:none}@media (width<=900px) and (orientation:portrait){#ResponsiveMsg{color:#fff;z-index:9999;background-color:#0a0808;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;font-size:24px;display:flex;position:absolute;top:0;left:0}}@media (width<=1000px) and (orientation:landscape){.NavButton{width:60vw;height:18vw;font-size:7vw}.NavTab{gap:40px;right:10px}.NavIcon{width:80px;height:80px;top:-30px;left:-80px}}#FilterBTN{cursor:pointer;z-index:999;background:0 0;border:none;font-size:30px;transition:all .3s ease-in-out;position:absolute;top:15px;right:70px}*{box-sizing:border-box;font-family:Iosevka Charon Mono,sans-serif}body{margin:0;position:absolute;top:0;left:0;overflow:hidden}.page{opacity:1;flex-direction:column;width:100vw;height:100vh;transition:opacity .5s ease-in-out;display:flex;position:relative;overflow:hidden}.page.fade-exit{opacity:0}.background{z-index:1;transition:transform .15s ease-out;position:absolute;inset:-40px}.sky-blue-background{z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.page-image{max-width:80%;margin-top:20px}.sound-button{cursor:pointer;z-index:999;background:0 0;border:none;position:absolute;top:20px;right:20px}.sound-button img{width:32px;height:32px}.filter-button img{width:40px;height:40px}#WorkshopBG{z-index:-10;background-image:url(/PortfolioYuko-React/assets/WorkshopBG-C0npPcgY.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopBOOK{z-index:-9;background-image:url(/PortfolioYuko-React/assets/WorkshopBOOK-CO3zg7Gh.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopPC{z-index:-8;background-image:url(/PortfolioYuko-React/assets/WorkshopPC-C3k-brOt.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopCANVA{z-index:-7;background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA-D6I_cTS0.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopCANVA2{z-index:-7;background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA2-Dn6EtCcf.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopCANVA3{z-index:-7;background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA3-BTdhF-nE.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#RoomFILTER{z-index:-6;opacity:.6;mix-blend-mode:multiply;pointer-events:none;background-image:url(/PortfolioYuko-React/assets/RoomFILTER-qipvyK1B.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopLIGHT1{z-index:-5;mix-blend-mode:color-dodge;opacity:1;filter:brightness()saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/WorkshopLIGHT1-C8X_Vyof.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopLIGHT2{z-index:-4;mix-blend-mode:color-dodge;opacity:1;filter:brightness(.8)saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/WorkshopLIGHT2-C1bY0g7l.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopPARTICLES{z-index:-3;mix-blend-mode:color-dodge;opacity:1;filter:brightness(.8)saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/WorkshopPARTICLES-Ck5rhas-.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#WorkshopHIDE{z-index:-1;pointer-events:none;background-image:url(/PortfolioYuko-React/assets/WorkshopHIDE-Vn-9uhm_.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#CreditsBG{z-index:-10;background-image:url(/PortfolioYuko-React/assets/CreditsBG-pctrMsFP.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#CreditsLIGHT1{z-index:-6;mix-blend-mode:color-dodge;opacity:1;filter:brightness()saturate();background-image:url(/PortfolioYuko-React/assets/CreditsLIGHT1-BTGyAnq1.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#CreditsLIGHT2{z-index:-5;mix-blend-mode:color-dodge;opacity:1;filter:brightness(.8)saturate();background-image:url(/PortfolioYuko-React/assets/CreditsLIGHT2-BgMdfoAR.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#CreditsPARTICLES{z-index:-4;mix-blend-mode:color-dodge;opacity:1;filter:brightness(.8)saturate();background-image:url(/PortfolioYuko-React/assets/CreditsPARTICLES-BamgsYLP.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#CreditsHIDE{pointer-events:none;background-image:url(/PortfolioYuko-React/assets/CreditsHIDE-0mW7m6TS.png);background-size:cover;width:100%;height:100%}#CreditsPAPER{z-index:-9;width:1000px;height:630px;transform-style:preserve-3d;pointer-events:none;background-image:url(/PortfolioYuko-React/assets/CreditsPAPER-BB6R9HHl.png);background-repeat:no-repeat;background-size:cover;padding:20px;position:absolute;top:150px;left:400px;transform:perspective(1000px)rotateY(-5deg)rotate(3deg)}#CreditsContent{color:#422522;text-align:left;z-index:5;pointer-events:auto;border-radius:10px;padding:20px;font-size:24px;position:relative}#CreditsContent a{color:#422522;text-decoration:none;transition:all .2s ease-in-out}#CreditsContent a:hover{font-weight:700}#ProfileBG{z-index:-10;background-image:url(/PortfolioYuko-React/assets/ProfileBG-CYgX7aWf.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#ProfileBoard{z-index:-9;background-image:url(/PortfolioYuko-React/assets/ProfileBoard-C5WzZkQB.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#ProfileLIGHT1{z-index:-6;mix-blend-mode:color-dodge;opacity:1;filter:brightness()saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/ProfileLIGHT1-j2Qlqhtu.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#ProfileLIGHT2{z-index:-5;mix-blend-mode:color-dodge;opacity:.4;filter:brightness(.8)saturate();pointer-events:none;background-image:url(/PortfolioYuko-React/assets/ProfileLIGHT2-DRm8f7rv.png);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}#ProfileLIGHT1,#ProfileLIGHT2,#RoomFILTER,#CreditsHIDE,#RoomPARTICLES,.background div{pointer-events:none}#BoardContent,#BoardContent *{pointer-events:auto}#BoardContent{z-index:-7;color:#251614;background-repeat:no-repeat;background-size:cover;width:70%;height:70%;padding:50px;position:absolute;top:6.8%;left:15%}#BoardContent h1{text-align:center;margin-bottom:20px;font-size:36px}#BoardContent p{font-size:24px;line-height:1.5}.near-picture{max-width:1000px;margin:0 auto;position:relative;left:10%}#SocialsLinks{justify-content:start;gap:40px;margin-top:20px;display:flex}#SocialsLinks a{color:inherit;font-size:24px;text-decoration:none;transition:all .1s ease-in-out}#SocialsLinks a:hover{font-weight:700}#SkillsBoard{justify-content:start;gap:10px;height:auto;margin:0;padding:0;display:flex}#SkillsBoard p{color:#422522;background-color:#68573898;border-radius:5px;margin:0;padding:5px 10px;font-size:1.1rem}.back-button{color:#fff;cursor:pointer;z-index:999;background:0 0;border:none;font-size:40px;transition:transform .2s;position:absolute;top:20px;left:20px}.back-button:hover{transform:scale(1.2)}.canvas-wrapper{pointer-events:none;z-index:-6;width:100%;height:100%;position:absolute;overflow:visible}.canvas{background-repeat:no-repeat;background-size:cover;width:100%;height:100%;transition:transform .3s ease-in-out;position:absolute;top:0;left:0}#WorkshopCANVA{background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA-D6I_cTS0.png)}#WorkshopCANVA2{background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA2-Dn6EtCcf.png)}#WorkshopCANVA3{background-image:url(/PortfolioYuko-React/assets/WorkshopCANVA3-BTdhF-nE.png)}.left-button,.right-button{color:#fff;cursor:pointer;z-index:1000;background:0 0;border:none;font-size:40px;position:absolute;top:50%;transform:translateY(-50%)}.left-button{transition:all .2s ease-in-out;left:40px;transform:perspective(100px)rotateY(5deg)rotate(6deg)}.right-button{transition:all .2s ease-in-out;right:40px;transform:perspective(100px)rotateY(-5deg)rotate(-6deg)}.left-button:hover,.right-button:hover{color:#d67b64}.left-button:hover{transform:perspective(100px)rotateY(-5deg)rotate(-7deg)scale(1.5)}.right-button:hover{transform:perspective(100px)rotateY(5deg)rotate(7deg)scale(1.5)}.see-button{color:#dfba9b;cursor:pointer;z-index:1000;background:url(/PortfolioYuko-React/assets/TAB-Ds8RuA7s.png) 0 0/cover no-repeat;border:0 solid #fff;justify-content:center;align-items:center;width:150px;padding:10px 20px;font-size:24px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:40px;left:50%;transform:perspective(100px)rotateY(-5deg)rotate(-6deg)translate(-50%)}.see-button:hover{color:#d67b64;transform:translate(-50%)perspective(100px)rotateY(-5deg)rotate(-7deg);box-shadow:5px 5px #d67b6480}@media (width<=1000px){#BoardContent{transform-origin:0 0;box-sizing:border-box;width:auto;max-width:80%;height:auto;line-height:0;top:5%;left:12%;transform:scale(.5)}#BoardContent h1{margin-bottom:15px;font-size:20px}#BoardContent p,#SkillsBoard p,#SocialsLinks a{font-size:12px}.near-picture{max-width:75%;left:6%}#SkillsBoard{flex-wrap:wrap;gap:2px}#SocialsLinks{flex-wrap:wrap;gap:20px}.see-button{width:120px;padding:8px 15px;font-size:20px}.back-button{font-size:32px}#CreditsPAPER{z-index:-9;width:50%;height:75%;transform-style:preserve-3d;pointer-events:none;background-image:url(/PortfolioYuko-React/assets/CreditsPAPER-BB6R9HHl.png);background-repeat:no-repeat;background-size:100% 100%;padding:20px;font-size:10px;position:absolute;top:15%;left:25%;transform:perspective(1000px)rotateY(-5deg)rotate(3deg)}#CreditsPAPER #CreditsContent{color:#422522;text-align:left;z-index:5;pointer-events:auto;border-radius:10px;padding:20px;font-size:12px;position:relative}#CreditsPAPER #CreditsContent a{color:#422522;text-decoration:none;transition:all .2s ease-in-out}#CreditsPAPER #CreditsContent a:hover{font-weight:700}}@media (width<=700px){#BoardContent{transform-origin:0 0;box-sizing:border-box;width:auto;max-width:95%;height:auto;line-height:0;top:2%;left:13%;transform:scale(.5)}#BoardContent h1{margin-bottom:15px;font-size:20px}#BoardContent p,#SkillsBoard p,#SocialsLinks a{font-size:10px}.near-picture{max-width:75%;left:6%}#SkillsBoard{flex-wrap:wrap;gap:2px}#SocialsLinks{flex-wrap:wrap;gap:20px}.see-button{width:120px;padding:8px 15px;font-size:20px}.back-button{font-size:32px}}*{-webkit-user-select:none;user-select:none}.modal-overlay{z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000062;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.book-modal{box-sizing:border-box;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:relative}.book-content{background-image:url(/PortfolioYuko-React/assets/WorkShopBookModal-CV2m3WBa.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;flex-direction:column;justify-content:center;align-items:center;width:80%;height:80%;display:flex;position:relative;transform:perspective(1300px)rotateY(-5deg)rotate(5deg)rotateX(5deg)}.book-page{box-sizing:border-box;flex:1;justify-content:space-between;align-items:center;width:100%;height:80%;padding-left:35px;padding-right:35px;font-size:20px;display:flex;position:absolute;top:5%}.page-left,.page-right{justify-content:center;align-items:center;width:50%;height:100%;display:flex}.page-left{border-right:2px solid #42252233}.picture{object-fit:contain;cursor:zoom-in;border:10px solid #fff;border-bottom-width:30px;max-width:80%;max-height:80%;transition:all .3s ease-in-out;box-shadow:10px 10px #42252242}.page-right .picture:hover{transform:perspective(300px)rotateY(-5deg)rotate(-5deg)scale(1.05)translate(-10px)}.page-left .picture:hover{transform:perspective(300px)rotateY(5deg)rotate(-5deg)scale(1.05)translate(10px)}.book-controls{justify-content:space-between;align-items:center;width:85%;display:flex;position:absolute;bottom:15%}.close-button{cursor:pointer;color:#422522;z-index:1000;background:0 0;border:none;font-size:24px;position:absolute;top:5%;right:5%}.ArrowBTN{cursor:pointer;color:#422522;background:0 0;border:none;font-size:24px}#pageNum{color:#422522;font-size:18px;position:absolute;bottom:10%;left:5%}.image-zoom-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:5000;cursor:zoom-out;background:#141212e6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.image-zoomed{object-fit:contain;border:10px solid #fff;border-bottom-width:30px;max-width:90%;max-height:90%;box-shadow:10px 10px #00000025}video.picture{object-fit:contain;max-width:80%;max-height:80%}