@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";:root{--black-transparent-color:hsla(0, 0%, 0%, .3);--dark-blue-color:#001064;--blue-color:#0049D3;--white-color:white;--black-color:#0D0D0D}html,body{margin:0;padding:0}*{font-family:Kanit;color:var(--white-color);padding:0;margin:0;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{display:none}.linear-gradient,canvas,#container-search,#container-visualizer,.start-layer{position:absolute;width:100vw;height:100svh}body,#container-visualizer,canvas,.linear-gradient,.start-layer,#container-search{max-height:100svh;overflow:hidden}.linear-gradient{background:linear-gradient(180deg,var(--blue-color) 0%,var(--dark-blue-color) 100%)}#countries-suggestions::-webkit-scrollbar{width:10px;background-color:#ffffff1a;border-radius:100px}#countries-suggestions::-webkit-scrollbar-thumb{min-height:100px;border-radius:200px;background-color:#ffffff1a;transition:all 5s}#countries-suggestions::-webkit-scrollbar-thumb:hover{background-color:#fff}ul li{list-style:none}canvas{animation-duration:2s;z-index:0}.delay-for-start{animation-delay:1.5s}#container-visualizer .details,form,#container-visualizer .cross{animation-duration:1s}canvas{animation-name:appear-from-bottom}#container-visualizer .cross{animation-name:appear-from-top}#container-visualizer .details,form{animation-name:appear-from-right}@keyframes appear-from-bottom{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes appear-from-top{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes appear-from-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.display-none{display:none!important}h1{color:#fff;font-size:52px}.slogan{font-size:34px;font-weight:200;margin-top:-20px}p.copyrights{position:absolute;bottom:50px;width:100%;text-align:center;font-size:18px;z-index:3}#container-search{left:0;top:0;display:flex;align-items:start;justify-content:end;padding-right:150px;padding-top:100px;box-sizing:border-box;z-index:3}#container-search .container{max-width:fit-content}form div.row{margin-top:20px;display:flex;position:relative;align-items:center}form input{background-color:var(--black-transparent-color);border:none;padding:20px;border-radius:100px;width:100%;font-size:16px;transform:scale(1);transition:transform .2s}form input::placeholder{color:#ffffff80}form input:focus{transform:scale(1.01);outline:solid 1px white}form button{background-color:transparent;border:none;position:absolute;right:20px;transition:all .3s}form input:focus+button{right:18px}#countries-suggestions{background-color:var(--black-transparent-color);padding-inline:40px;padding-block:20px;border-radius:30px;margin-top:20px;max-height:300px;overflow-y:scroll;overflow-x:hidden;position:relative}#countries-suggestions:after{content:"";display:block;width:calc(100% + 80px);height:100px;position:sticky;left:0;bottom:0;background:linear-gradient(transparent,var(--dark-blue-color) 80%);transform:translate(-40px,20px)}#countries-suggestions li{padding:10px;border-radius:100px;transition:all .2s;cursor:pointer}#countries-suggestions li:hover{background-color:var(--blue-color)}#container-visualizer{box-sizing:border-box;z-index:2;padding:50px;display:flex;flex-direction:column}#container-visualizer .top{display:flex;justify-content:space-between}#container-visualizer p.title{font-size:32px;text-transform:uppercase;font-weight:bolder}#container-visualizer .cross{background-color:var(--black-transparent-color);padding:20px;border-radius:100px;transition:all .3s}#container-visualizer .cross:hover{background-color:var(--dark-blue-color)}#container-visualizer .details{background-color:var(--black-transparent-color);border-radius:40px;width:fit-content;padding:20px 40px;display:flex;flex-direction:column;align-self:end;margin-top:20px}#container-visualizer .details h3{font-size:32px;text-transform:uppercase;font-weight:bolder}#container-visualizer .details .all-data{display:grid;grid-template-columns:1fr 1fr;gap:40px}#container-visualizer .details .all-data ul{min-width:200px;max-width:300px}#container-visualizer .details .all-data ul li{margin-top:10px;max-width:100%}#container-visualizer .details .all-data ul li h4{font-size:24px;font-weight:700}#container-visualizer .details .all-data ul li p{margin-top:5px;font-size:20px}#error{position:absolute;z-index:3;top:10px;left:10px;background-color:#fff;padding:15px;min-width:200px;border-top:solid 5px #CC0000}#error .top{display:flex;justify-content:space-between}#error span{padding-inline:11px;border-radius:100px;position:absolute;right:10px;top:10px}#error span:hover{background-color:#d0d0d0}#error h2{font-size:20px}#error span{font-size:24px}#error p,#error h2,#error span,#error a{color:var(--dark-blue-color)}#place-pointer{position:absolute;left:calc(50% - 325px);top:calc(50% - 80px);animation-name:pointer-animation;animation-duration:.5s;animation-delay:1.5s;opacity:0;animation-fill-mode:forwards;display:flex;flex-direction:column;align-items:center;width:50px}#place-pointer .pointer{width:100%;z-index:4;margin-bottom:-10px}#place-pointer .ellipse{width:50%}@keyframes pointer-animation{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}#container-visualizer ul li .value{overflow-x:scroll;padding-block:5px}.start-layer{background-color:#002f86;z-index:100;display:flex;align-items:center;justify-content:center;gap:20px;animation-name:start-layer-animation;animation-duration:3s;animation-fill-mode:forwards}@keyframes start-layer-animation{0%{opacity:1}50%{opacity:1}to{opacity:0;display:none}}.start-layer p{font-size:40px;font-weight:800}.start-layer .load{width:40px;animation-name:load-animation;animation-duration:1.2s;animation-iteration-count:infinite}@keyframes load-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:1024px){#container-search{padding:10px;justify-content:center}#container-search h1,#container-search p.slogan{text-align:center}#container-search h1{font-size:36px}#container-search p.slogan{font-size:32px}#container-search .container{width:fit-content;min-width:500px}#container-search form div.row{margin-top:10px}#container-visualizer{padding:10px 10px 50px;justify-content:space-between}#container-visualizer .details{align-self:start}#container-visualizer .details .all-data{grid-template-columns:1fr;width:100%;gap:20px}#container-visualizer .details .all-data ul{min-width:0;display:grid!important;grid-template-columns:1fr 1fr 1fr 1fr 1fr;justify-content:space-between;width:100%;max-width:none;gap:5px}#container-visualizer .details .all-data ul li h4{font-size:20px}#container-visualizer .details .all-data ul li p{font-size:18px;padding:0;margin:0}#place-pointer{left:calc(50% - 25px);top:calc(50% - 75px)}p.copyrights{bottom:20px}}@media (max-width:768px){#container-search h1{font-size:36px}#container-search p.slogan{font-size:32px}#container-search form div.row{margin-top:0}#container-search form input{padding:15px}#container-search form button{right:15px}#container-search form input:focus+button{right:14px}#countries-suggestions{margin-top:10px}#container-visualizer .top{background-color:var(--black-transparent-color);padding:10px;border-radius:100px}#container-visualizer .cross{padding:10px;width:15px;background-color:var(--black-color)}#container-visualizer p.title{font-size:24px}#container-visualizer .details{padding:5px;width:calc(100% - 10px);margin:0;border-radius:15px}#container-visualizer .details h3{font-size:24px}#container-visualizer .details .all-data ul li{margin-top:0}.start-layer p.title{font-size:28px}}@media (max-width:425px){#container-search div.container{width:100vw;min-width:0;max-width:none}#container-search p.slogan{font-size:28px}#container-visualizer .details h3{font-size:20px}#container-visualizer .details .all-data ul li h4{font-size:16px}#container-visualizer .details .all-data ul li p{font-size:14px}}