@import"https://fonts.googleapis.com/css2?family=Poppins: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";*{margin:0;padding:0;top:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}img{max-width:100%}button,input,textarea{outline:none;border:none;font-family:Poppins,serif}body{background-color:#2c2c3b;color:#fff;font-family:Poppins,serif;overflow:hidden;overflow-y:auto}#root{overflow:hidden;overflow-y:auto}a{color:#fff;text-decoration:underline}::-moz-selection{background-color:#713a91;color:#fff}::selection{background-color:#713a91;color:#fff}h1{font-size:clamp(2rem,5vw,2.5rem)}.container{padding:.5rem}.navbar{display:flex;justify-content:space-between;padding:1rem;gap:1rem;align-items:center;height:80px;z-index:9999;position:relative}.navbar .logo{cursor:pointer}.navbar .logo h1{font-weight:600;transition:.2s ease}.navbar .logo h1:hover{color:#713a91}.navbar .nav{display:flex;justify-content:center;align-items:center;gap:3rem}.navbar .hamburger{display:none;flex-direction:column;gap:.25rem;align-items:center;justify-content:space-between;width:30px;height:20px;cursor:pointer}.navbar .hamburger:hover .line{background-color:#998f8f}.navbar .hamburger .line{width:100%;height:2px;background-color:#fff;transition:.2s ease}.nav-item{cursor:pointer;font-size:1.25rem;transition:.2s ease}.nav-item:hover{color:#998f8f}.extended{transition:.4s ease;background-color:#713a91;width:50vw;height:100dvh;z-index:-1;position:absolute;right:0;transform:translate(100%);pointer-events:none;opacity:0}.extended .spacer{height:80px}.extended .nav-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;height:calc(100dvh - 80px)}.extended .nav-wrapper .nav-item{font-size:1.25rem}.extended-active{transform:translate(0);pointer-events:all;opacity:1}@media (max-width: 800px){.navbar .nav{display:none}.navbar .hamburger{display:flex}}.footer{text-align:center;height:80px;display:flex;justify-content:center;align-items:center}.primary-btn{background-color:#713a91;border:none;color:#fff;font-size:1.125rem;border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:.2s ease}.primary-btn:hover{background-color:#5a2c75}.primary-btn:active{scale:.95}.secondary-btn{background-color:transparent;border:none;border:2px solid #998F8F;color:#fff;font-size:1.125rem;border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:.2s ease}.secondary-btn:hover{box-shadow:0 2px 15px #713a91}.secondary-btn:active{scale:.95}.home-wrapper{height:calc(100dvh - 160px);display:flex;justify-content:center;align-items:flex-start}.home-wrapper .background{position:fixed;z-index:-1}.home-wrapper .content{margin-top:10vh;text-align:center;height:35%;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}.home-wrapper .content .hero-title h1{font-size:3rem}.home-wrapper .content .hero-title p{color:#998f8f;line-height:10px}.home-wrapper .content .hero-desc{color:#998f8f;max-width:500px;width:100%;margin:0 auto;font-size:clamp(1rem,50vw,1.125rem)}.home-wrapper .content .buttons{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}.about{display:flex;justify-content:center;align-content:center;height:calc(100dvh - 160px);position:relative}.about .background{position:fixed;z-index:-1}.about .wrapper{text-align:center;max-width:700px;width:100%;display:flex;justify-content:center;align-items:center;gap:2rem;flex-direction:column}.about .wrapper p{color:#998f8f;font-size:clamp(.5rem,5vw,1.25rem)}.docs{display:flex;justify-content:center;align-content:center}.docs .wrapper{text-align:center;max-width:1200px;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5rem}.docs .wrapper p{color:#998f8f;font-size:clamp(.5rem,5vw,1.25rem)}.docs .wrapper .docs-examples{display:grid;gap:3rem}.docs .wrapper .docs-examples .example{display:grid;grid-template-columns:60% 40%;gap:1rem;width:100%;text-align:right;max-width:100%}.docs .wrapper .docs-examples .example .desc{display:grid;gap:.5rem}.docs .wrapper .docs-examples .example .desc p{font-size:clamp(.75rem,10vw,1.125rem)}.docs .wrapper .docs-examples .example .image .doc-image{border-radius:8px;box-shadow:0 0 5px #713a91}.docs .wrapper .docs-examples .example-reverse{direction:rtl;text-align:left}@media (max-width: 800px){.docs .wrapper .docs-examples .example{grid-template-columns:auto;text-align:center!important}.docs .wrapper .docs-examples .example .desc p{font-size:.75rem}}