@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@200;400;600&family=Rubik:wght@300;400;500&display=swap);@-webkit-keyframes bg{0%{background-position-x:0}to{background-position-x:10000px}}@keyframes bg{0%{background-position-x:0}to{background-position-x:10000px}}.App{-webkit-animation:bg 25s linear infinite;animation:bg 25s linear infinite;background-image:radial-gradient(#d0d0d0 .7px,#13171a 0);background:linear-gradient(90deg,#626c75 0,#181d23 25%,#13171a 50%,#181d23 75%,#626c75);background-size:10000px 100%;display:flex;overflow:hidden}.App #side-bar{align-items:center;-webkit-backdrop-filter:blur(5.7px);backdrop-filter:blur(5.7px);background:hsla(0,0%,100%,.05);border-right:1px solid hsla(0,0%,100%,.3);box-shadow:0 4px 30px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:30px;justify-content:center;padding:60px 20px;position:relative;width:200px}.App #side-bar h1{font-size:2.3rem;line-height:30px;text-align:center}.App #side-bar h1 span{display:block;font-size:.9rem;line-height:15px}.App #side-bar ul{align-items:center;display:flex;flex-direction:column;gap:18px;justify-content:center;width:100%}.App #side-bar ul li button{background-color:initial;border:2px solid hsla(0,0%,100%,.1);height:40px;width:150px}.App #side-bar ul li button:hover{box-shadow:inset 0 5px 5px rgba(28,28,28,.5);color:#fff;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.App #main{align-items:center;display:flex;flex-direction:column;height:100%;overflow-x:hidden;overflow-y:scroll;position:relative;width:100%}.App #main #hero-list{align-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:auto;padding:20px 10px;width:100%}.App #main #hero-list .hero-wrapper{flex:0 1 120px;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content}.App #main #hero-list .hero-wrapper .Hero{box-shadow:0 0 4px #000;cursor:pointer;display:flex;-webkit-filter:saturate(80%);filter:saturate(80%);overflow:hidden;position:relative;transition:.3s ease-in-out}.App #main #hero-list .hero-wrapper .Hero img{height:auto;object-fit:cover;-webkit-transform:scale(1.2);transform:scale(1.2);transition:.3s ease-in-out;width:100%}.App #main #hero-list .hero-wrapper .Hero p{bottom:5px;font-size:100%;left:5px;line-height:15px;opacity:0;position:absolute;text-shadow:0 2px 5px #000;-webkit-transform:translateX(50%);transform:translateX(50%)}.App #main #hero-list .hero-wrapper .Hero:hover{box-shadow:0 8px 8px #000;-webkit-filter:saturate(100%);filter:saturate(100%);-webkit-transform:scale(1.5);transform:scale(1.5);z-index:998}.App #main #hero-list .hero-wrapper .Hero:hover img{-webkit-filter:brightness(120%);filter:brightness(120%);-webkit-transform:scale(1);transform:scale(1)}.App #main #hero-list .hero-wrapper .Hero:hover p{opacity:100%;-webkit-transform:translateX(0);transform:translateX(0);z-index:999}.App #main #hero-list .hero-wrapper .Hero:hover:after{background:linear-gradient(0deg,#000,rgba(49,56,60,0) 77%,rgba(96,109,117,0));content:"";height:100%;left:0;position:absolute;top:0;width:100%}.App #main .foot-note{display:flex;flex-direction:column;gap:13px;margin-bottom:10px;margin-top:auto}.App #main .foot-note p{font-family:Kanit;font-size:.85rem;line-height:13px;opacity:80%;text-align:center}.App #main #about,.App #main #contact{align-items:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background-color:rgba(0,0,0,.65);border:1px solid hsla(0,0%,100%,.3);box-shadow:0 4px 30px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:10px;height:auto;left:25%;padding:30px;position:fixed;top:25%;width:50%;z-index:999}.App #main #about .head,.App #main #contact .head{font-size:.9rem}.App #main #about .body,.App #main #contact .body{font-size:.75rem;text-align:justify}.App #main #contact{gap:20px}.App #main #contact .body{display:flex;flex-direction:column;font-size:.9rem;gap:10px;text-align:center}.App #category-bar{-webkit-backdrop-filter:blur(5.7px);backdrop-filter:blur(5.7px);background:hsla(0,0%,100%,.05);border-left:1px solid hsla(0,0%,100%,.3);height:100%;min-width:180px;padding-left:5px}.App #category-bar .categories{height:100%;overflow-x:hidden;overflow-y:scroll;padding:20px 0}.App #category-bar .categories div{align-items:center;display:flex;flex-direction:column;gap:14px}.App #category-bar .categories div p{border:2px solid hsla(0,0%,100%,.1);border-radius:3px;cursor:pointer;font-size:1rem;font-weight:500;height:auto;line-height:auto;margin-bottom:5px;padding:15px 25px;position:relative;text-align:right;width:100%}.App #category-bar .categories div p:hover{box-shadow:inset 0 5px 5px rgba(28,28,28,.5);color:#fff;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.App #category-bar .categories div p:hover .icon{top:60%}.App #category-bar .categories div p .icon{left:10px;position:absolute;top:35%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.App #category-bar .categories div p span{display:block;font-size:.8rem}.App #category-bar .categories div .active{background-color:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.5);color:#fff}.App #category-bar .categories div .active .icon{top:60%;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.App #category-bar .categories div:hover li{opacity:70%}.App #category-bar .categories div li{cursor:pointer;font-size:.9rem;line-height:14px;text-align:center;transition:.1s ease-in-out;width:80%}.App #category-bar .categories div li:hover{color:#fff;opacity:100%;text-shadow:0 3px 3px #242424;-webkit-transform:scale(1.4)!important;transform:scale(1.4)!important}.App #category-bar .categories div .selected{background-color:hsla(0,0%,100%,.1);font-weight:500;opacity:1!important;position:relative}.App #category-bar .categories div .selected:after{background-color:#fff;bottom:-1px;content:"";height:1px;left:0;position:absolute;width:100%}.App #category-bar .categories div li:last-child{margin-bottom:30px}.App #category-display{background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.502) 52%,transparent);bottom:0;height:100px;left:190px;min-width:200px;opacity:60%;padding:10px;pointer-events:none;position:absolute;width:50vw}.App #category-display ul{-webkit-column-gap:12px;column-gap:12px;display:flex;flex-direction:column;flex-wrap:wrap;height:80%}.App #category-display ul,.App #category-display ul li{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}.App #category-display ul li{font-size:.75rem}@media only screen and (max-width:768px){::-webkit-scrollbar{width:5px}.App{display:grid;grid-template-areas:"nav nav" "hero categories";grid-template-columns:70% 30%;grid-template-rows:70px calc(100% - 70px)}.App #side-bar{flex-direction:row;grid-area:nav;padding:10px 30px;width:100%}.App #side-bar ul{flex-direction:row;justify-content:flex-end}.App #side-bar ul li button{width:100px}.App #main{grid-area:hero;width:auto}.App #main #hero-list .hero-wrapper{flex:0 1 90px;min-width:100px}.App #main #about,.App #main #contact{left:15%;top:10%;width:70%}.App #category-bar{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:none;box-shadow:none;grid-area:categories;min-width:0;padding-bottom:15px;padding-left:0;width:100%}.App #category-bar .categories{padding:0;width:100%}.App #category-bar .categories div p{font-weight:bolder}.App #category-bar .categories div li,.App #category-bar .categories div p{font-size:.8em}.App #category-display{left:0}}@media only screen and (max-width:390px){.App #main #hero-list{gap:5px}.App #main #about .body,.App #main #contact .body{font-size:.6rem}.App #main #about .body{text-align:left}}@font-face{font-family:Trajan;src:url(/static/media/Trajan%20Bold.93c9354413651070096a.ttf) format("truetype")}:root{--black:#111010;--white:#d3d3d3}*{box-sizing:border-box;color:#d3d3d3;color:var(--white);list-style:none;margin:0;padding:0;transition:.3s ease-in-out;-webkit-user-select:none;user-select:none}#root,.App,body,html{height:100%;overflow:hidden}a,button,h1,h2,h5,li,p{font-family:Trajan,sans-serif}button{cursor:pointer}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background-color:initial}::-webkit-scrollbar-thumb{background-color:#d3d3d3;background-color:var(--white)}.loading-screen{align-items:center;background-color:#000;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;margin:auto;opacity:.8;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%;z-index:999}.loading-desc{padding:0 50px;text-align:center}.loading-screen h1{font-size:2.5rem}.lds-facebook{display:inline-block;height:80px;position:relative;width:80px}.lds-facebook div{-webkit-animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite;background:#fff;display:inline-block;left:8px;position:absolute;width:16px}.lds-facebook div:first-child{-webkit-animation-delay:-.24s;animation-delay:-.24s;left:8px}.lds-facebook div:nth-child(2){-webkit-animation-delay:-.12s;animation-delay:-.12s;left:32px}.lds-facebook div:nth-child(3){-webkit-animation-delay:0;animation-delay:0;left:56px}@-webkit-keyframes lds-facebook{0%{height:64px;top:8px}50%,to{height:32px;top:24px}}@keyframes lds-facebook{0%{height:64px;top:8px}50%,to{height:32px;top:24px}}
/*# sourceMappingURL=main.499ae439.css.map*/