@import"https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.webcam{position:absolute;right:0;top:0;text-align:center;z-index:9;width:50vw;height:100vh;object-fit:cover;filter:grayscale(100%);transform:scaleX(-1)}.canvas{position:absolute;right:0;top:0;text-align:center;z-index:10;width:50vw;height:100vh;transform:scaleX(-1);background-color:#0006;pointer-events:none}.textContainer{position:absolute;z-index:20;left:0;width:50vw;height:100vh;background-color:#000c;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow-y:auto}.navbar{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;font-family:nanum gothic coding;font-size:23px;letter-spacing:10px;color:#fff;padding-top:5%}.signs-container{width:96%;height:auto;margin-top:3%;display:grid;grid-template-columns:repeat(9,1fr);grid-auto-rows:9vw}@media screen and (max-width:1200px){.signs-container{grid-template-columns:repeat(7,1fr)}}@media screen and (max-width:1000px){.signs-container{grid-template-columns:repeat(6,1fr)}}.sign-tile{display:flex;align-items:center;justify-content:center;background-color:#000000e6;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border-radius:7px;margin:10px;padding:10% 5%;transition:all .2s ease-in-out}.sign-tile:hover{background-color:#ffffff08;box-shadow:0 0 15px #ffffff1a}.sign-img{width:100%;height:100%;object-fit:contain;filter:invert(1);opacity:.5;transition:all .2s ease-in-out}.sign-img:hover,.sign-img.active{opacity:.9;transform:scale(1.1)}.show-text-container{width:85%;height:30%;background-color:#ffffff0d;bottom:0;display:flex;align-items:center;justify-content:center;margin-bottom:3%;border-radius:20px;border:1px solid rgba(255,255,255,.08)}.text{font-size:100px;font-weight:600;color:#fff}.developer-elements{position:absolute;bottom:0;right:0;z-index:30;display:flex;flex-direction:row;align-items:center;color:#fff;padding:3px 15px;font-size:12px;background-color:#0000004d;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);border-radius:5px 0 0 5px}.icon-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;text-decoration:none}.icon{width:20px;height:20px;padding:6px;border-radius:5px}.icon:hover{background-color:#1b1b1b33}.window_sizes{position:absolute;top:0;right:0;z-index:30;background-color:#0006;color:#fff}@media screen and (max-width:850px){.App{flex-direction:column;align-items:center}.webcam{width:100vw;height:50vh;bottom:0;left:0;top:auto;z-index:9}.canvas{width:100vw;height:50vh;bottom:0;left:0;top:auto;z-index:15}.textContainer{width:100vw;height:50vh;top:0;left:0;z-index:20;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.navbar{position:absolute;top:0;right:20px;width:auto;font-size:3vw}.show-text-container{width:70vw;height:50%;margin:2%}.signs-container{grid-template-columns:repeat(7,1fr);grid-auto-rows:11vw;padding:2%}.sign-tile{margin:5px;border:1px solid white}@media screen and (max-width:700px){.signs-container{grid-template-columns:repeat(6,1fr);grid-auto-rows:12vw}}@media screen and (max-width:550px){.signs-container{grid-template-columns:repeat(5,1fr);grid-auto-rows:12vw}}}.App{display:flex;align-items:center;width:100vw;height:100vh;background-color:#000}