*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--primarylw: #173eff;--primarylw-2: #3758f9;--darklw: #11131B;--darklw-2: #1a1d25;--background: 0 0% 100%;--foreground: 0 0% 0%;--card: 0 0% 100%;--card-foreground: 0 0% 0%;--popover: 0 0% 100%;--popover-foreground: 0 0% 0%;--primary: 0 0% 0%;--primary-foreground: 0 0% 100%;--secondary: 0 0% 96%;--secondary-foreground: 0 0% 0%;--muted: 0 0% 96%;--muted-foreground: 0 0% 45%;--accent: 0 0% 96%;--accent-foreground: 0 0% 0%;--destructive: 0 84% 60%;--destructive-foreground: 0 0% 100%;--border: 0 0% 90%;--input: 0 0% 90%;--ring: 0 0% 0%;--radius: .5rem;--scrollbar-thumb: 0 0% 75%;--scrollbar-track: 0 0% 95%;--scrollbar-hover: 0 0% 65%}@keyframes neon-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes neon-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes TinyBarLoader-anime{0%{opacity:1}to{opacity:.1}}@keyframes GlassLoginAnimateBg{to{filter:hue-rotate(360deg)}}@keyframes GradientAnimatedBgTurn{to{transform:rotate(1turn)}}@keyframes marquee-right-left{0%{transform:translate(0)}to{transform:translate(-50%)}}@property --border-angle{syntax: "<angle>"; inherits: true; initial-value: 0turn;}@keyframes bg-spin{to{--border-angle: 1turn}}@keyframes skeletonLoader{0%{background-position:-2000px 0}to{background-position:2000px 0}}@keyframes skeletonBarsLoader{0%{background-position:-2000px 0}to{background-position:2000px 0}}@keyframes AnimatedCartBtntruck{0%{left:-10%}40%,55%{left:50%}to{left:110%}}@keyframes AnimatedCartBtnbox{0%,40%{top:-20%;left:-5%}55%{top:37%;left:52%}to{top:37%;left:110%}}@keyframes AnimatedCartBtntxt1{0%{opacity:1}20%,to{opacity:0}}@keyframes AnimatedCartBtntxt2{0%,80%{opacity:0}to{opacity:1}}*{scrollbar-width:thin;scrollbar-color:hsl(var(--scrollbar-thumb)) hsl(var(--scrollbar-track))}body{background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}@property --border-angle{syntax: <angle>; inherits: true; initial-value: 0turn;}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.block{display:block}.h-full{height:100%}.w-full{width:100%}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes toast-enter{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toast-exit{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes toast-enter-mobile{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-exit-mobile{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes aurora-1{0%{top:0;right:0}50%{top:100%;right:75%}75%{top:100%;right:25%}to{top:0;right:0}}@keyframes aurora-2{0%{top:-50%;left:0%}60%{top:100%;left:75%}85%{top:100%;left:25%}to{top:-50%;left:0%}}@keyframes aurora-3{0%{bottom:0;left:0}40%{bottom:100%;left:75%}65%{bottom:40%;left:50%}to{bottom:0;left:0}}@keyframes aurora-4{0%{bottom:-50%;right:0}50%{bottom:0%;right:40%}90%{bottom:50%;right:25%}to{bottom:-50%;right:0}}@keyframes aurora-border{0%{border-radius:37% 29% 27% 27%/28% 25% 41% 37%}25%{border-radius:47% 29% 39% 49%/61% 19% 66% 26%}50%{border-radius:57% 23% 47% 72%/63% 17% 66% 33%}75%{border-radius:28% 49% 29% 100%/93% 20% 64% 25%}to{border-radius:37% 29% 27% 27%/28% 25% 41% 37%}}@font-face{font-family:Roboto;src:url(/20-projects-with-linaria/assets/Roboto-Regular.woff2) format("woff2");font-display:swap;font-style:normal}@font-face{font-family:just-like-this;src:url(/20-projects-with-linaria/assets/just-like-this.ttf) format("truetype");font-display:swap;font-style:normal}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif,system-ui,-apple-system,Segoe UI,Cantarell,Open Sans,Helvetica Neue;font-size:1vmax}h1,h2,h3,h4,h5,h6{font-family:just-like-this,Roboto,sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue}a,button,img{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}button{background-color:transparent;border:none;outline:none}body,#root{min-height:100vh;height:-moz-max-content;height:max-content;width:100%}body{--sb-track-color: #000;--sb-thumb-color: #d22a62;--sb-size: .7vmax}html{scrollbar-width:thin;scrollbar-color:#d22a62 black}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}.background-effect{position:fixed;top:0;height:100vh;width:100%;background-color:#0a0a0a;background-image:radial-gradient(ellipse 80% 80% at 50% -20%,#7877c64d,#fff0)}.hero-1{height:100vh;width:100%;pointer-events:none;position:relative;display:flex;flex-wrap:wrap;place-content:center}.hero-1 h1{font-size:3vmax;width:-moz-fit-content;width:fit-content;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(45deg,#fff,#d22a62);display:flex;animation:scalado 1s ease-in-out forwards;max-width:80%;text-align:center}.hero-1 h1 .img{width:5vmax;height:5vmax;margin-left:1vmax;-o-object-fit:cover;object-fit:cover;display:inline-flex}.hero-2{min-height:100vh;width:100%;position:relative;display:grid;place-content:center;place-items:center;grid-template-columns:repeat(auto-fit,minmax(17vmax,1fr));padding:2vmax;gap:2vmax}.hero-2 h1{font-size:3vmax;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(45deg,#fff,#d22a62);display:flex;animation:scalado 1s ease-in-out forwards}.hero-2 h1 .img{width:5vmax;margin-left:1vmax}.hero-2 .area{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;--ease-elastic: cubic-bezier(.5, 2, .3, .8);--ease-elastic-2: cubic-bezier(.5, -1, .3, .8);--primary: #ff8800;--h: 13.02vmax}.hero-2 .area .am-img-bg{width:3vmax;height:3vmax;position:absolute;z-index:50;border-radius:50%;top:45%;left:50%;width:-moz-fit-content;width:fit-content;pointer-events:none;text-align:center;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(45deg,#000,#d22a62);font-size:2vmax;transform:translate(-50%,-50%)}.hero-2 .area-wrapper{position:relative;padding:1.3vmax .33vmax;cursor:pointer;pointer-events:none}.hero-2 .area-wrapper:hover .wrapper .case .mask{box-shadow:inset .52vmax -.98vmax .98vmax -.65vmax #000,inset .65vmax -1.11vmax .78vmax -.78vmax #fff,0 1.3vmax 3.26vmax -.33vmax #111}.hero-2 .area-wrapper:hover .wrapper .glass{box-shadow:inset 0 0 .46vmax -.26vmax #fff,inset 0 -.65vmax .65vmax -.52vmax #fff6,inset .52vmax -.98vmax .98vmax -.65vmax #000,inset .52vmax -.65vmax .78vmax -.78vmax #fff,0 1.96vmax 4.56vmax -.33vmax #111}.hero-2 .glass-noise{overflow:visible}.hero-2 .wrapper{display:block;border-radius:50%;position:relative;z-index:2;transform:translateY(-.65vmax) scale(1.02);width:var(--h);height:var(--h)}.hero-2 .wrapper .input{position:absolute;background:transparent;opacity:0;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:10;cursor:pointer;pointer-events:all;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none}.hero-2 .button{background:transparent;display:block;border:none;padding:0;margin:0;width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden}.hero-2 .button:before{content:"";top:0;bottom:0;left:0;width:100%;height:100%;margin:auto;border-radius:50%;position:absolute;pointer-events:none;background:var(--primary);background:linear-gradient(to right,var(--primary) 0%,transparent 100%);z-index:1;filter:blur(1.96vmax);mix-blend-mode:color-dodge;transition:all 1s ease .4s;opacity:0}.hero-2 .button:after{content:"";width:6.51vmax;height:6.51vmax;top:0;bottom:0;left:0;right:0;margin:auto;border-radius:50%;position:absolute;pointer-events:none;background:var(--primary);z-index:2;filter:blur(.98vmax);mix-blend-mode:color-dodge;transition:all 1s ease .4s;opacity:0}.hero-2 .button .case{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;border-radius:50%;transform:translate(0);transition:all .9s var(--ease-elastic)}.hero-2 .button .case .mask{position:absolute;overflow:hidden;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(to bottom,#2c2e31,#31343e 20%,#212329);box-shadow:inset .52vmax -.98vmax .98vmax -.65vmax #000,inset .65vmax -1.11vmax .78vmax -.78vmax #fff,0 1.96vmax 4.56vmax -.33vmax #111;transition:all .9s var(--ease-elastic)}.hero-2 .button .case .mask:before{content:"";position:absolute;border-radius:inherit;left:10%;top:10%;width:80%;height:30%;background:#fff;filter:blur(.78vmax)}.hero-2 .button .case .mask:after{content:"";position:absolute;right:0;top:0;bottom:0;width:.26vmax;background-color:#fff3;mix-blend-mode:overlay}.hero-2 .button .case .line{position:absolute;top:0;bottom:0;right:20%;transition:all .4s ease}.hero-2 .button .case .line:before{position:absolute;top:0;bottom:0;right:0;content:"";background:#fff;box-shadow:.065vmax 0 .65vmax .2vmax #ffa600;width:.065vmax;border-radius:50%;height:0%;margin:auto;animation:1.8s line ease infinite}.hero-2 .button .glass{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;transition:all .9s var(--ease-elastic);border-radius:50%;background:linear-gradient(to bottom,#ffffff26,#fff3,#00000080);border-left:.065vmax solid rgba(0,0,0,.3);box-shadow:inset 0 0 .46vmax -.26vmax #fff,inset 0 -.65vmax .65vmax -.52vmax #fff6,inset .52vmax -.98vmax .98vmax -.65vmax #000,inset .52vmax -.65vmax .78vmax -.78vmax #fff,0 1.96vmax 4.56vmax -.33vmax #111}.hero-2 .button .glass:before{content:"";position:absolute;left:0;top:10%;right:14%;height:70%;border-radius:0 50% 50% 0;background:linear-gradient(to bottom,#ffffff80,#fff0 60%)}.hero-2 .button .glass:after{content:"";position:absolute;left:0;bottom:15%;right:5%;height:75%;border-radius:0 50% 50% 0;box-shadow:inset -.13vmax -.39vmax .33vmax -.33vmax #fffc;filter:blur(.2vmax)}.hero-2 .button .glass .glass-reflex{position:absolute;top:0;right:0;bottom:0;left:0;width:70%;border-radius:50%;background:linear-gradient(to right,#ffffff08,#fff3);transform:translate(-115%) skew(30deg)}.hero-2 .button .glass .glass-noise{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.2}.hero-2 .area-wrapper .input:checked~.button .case{transform:translate(0);transition:all 1.25s var(--ease-elastic-2)}.hero-2 .area-wrapper:hover .input:checked~.button:before,.hero-2 .area-wrapper:hover .input:checked~.button:after{opacity:1}.hero-2 .area-wrapper:hover .button .line{opacity:0}.hero-2 .area-wrapper .input:not(:checked)~.button .line:before{box-shadow:.065vmax 0 .65vmax .2vmax #ffdc9166;background:#8c8c8c}.hero-2 .area-wrapper:hover .glass-reflex{animation:reflex .6s ease}.hero-2 .noise{position:absolute;top:-1.63vmax;bottom:-1.3vmax;left:0;right:0;opacity:.07;-webkit-mask-image:linear-gradient(transparent 5%,white 30%,white 70%,transparent 95%);mask-image:linear-gradient(transparent 5%,white 30%,white 70%,transparent 95%);filter:grayscale(1);pointer-events:none;z-index:1}.hero-2 .bg{position:absolute;top:0;right:0;bottom:0;left:0}.hero-2 .bg svg{position:absolute;overflow:visible;top:0;right:0;bottom:0;left:0;z-index:999}.hero-2 .bg:before{content:"";border-radius:50%;position:absolute;right:-25%;top:-25%;width:50%;height:50%;background-color:var(--primary);border-bottom:.65vmax solid white;border-left:.65vmax solid white;filter:blur(8.45vmax);z-index:1}.hero-2 .bg .light-1{position:absolute;right:20%;top:-35%;height:70%;width:8%;border-radius:0 0 50% 50%;background-color:#fff;transform:rotate(65deg);filter:blur(5.85vmax)}.hero-2 .bg .light-2{position:absolute;right:20%;top:-25%;height:90%;width:2%;border-radius:50%;background-color:var(--primary);transform:rotate(50deg);filter:blur(5.2vmax)}.hero-2 .bg .light-3{position:absolute;right:0%;top:-20%;height:80%;width:3%;border-radius:0 0 50% 50%;background-color:#fff;transform:rotate(35deg);filter:blur(5.2vmax)}.hero-2 .ball-number{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:8rem;font-weight:700;color:#fffc;text-shadow:0 0 10px rgba(255,255,255,.5);z-index:3;pointer-events:none;transition:all .3s ease;display:none}@keyframes scalado{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes line{0%{height:0%;opacity:1}50%{height:100%;opacity:1}to{height:140%;opacity:0}}@keyframes reflex{0%{transform:translate(-115%) skew(30deg)}to{transform:translate(140%) skew(30deg)}}