:root{--lightBgColor:#F7F7F7;--primaryTextColor:#0B0729;--secondaryTextColor:rgb(35, 34, 92);--darkColor:#fff;--navFootBg:#0B0729;--navFootText:#fff;--color-errors:red;--shadow-color:rgba(0,0,0,.3);--navbar-before:#F7F7F7;--button-special:#0B0729;--button-text:#fff;--footer-shadow:rgba(0,0,0,0)}.dark{--darkColor:#0B0729;--primaryTextColor:#fff;--lightBgColor:rgb(35, 34, 92);--footer-shadow:rgba(0,0,0,.3)}body{background-color:var(--darkColor);color:var(--primaryTextColor);transition:background-color .3s ease,color .3s ease;margin:0;font-family:Roboto,sans-serif}html{scroll-behavior:smooth}*{margin:0;padding:0;box-sizing:border-box}.linkTag{text-decoration:none;color:var(--navFootText)}.linkDrop{text-decoration:none;color:var(--navFootBg)}.navbarSection{display:flex;justify-content:space-between;align-items:center;padding:10px;color:var(--navFootText);background-color:var(--navFootBg);width:100%;position:relative;box-shadow:0 0 10px 1px var(--shadow-color)}.landscapeNavlits{display:flex;align-items:center;gap:12px}.navLists{display:flex;justify-content:space-around;align-items:center;gap:20px;cursor:pointer}.navLists li{list-style:none;font-size:17px;position:relative;display:inline-block;padding-bottom:3px;cursor:pointer}.navLists li:before{content:"";position:absolute;width:0;height:1.5px;bottom:0;left:0;background-color:var(--navbar-before);transition:width .4s ease-out}.navLists li:hover:before{width:88%}.dropDownBox{display:flex;align-items:center;justify-content:space-between;width:200px;height:30px;border-radius:10px;padding:5px 15px;background-color:var(--navbar-before);color:var(--navFootBg);cursor:pointer}.toolsList{position:absolute;top:50px;left:0;width:200px;background-color:var(--navbar-before);color:var(--navFootBg);padding:25px;display:flex;flex-direction:column;gap:15px;list-style:none;text-decoration:none;border-radius:10px;font-size:17px;box-shadow:0 0 10px 5px var(--shadow-color);z-index:1000000}.linkDrop{position:relative;display:block;width:fit-content;cursor:pointer;transition:color .2s ease-out}.linkDrop:before{content:"";position:absolute;width:0;height:1.5px;bottom:0;left:0;background-color:var(--navFootBg);transition:width .4s ease-out}.linkDrop:hover:before{width:88%}.linkDrop:hover{opacity:.5}.searchBar{padding:5px;border-radius:10px;padding-inline:5px;width:200px;height:30px;background-color:#f7f7f7;color:#0b0729;cursor:pointer;outline:none;border:none}.searchBar::placeholder{color:#0b0729}.menuIcon{display:none}.wholeLists{display:flex;align-items:center;gap:30px;padding-right:50px}.mobileNavMenu{display:none}@media screen and (max-width:1024px){.wholeLists{padding-right:10px;gap:10px}.navLists{gap:12px}}@media(max-width:768px){.inputField,.dropDown,.landscapeNavlits{display:none}.menuIcon{display:inline-block;font-size:25px;cursor:pointer}.mobileNavMenu{display:flex;gap:10px;flex-direction:column;position:absolute;right:5px;background-color:var(--navbar-before);color:var(--navFootBg);top:60px;padding:15px;border-radius:10px;z-index:10000;box-shadow:0 0 10px 1px var(--shadow-color)}.navListsPotrait li{list-style:none;margin:8px;text-decoration:none;font-size:20px}}footer{display:grid;grid-template-columns:minmax(275px,325px) repeat(3,minmax(225px,250px));padding:25px 20px;gap:10px;background-color:var(--navFootBg);color:var(--navFootText);box-shadow:0 5px 6px 4px var(--footer-shadow)}.footerlogo{font-size:30px}.footerLinks{display:flex;flex-direction:column;gap:12px}.footerLinks h4{font-size:20px}.footerLinks p{font-size:17px;width:fit-content;transition:all .2s ease-in-out}.footerLink:hover{opacity:.6;cursor:pointer}.socialMedia{display:flex;align-items:center;gap:5px}.footerLink{text-decoration:none;color:var(--navFootText)}@media(max-width:1024px)and (min-width:768px){footer{display:grid;grid-template-columns:repeat(3,minmax(200px,250px));row-gap:30px}}@media(max-width:768px)and (min-width:600px){footer{display:grid;grid-template-columns:repeat(2,minmax(225px,250px));row-gap:30px}}@media(max-width:600px){footer{display:grid;grid-template-columns:minmax(200px,250px);row-gap:30px}.footerLinks h4{font-size:18px}.footerLinks p{font-size:16px}}.loaderMainSection{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.spinner{width:56px;height:56px;display:grid;border:4.5px solid #0000;border-radius:50%;border-right-color:var(--primaryTextColor);animation:spinner-a4dj62 1s infinite linear}.spinner:before,.spinner:after{content:"";grid-area:1/1;margin:2.2px;border:inherit;border-radius:50%;animation:spinner-a4dj62 2s infinite}.spinner:after{margin:8.9px;animation-duration:3s}@keyframes spinner-a4dj62{to{transform:rotate(1turn)}}main{padding:0 30px;display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));justify-content:center;align-content:center;gap:10px;height:100vh;background-color:var(--darkColor);color:var(--primaryTextColor)}.aboutSection{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:15px}.title{color:var(--primaryTextColor);font-size:32px}.homeDescription p{color:var(--primaryTextColor);font-size:18px}.exploreButton{display:flex;align-items:center;gap:9px;background-color:var(--primaryTextColor);color:var(--darkColor);padding:9px;border-radius:20px;cursor:pointer}.explore{border:none;background-color:var(--primaryTextColor);color:var(--darkColor);font-size:16px;cursor:pointer}.exploreLink{text-decoration:none;color:var(--darkColor)}.exploreIcons{color:var(--darkColor);font-size:16px}.imageSection{display:flex;justify-content:center}.heroSectionImage{max-width:80%;height:auto;border-radius:11px}@media(max-width:768px){main{display:grid;grid-template-columns:minmax(300px,500px);gap:30px;height:auto;padding:50px 30px}.explore{font-size:14px}}.goTopComponent{width:fit-content;height:fit-content;text-align:center;position:fixed;right:10px;bottom:10px;z-index:999}.backToTop{font-size:32px;color:var(--primaryTextColor);background-color:var(--lightBgColor);border-radius:25px;padding:7px}.colorPickSection{color:var(--primaryTextColor);padding:0;display:grid;grid-template-columns:minmax(250px,275px) minmax(300px,1fr);gap:15px}.colorSection{display:grid;grid-template-columns:minmax(300px,320px) repeat(2,minmax(150px,200px));justify-content:center;gap:10px;padding:60px 30px;height:100vh}.hexLabel{color:var(--primaryTextColor);font-size:17px;margin:5px;display:block;align-self:flex-start}.colorInput{height:40px;width:225px;background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:10px;border:none;outline:none;padding-inline:10px;font-size:17px}.colorValueDisplay{background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:10px;padding:10px;width:225px;cursor:"context-menu"}.colorRange{width:225px;accent-color:var(--primaryTextColor);outline:none;cursor:ew-resize}.rgbaHslValues{display:flex;flex-direction:column;gap:3px;margin:10px 0 0;align-items:flex-start;justify-content:center}.previewIcon{display:flex;align-items:center;gap:4px;margin:5px}.previewIconTwo{display:flex;align-items:center;gap:4px;margin:20px 5px 5px}.previewIcon p,.previewIconTwo p{color:var(--primaryTextColor);font-size:17px}.sloganOfPicker{padding:15px 0}.inputsOfColor{display:flex;align-items:center;gap:5px;cursor:context-menu}.coloredCopyInActive{color:var(--primaryTextColor);cursor:pointer}.opacityColorBox{display:flex;flex-direction:column;gap:5px;margin:5px 20px 5px 5px}.copiedMessageColor{color:var(--primaryTextColor);background-color:var(--lightBgColor);font-size:14px;padding:3px;border-radius:5px}@media(max-width:1204px){.colorSection{display:grid;grid-template-columns:minmax(300px,325px) minmax(200px,250px);padding:60px 20px;row-gap:20px;height:auto}.rgbaHslValues{align-items:flex-start}}@media(max-width:900px){.colorSection{display:grid;grid-template-columns:minmax(300px,325px);padding:60px 30px;justify-content:flex-start;row-gap:20px;height:auto}}@media(max-width:768px){.colorPickSection{display:grid;grid-template-columns:minmax(200px,225px) minmax(300px,1fr)}}@media(max-width:600px){.colorPickSideNavbar{display:none}.colorPickSection{display:grid;grid-template-columns:minmax(300px,1fr);justify-content:center;align-items:center}}@media(max-width:375px){.colorSection{display:grid;grid-template-columns:minmax(250px,1fr);padding:60px 15px}}.asideNavbar{display:grid;grid-template-columns:minmax(200px,250px);justify-content:flex-start;align-content:flex-start;gap:40px;background-color:var(--darkColor);color:var(--primaryTextColor);padding:35px 25px;height:100%;box-shadow:5px 0 5px -3px var(--shadow-color)}.sideBarLogo h2{text-align:center;font-size:33px}.sideBarLists{display:flex;flex-direction:column;gap:25px}.sideBarLists li,.sideNavLists{text-decoration:none;list-style:none;color:var(--primaryTextColor);font-size:18px;font-weight:lighter;transition:color .2s ease}.sideNavLists:hover{opacity:.5;cursor:pointer}.itsClicked{text-decoration:none;list-style:none;color:var(--primaryTextColor);font-size:18px;font-weight:lighter;transition:color .2s ease;text-decoration:solid}.glassWholeSection{display:grid;grid-template-columns:minmax(250px,275px) minmax(350px,1fr);gap:25px}.glassPreviewCustomize{display:grid;grid-template-columns:minmax(350px,375px) minmax(275px,310px);justify-content:center;padding:40px 20px;gap:50px}.previewCode{background-color:var(--lightBgColor);padding:15px;border-radius:10px}.previewBackground{background-image:url(/assets/pexels-samkolder-2387873-dyYsP_Os.jpg);background-repeat:no-repeat;background-position:center;padding:15px;display:flex;gap:10px;flex-direction:column;border-radius:9px}.preCard{padding:15px;border-radius:10px;display:flex;flex-direction:column;gap:10px;height:250px}.previewImage{width:50px;border-radius:50px}.rangeInputs{outline:none;width:275px;cursor:ew-resize;accent-color:var(--primaryTextColor)}.codesMorphism{text-align:left;display:flex;flex-direction:column;justify-content:flex-start;font-size:15px;color:var(--primaryTextColor);margin:15px 0 0;padding:0 10px 10px 0;border-radius:6px;background-color:var(--darkColor)}.codesMorphism pre{word-spacing:normal;overflow:auto;height:170px;padding:10px}.codeCopied{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;font-size:15px;width:fit-content;margin:0 5px 0 10px}.notCopied{color:var(--primaryTextColor);cursor:pointer;font-size:15px;margin:5px 0 0 10px}.glassDivisions{display:flex;align-items:center;gap:5px}.glassDivisionsbutton{border:none;outline:none;padding:5px;border-radius:5px;background-color:transparent;color:var(--primaryTextColor);margin-bottom:5px}.glassDivisionsbutton:hover{opacity:.5;cursor:pointer;transition:all .1s ease-in}.glassDivisionClicked{background-color:var(--lightBgColor);opacity:1;border:none;outline:none;color:var(--primaryTextColor);margin-bottom:5px;padding:5px;border-radius:5px;cursor:pointer}.morphismCustomize{display:flex;flex-direction:column;gap:10px}.picker-wrapper .react-colorful__interactive{width:275px;height:auto}.picker-wrapper .react-colorful__saturation{height:auto;width:275px;border-radius:20px}.picker-wrapper .react-colorful__hue{height:18px;margin-top:7px;border-radius:10px;width:275px}.picker-wrapper .react-colorful__saturation-pointer,.picker-wrapper .react-colorful__pointer{cursor:grab}.glassLabels{color:var(--primaryTextColor);font-size:17px;margin-bottom:3px;display:block}.colorpickerGM{margin-left:18px}.gmColorInput{display:flex;flex-direction:column;gap:10px}.hexDisplayInput{border:none;background-color:var(--lightBgColor);color:var(--primaryTextColor);height:40px;width:275px;font-size:16px;border-radius:10px;padding-inline:10px;outline:none}.rgbaDisplayInput{background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:10px;width:275px;padding:10px;height:40px}@media(max-width:1024px){.glassWholeSection{display:grid;grid-template-columns:minmax(250px,300px) minmax(350px,1fr)}.glassPreviewCustomize{display:grid;grid-template-columns:minmax(300px,500px)}.codesMorphism{background-color:var(--darkColor)}.morphismCustomize{align-items:center;padding-bottom:10px}}@media(max-width:768px){.glassWholeSection{display:grid;grid-template-columns:minmax(200px,225px) minmax(350px,1fr);justify-content:flex-start;gap:15px}.glassPreviewCustomize{display:grid;grid-template-columns:minmax(340px,1fr);justify-content:center}.picker-wrapper .react-colorful__interactive{width:300px;height:auto}.picker-wrapper .react-colorful__saturation{height:auto;width:300px;border-radius:20px}.picker-wrapper .react-colorful__hue{height:18px;margin-top:7px;border-radius:10px;width:300px}.previewCode{justify-content:center;padding:10px}.codesMorphism{background-color:var(--darkColor)}.previewBackground{padding:15px}}@media(max-width:600px){.glassSidebar{display:none}.glassWholeSection{display:grid;grid-template-columns:minmax(300px,500px);justify-content:center;gap:0px}.glassPreviewCustomize{display:grid;grid-template-columns:minmax(300px,500px);justify-content:center;padding:40px 0;margin:7px}.previewCode{justify-content:center}.morphismCustomize{justify-content:center;align-items:center}.previewBackground{padding:10px}.codesMorphism pre{text-wrap:wrap}.codesMorphism{background-color:var(--darkColor)}}@media(max-width:375px){.glassPreviewCustomize{display:grid;grid-template-columns:minmax(300px,1fr);justify-content:center;padding:40px 5px;margin:4px}.picker-wrapper .react-colorful__interactive{width:275px;height:auto}.picker-wrapper .react-colorful__saturation{height:auto;width:275px;border-radius:20px}.picker-wrapper .react-colorful__hue{height:18px;margin-top:7px;border-radius:10px;width:275px}.codesMorphism{background-color:var(--darkColor)}}.buttonMainSection{display:grid;grid-template-columns:minmax(250px,275px) minmax(450px,1fr);gap:30px;overflow-x:hidden}.customebuttons{padding:35px 5px}.customButton{text-align:center;color:var(--primaryTextColor)}.colorAndButtons{display:grid;grid-template-columns:minmax(265px,290px) minmax(375px,425px);padding:30px 15px;justify-content:center;gap:25px}.backgroundPicker,.textColorPick{display:flex;flex-direction:column;gap:0px}.pickerHeading{color:var(--primaryTextColor);margin:0 0 10px 10px;font-size:17px}.customColor{display:flex;flex-direction:column;gap:20px}.picker .react-colorful__interactive{width:265px;height:auto}.picker .react-colorful__hue{width:265px;height:18px;margin:4px 0 0;border-radius:10px}.picker .react-colorful__saturation{height:auto;width:265px;border-radius:20px}.picker .react-colorful__saturation-pointer,.picker .react-colorful__pointer{cursor:grab}.displayInput{width:265px;height:40px;background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:7px;padding-inline:10px;outline:none;border:none;font-size:15px;margin:7px 0}.buttonTypes{display:grid;grid-template-columns:minmax(350px,400px);grid-template-rows:auto;margin-top:10px}.buttonSections{background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;outline:none;border:none}.slick-slide{padding:0 13px;transition:all .3s ease-in-out}.slick-prev,.slick-next{width:36px;height:36px;background:var(--primaryTextColor);color:var(--darkColor);border-radius:10px;width:fit-content;padding:0 5px;opacity:1;z-index:10;transition:all .2s ease-in;border:none;outline:none;font-size:10px;letter-spacing:1.5px}.slick-dots,.slick-active,.slick-dots li{display:none}.normalButton{width:100px;height:35px;align-self:center;border:none;outline:none;border-radius:5px;position:relative;margin:20px 11px 11px}.hoverButton{width:100px;height:35px;align-self:center;border:none;outline:none;border-radius:5px;margin:20px 11px 11px;transition:all .3s ease-out}.errorButton{border:2px solid var(--color-errors);color:var(--color-errors);width:100px;height:35px;align-self:center;margin:20px 11px 11px;border-radius:5px}.buttonTopHeads{display:flex;flex-direction:column;align-items:center}.disableButton{cursor:no-drop;width:90px;height:30px;align-self:center;background-color:var(--button-special);border:none;color:var(--button-text);border-radius:5px;text-align:center;margin:20px 11px 11px;opacity:.5}.rippleButtton,.neonButton{width:100px;height:35px;align-self:center;border:none;outline:none;border-radius:5px;margin:20px 11px 11px}.buttonTopHeads{padding:10px;display:flex;flex-direction:column;gap:14px}.buttonPreviewCode{color:var(--primaryTextColor);border-radius:9px;padding:10px;font-size:15px;overflow:auto;height:300px}.codePreviewButton{display:flex;flex-direction:column;gap:0px;background-color:var(--darkColor);color:var(--primaryTextColor);margin-top:25px;padding:0 6px 6px 0;border-radius:7px}.codePreviewButton p{width:fit-content;font-size:16px}.buttonDivisions{display:flex;align-items:center;gap:5px}.buttonDivisionsbutton{border:none;outline:none;padding:5px;border-radius:5px;background-color:transparent;color:var(--primaryTextColor);margin-bottom:5px}.buttonDivisionsbutton:hover{opacity:.5;cursor:pointer;transition:all .1s ease-in}.buttonDivisionClicked{background-color:var(--lightBgColor);opacity:1;border:none;outline:none;color:var(--primaryTextColor);margin-bottom:5px;padding:5px;border-radius:5px;cursor:pointer}.copyInActive{color:var(--primaryTextColor);margin:5px 5px 0 9px;cursor:pointer;font-size:16px}.controllerSwipe{display:flex;justify-content:space-around;align-items:center;position:relative;bottom:0;z-index:10}.previousButton,.nextButton{background-color:var(--primaryTextColor);color:var(--darkColor);cursor:pointer;padding:7px;border:none;border-radius:5px;word-spacing:2px;outline:none}.copiedMessagebutton{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;margin:0 5px 0 9px;font-size:15px}.copySection{height:18px}@media(max-width:1024px){.buttonMainSection{display:grid;grid-template-columns:minmax(180px,220px) minmax(350px,1fr);gap:10px}.colorAndButtons{display:grid;grid-template-columns:minmax(235px,245px) minmax(350px,375px);gap:10px}.buttonTypes{display:grid;grid-template-columns:minmax(325px,350px)}.picker .react-colorful__interactive{width:225px;height:auto}.picker .react-colorful__hue{width:225px;height:18px}.picker .react-colorful__saturation{height:auto;width:225px}.displayInput{width:225px}}@media(max-width:878px){.buttonMainSection{display:grid;grid-template-columns:minmax(225px,250px) minmax(350px,1fr);gap:10px}.colorAndButtons{display:grid;grid-template-columns:minmax(385px,425px);gap:10px}.customColor{justify-content:center;align-items:center}.buttonTypes{display:grid;grid-template-columns:minmax(375px,400px)}.picker .react-colorful__interactive{width:250px;height:auto}.picker .react-colorful__hue{width:250px;height:18px}.picker .react-colorful__saturation{height:auto;width:250px}.displayInput{width:250px}.controllerSwipe{bottom:0;top:20px}}@media(max-width:768px){.buttonMainSection{grid-template-columns:minmax(200px,225px) minmax(300px,375px)}.colorAndButtons{grid-template-columns:minmax(420px,450px)}.buttonTypes{grid-template-columns:minmax(400px,440px)}.picker .react-colorful__interactive,.picker .react-colorful__hue,.picker .react-colorful__saturation,.displayInput{width:275px}.buttonTypes{grid-template-columns:minmax(300px,325px);justify-content:center}}@media(max-width:600px){.buttonSidebar,.buttonsidenavbar{display:none}.buttonMainSection{grid-template-columns:minmax(280px,300px);justify-content:center}}@media(max-width:425px){.buttonMainSection{grid-template-columns:minmax(280px,300px)}.buttonMainSection,.buttonTypes{grid-template-columns:minmax(290px,310px);justify-content:center}}.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translateZ(0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:""}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.wholeShadow{display:grid;grid-template-columns:minmax(250px,275px) minmax(450px,1fr);gap:20px}.boxShadowMain{display:grid;grid-template-columns:minmax(300px,340px) minmax(235px,240px) minmax(290px,325px);justify-content:flex-start;gap:30px;padding:60px 10px}.shadowPreview{display:flex;flex-direction:column;gap:20px;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:13px;border-radius:8px;height:fit-content}.titleShadow{color:var(--primaryTextColor);align-self:center}.previewBox{width:200px;height:200px;background-color:var(--darkColor);display:flex;justify-content:center;align-self:center;align-items:center;margin:14px 0 0}.previewShadowCode{margin-top:9px;background-color:var(--darkColor);color:var(--primaryTextColor);font-size:15px;padding:0 10px 10px 0}.shadowCodes{padding:10px;height:160px;overflow:auto}.boxShadowRanges{display:flex;flex-direction:column;gap:5px;outline:none}.boxShadowRanges input{width:230px;cursor:ew-resize;accent-color:var(--primaryTextColor)}.boxShadowColorPicker{display:flex;flex-direction:column;gap:7px;margin-top:15px;color:var(--primaryTextColor)}.customInputsShadow{display:flex;flex-direction:column;gap:7px}.pickInput .react-colorful__interactive{width:250px;height:auto}.pickInput .react-colorful__saturation{height:auto;width:250px;border-radius:20px}.pickInput .react-colorful__hue{height:18px;margin-top:7px;border-radius:10px;width:250px}.pickInput .react-colorful__saturation-pointer,.pickInput .react-colorful__pointer{cursor:grab}.colorDisplayInput{border:none;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:8px;border-radius:5px;width:230px;outline:none}.rangeInput{width:230px;outline:none;cursor:ew-resize;accent-color:var(--primaryTextColor)}.shadowLables{color:var(--primaryTextColor);font-size:17px;margin-top:15px}.codesCopied{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;font-size:15px;width:fit-content}.codesdidntCopied{color:var(--primaryTextColor);align-self:flex-start;font-size:15px;cursor:pointer}.codecopymessageSection{height:20px;margin:5px 0 0 5px}.boxDivisions{display:flex;align-items:center;gap:5px}.boxDivisionsbutton{border:none;outline:none;padding:5px;border-radius:5px;background-color:transparent;color:var(--primaryTextColor);margin-bottom:5px}.boxDivisionsbutton:hover{opacity:.5;cursor:pointer;transition:all .1s ease-in}.boxDivisionClicked{background-color:var(--lightBgColor);opacity:1;border:none;outline:none;color:var(--primaryTextColor);margin-bottom:5px;padding:5px;border-radius:5px;cursor:pointer}@media(max-width:1178px){.wholeShadow{grid-template-columns:minmax(225px,260px) minmax(450px,1fr);gap:20px}.boxShadowMain{grid-template-columns:minmax(300px,340px) minmax(235px,240px);justify-content:center;gap:25px}}@media(max-width:1024px){.wholeShadow{grid-template-columns:minmax(200px,230px) minmax(400px,1fr);gap:15px}.pickInput .react-colorful__interactive{width:265px}.pickInput .react-colorful__saturation{height:auto;width:265px}.pickInput .react-colorful__hue{width:265px}}@media(max-width:828px){.boxShadowMain{grid-template-columns:minmax(300px,400px)}}@media(max-width:768px){.wholeShadow{grid-template-columns:minmax(210px,250px) minmax(400px,1fr)}.boxShadowMain{grid-template-columns:minmax(300px,390px)}}@media(max-width:678px){.shadowSidebar{display:none}.wholeShadow{grid-template-columns:minmax(300px,1fr)}}@media(max-width:600px){.customInputsShadow,.boxShadowColorPicker{margin:10px}}.mainLinearSection{display:grid;grid-template-columns:minmax(250px,275px) minmax(450px,1fr);gap:25px}.customLinearSection{display:grid;grid-template-columns:minmax(275px,325px) minmax(275px,300px) minmax(275px,300px);justify-content:center;padding:45px 10px;gap:15px}.previewSection{display:flex;flex-direction:column;gap:20px;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:10px;border-radius:8px}.previewSection h3{color:var(--primaryTextColor);text-align:center}.previewgradientBox{align-self:center}.previewgradientBox{width:240px;height:235px;border-radius:7px}.previewCopyContainer{display:flex;flex-direction:column;gap:10px;background-color:var(--darkColor);color:var(--primaryTextColor);overflow:auto;border-radius:5px}.customContainer{display:grid;grid-template-columns:minmax(175px,300px);justify-content:flex-start;gap:10px}.stopPositions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.startPositions{margin:10px 0 5px 12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.angleLinear{margin-left:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.angleInputRange{outline:none;width:260px;cursor:ew-resize;accent-color:var(--primaryTextColor)}.angleLinearInput{background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:8px;border-radius:5px;width:210px;height:36px}label{color:var(--primaryTextColor);font-size:17px;word-spacing:1.5px}.colorLinearInput{outline:none;width:210px;border:none;height:36px;background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:5px;padding-inline:10px;font-size:15px;word-spacing:1.5px}.linearDivisions{display:flex;align-items:center;gap:5px}.linearDivisionsbutton{border:none;outline:none;padding:5px;border-radius:5px;background-color:transparent;color:var(--primaryTextColor);margin-bottom:5px}.linearDivisionsbutton:hover{opacity:.5;cursor:pointer;transition:all .1s ease-in}.linearDivisionClicked{background-color:var(--lightBgColor);opacity:1;border:none;outline:none;color:var(--primaryTextColor);margin-bottom:5px;padding:5px;border-radius:5px;cursor:pointer}.previewCodes{font-size:15px;padding:8px;height:125px}.linearNotCopied{color:var(--primaryTextColor);margin:0 5px;font-size:15px;cursor:pointer}.copiedMessageLinear{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;margin:0 5px;font-size:15px;width:fit-content}.linearColorPicker{display:flex;flex-direction:column;gap:7px}.picker-linear .react-colorful__interactive{width:265px;height:auto}.picker-linear .react-colorful__hue{width:265px;height:18px;margin:4px 0 0;border-radius:10px}.picker-linear .react-colorful__saturation{height:auto;width:265px;border-radius:20px}.picker-linear .react-colorful__saturation-pointer,.picker-linear .react-colorful__pointer{cursor:grab}.linearRgbCopy{display:flex;align-items:center;gap:3px}@media(max-width:1228px){.customLinearSection{display:grid;grid-template-columns:minmax(275px,300px) minmax(300px,325px);gap:20px}}@media(max-width:1024px){.customLinearSection{gap:30px;grid-template-columns:minmax(325px,375px)}.stopPositions{justify-content:center;align-items:flex-start}.startPositions{margin:10px 0 0}.customContainer{justify-content:flex-start}}@media(max-width:768px){.mainLinearSection{display:grid;grid-template-columns:minmax(200px,225px) minmax(265px,1fr);gap:10px}.customLinearSection{grid-template-columns:minmax(300px,375px)}}@media(max-width:600px){.linearSideBar{display:none}.mainLinearSection{grid-template-columns:minmax(280px,1fr)}.angleLinear{margin:0}.customLinearSection{margin:10px}}.wholeRadialSection{display:grid;grid-template-columns:minmax(250px,275px) minmax(350px,1fr);gap:27px}.mainradialSection{display:grid;grid-template-columns:minmax(225px,300px) minmax(225px,285px) minmax(225px,285px);justify-content:center;gap:20px;padding:60px 10px}.previewRadialSection{display:flex;flex-direction:column;gap:15px;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:10px;border-radius:8px}.previewRadialSection h3{color:var(--primaryTextColor);text-align:center}.previewRadialBox{width:250px;height:230px;border-radius:5px;align-self:center;margin-top:14px}.customGradient,.anglesRadial{display:flex;flex-direction:column;gap:10px}.customGradient{margin-left:10px}.angleRadialInput{width:215px;outline:none;color:var(--primaryTextColor)}.pickerLabels{color:var(--primaryTextColor);margin:0 3px 3px 0;font-size:17px}.colorDisplayRadial{height:36px;width:215px;padding-inline:10px;border-radius:8px;border:none;outline:none;background-color:var(--lightBgColor);color:var(--primaryTextColor)}.colorRadialRGB{height:36px;width:215px;border-radius:8px;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:7px}.radialRangeDisplay{width:215px;border-radius:8px;padding:7px;background-color:var(--lightBgColor);color:var(--primaryTextColor)}.startingColorPicker,.endingColorPicker{display:flex;flex-direction:column;gap:10px}.radialRGBcopy{display:flex;align-items:center;gap:4px}.radialSize{width:215px;border-radius:5px;background-color:var(--lightBgColor);color:var(--primaryTextColor);outline:none;border:none;padding:8px;font-size:15px;padding-inline:5px}.radialSize option{background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:5px;border:none}select option:checked{background-color:var(--primaryTextColor);color:var(--darkColor)}.previewRadialCodes{background-color:var(--darkColor);color:var(--primaryTextColor);text-wrap:wrap;padding:0 9px 9px 0;font-size:15px;border-radius:5px;overflow:auto;display:flex;flex-direction:column;gap:10px;height:200px}.radialDivisons{display:flex;align-items:center;gap:4px}.radialNotCopied{color:var(--primaryTextColor);margin:0 5px;font-size:15px;cursor:pointer}.radialDivisionsbutton{border:none;outline:none;padding:5px;border-radius:5px;background-color:transparent;color:var(--primaryTextColor);margin-bottom:5px}.radialDivisionsbutton:hover{opacity:.5;cursor:pointer;transition:all .1s ease-in}.radialDivisionClicked{background-color:var(--lightBgColor);opacity:1;border:none;outline:none;color:var(--primaryTextColor);margin-bottom:5px;padding:5px;border-radius:5px;cursor:pointer}.copiedMessageradial{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;margin:0 5px;font-size:15px;width:fit-content}.messageSection{height:20px}.css-18jp67o-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-18jp67o-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input.css-18jp67o-MuiNativeSelect-root-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input{padding:7px;outline:none;font-size:17px;background-color:var(--lightBgColor);color:var(--primaryTextColor);border-radius:3px}@media(max-width:1179px){.mainradialSection{grid-template-columns:minmax(225px,300px) minmax(225px,285px)}}@media(max-width:1024px){.wholeRadialSection{grid-template-columns:minmax(225px,250px) minmax(350px,1fr);gap:10px}.mainradialSection{grid-template-columns:minmax(225px,300px) minmax(225px,265px);gap:10px}}@media(max-width:818px){.mainradialSection{grid-template-columns:minmax(275px,325px);row-gap:10px;column-gap:0px}}@media(max-width:600px){.radialSideBar{display:none}.wholeRadialSection{grid-template-columns:minmax(210px,1fr)}.mainradialSection{grid-template-columns:minmax(275px,300px)}}.formMainSection{display:grid;grid-template-columns:minmax(250px,275px) minmax(350px,1fr);justify-content:flex-start;gap:20px}.wholeFormSection{display:grid;grid-template-columns:minmax(385px,1fr);justify-content:center;gap:20px;padding:40px 16px}.loginFormSection{display:flex;flex-direction:column;gap:25px;align-items:center;padding:15px}.formHeading{color:var(--primaryTextColor)}.loginForm{display:flex;flex-direction:column;gap:10px;align-items:center;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:20px;border-radius:10px;width:375px;box-shadow:3px 3px 10px 1px var(--shadow-color)}.inputBox{display:flex;flex-direction:column;gap:4px}.formInputs{width:275px;outline:none;border:none;height:35px;border-radius:5px;padding:9px;color:var(--primaryTextColor);background-color:var(--darkColor);display:flex;align-items:center}.formInputs input{border:none;outline:none;width:270px;color:var(--primaryTextColor);background-color:var(--darkColor)}.formInputs input::placeholder{color:var(--primaryTextColor)}.formButtons{width:75px;border:none;outline:none;height:30px;background-color:var(--primaryTextColor);color:var(--darkColor);border-radius:5px;margin:5px 0 0;transition:all .3s ease-in-out}.formButtons:hover{opacity:.9;cursor:pointer}.loginPreviewCode{display:flex;flex-direction:column;gap:10px;background-color:var(--lightBgColor);color:var(--primaryTextColor);padding:20px;align-items:center;border-radius:10px;width:625px}.showButton{align-self:flex-start;border:none;outline:none;color:var(--darkColor);background-color:var(--primaryTextColor);padding:7px;border-radius:4px;cursor:pointer;transition:all .2s ease-in-out}.showButton:hover{opacity:.9}.loginDivisions{display:flex;flex-direction:column;background-color:var(--darkColor);color:var(--primaryTextColor);padding:0 10px 10px 0;border-radius:5px;height:400px;overflow:auto;width:600px}.divisionDecide{display:flex;gap:4px;margin-bottom:5px}.buttonnotClicked{border-width:0px 0px 0px 0px;padding:5px;font-size:15px;border-radius:6px;background-color:transparent;color:var(--primaryTextColor);border:none;outline:none}.buttonnotClicked:hover{color:var(--primaryTextColor);opacity:.5;cursor:pointer;transition:all .3s ease-in-out}.buttonClicked{padding:5px;font-size:15px;background-color:var(--lightBgColor);border-radius:6px;color:var(--primaryTextColor);border:none;outline:none;cursor:pointer}.conditions{display:flex;align-items:center;justify-content:flex-start;margin-right:50px}.conditions input{accent-color:var(--primaryTextColor);cursor:pointer}.conditions label{font-size:13px;margin-left:5px}.formnotCopied{color:var(--primaryTextColor);font-size:16px;align-self:flex-start;margin:2px 2px 0 8px;cursor:pointer}.copyMessageSection{height:20px}.codeCopied{color:var(--primaryTextColor);background-color:var(--lightBgColor);padding:2px;border-radius:5px;margin:0 5px;font-size:15px;width:fit-content}.formInputsnotDone{color:var(--color-errors);height:20px}.loginreactpre p{font-size:14px;padding:5px}.signupSection{display:flex;flex-direction:column;gap:25px;margin:20px 0 0;align-items:center;align-self:center}.signUpPreview{display:flex;flex-direction:column;gap:10px;align-items:center}.copiedMessage{display:flex;align-items:center;gap:5px;margin-top:5px;height:24px}.copiedMessage p{color:var(--primaryTextColor);background-color:var(--lightBgColor);font-size:14px;padding:3px;border-radius:5px}@media(max-width:1023px){.formMainSection{grid-template-columns:minmax(225px,250px) minmax(350px,1fr);gap:15px}.loginPreviewCode{width:480px}.loginDivisions{width:450px;overflow-x:auto}}@media(max-width:767px){.formSidebar{display:none}.formMainSection{grid-template-columns:minmax(350px,1fr)}}@media(max-width:600px){.formMainSection{grid-template-columns:minmax(250px,1fr);justify-content:center}.wholeFormSection{grid-template-columns:minmax(295px,1fr);padding:40px 5px}.loginForm,.loginPreviewCode{width:300px}.loginDivisions{width:286px;overflow-x:auto}}.errorPageContent{display:grid;grid-template-columns:minmax(300px,425px) minmax(300px,425px);justify-content:center;align-content:center;height:100vh;padding:15px}.errorPageMessageBox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.errorPageMessageBox h1{color:var(--primaryTextColor);font-size:60px;word-spacing:2px}.errorPageMessageBox p{color:var(--primaryTextColor);font-size:20px;text-align:center}.errorPageButton{border:none;outline:none;background-color:var(--primaryTextColor);color:var(--darkColor);cursor:pointer;padding:7px;border-radius:6px}.homeButtonError{color:var(--darkColor);text-decoration:none}.pictureBoxError{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.errorPicture{width:380px;height:auto;border-radius:10px}@media(max-width:1024px){.errorPageContent{grid-template-columns:minmax(300px,350px) minmax(300px,350px)}.errorPicture{width:350px}.errorPageMessageBox p{font-size:18px}.errorPageMessageBox h1{font-size:50px}}@media(max-width:767px){.errorPageContent{grid-template-columns:minmax(300px,350px);height:auto}.errorPageMessageBox{order:2}.pictureBoxError{order:1}}@media(max-width:375px){.errorPageContent{grid-template-columns:minmax(290px,300px)}.errorPicture{max-width:90%;align-self:center}}