:root{--primary-hue:212deg;--primary-saturation:100%;--primary-lightness:50%;--navbar-height:4rem;--menu-height:3.75rem}:root{--custom-bg-color:#15171a;--clr-gray-light:#d7dfe2;--clr-gray-med:#3b3c3d;--clr-gray-dark:#414b56;--clr-link:#4d97b2;--clr-popular:#ef257a;--clr-technology:#651fff;--clr-psychology:#e85808;--shadow-color-hsl:222 47% 11%;--shadow-opacity:0.15;--shadow-color:hsl(var(--shadow-color-hsl) / var(--shadow-opacity));--shadow-lg:0px 16px 24px var(--shadow-color),
    0px 2px 6px var(--shadow-color);--ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--ease-out:cubic-bezier(0, 0, 0.2, 1);--ease-in:cubic-bezier(0.4, 0, 1, 1)}:root{--red:#ff3860;--red-dark:#ff1443;--red-light:#ff5c7c;--blue:#498afb;--blue-dark:#2674fa;--blue-light:#6ca0fc;--orange:#fa8142;--orange-dark:#f96a1f;--orange-light:#fb9865;--green:#09c372;--green-dark:#07a15e;--green-light:#0be586;--purple:#9166cc;--purple-dark:#7d4bc3;--purple-light:#a481d5;--yellow:#ffdd57;--yellow-dark:#ffd633;--yellow-light:#ffe47a;--pink:#ff4088;--pink-dark:#ff1c72;--pink-light:#ff649e;--gray0:#f8f8f8;--gray1:#dbe1e8;--gray2:#b2becd;--gray3:#6c7983;--gray4:#454e56;--gray5:#2a2e35;--gray6:#12181b;--nav-width:4em;--font-body:"sofia-pro", sans-serif;--font-head:"sofia-pro", sans-serif;--font-code:"attribute-mono", monospace;--font-size:20px;--max-width-bp:768px;--orange-pink:linear-gradient(to bottom right,
      var(--orange-light),
      var(--orange-dark) 85%);--green-grad:linear-gradient(to bottom right,
      var(--green-light),
      var(--green-dark) 85%);--background:var(--gray6);--text-color:var(--gray2);--h-color:#fff;--nav-shadow:4px 0 10px -3px #010101;--card-shadow:0 4px 8px rgba(0, 0, 0, 0.38);--toc-shadow:rgba(0, 0, 0, 0.7) 0px 10px 20px 0px;--nav-bg:var(--gray5);--tag-bg:var(--gray4);--code-bg:#22262f;--card-bg:var(--gray5);--overlay-bg:rgba(0, 0, 0, 0.9);--h-border:2px dashed var(--nav-bg);--nav-border:2px dashed var(--text-color);--card-radius:0.25em;transition:all .3s ease}.dark{--primary-hue:204deg;--primary-saturation:100%;--primary-lightness:50%}body{margin:0;padding:0;width:100%;--tw-bg-opacity:1;background-color:#f7f7f7}body:is(html[class~=dark] *){--tw-bg-opacity:1;background-color:#15171a;--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.nav-container{background-color:#f7f7f7}.nav-container:is(html[class~=dark] *){background-color:#15171a}nav .search-wrapper{display:inline-block;position:static;.search-results { left: auto; max-height: min(calc(100vh - 11rem - env(safe-area-inset-bottom)), 400px); }}@media(min-width:768px){nav .search-wrapper{display:inline-block;position:relative}}.hextra-sidebar-collapsible-button{display:none}.sidebar-container li>div{height:0;display:none}@media(max-width:767px){.sidebar-container{height:fit-content;transition:transform .8s cubic-bezier(.52,.16,.04,1);will-change:transform,opacity;contain:layout style;backface-visibility:hidden}}.sidebar-container{.search-wrapper { display: none; } .dark\:hx-bg-dark:is(html[class~="dark"] *) { --tw-bg-opacity: 1; background-color: #15171a; }}.hextra-footer:is(html[class~=dark] *){background-color:#1f2328}.hextra-scrollbar{.dark\:hx-bg-dark:is(html[class~="dark"] *) { --tw-bg-opacity: 1; background-color: #15171a; }}.mermaid{display:flex;justify-content:center}.katex-display{overflow-x:auto;overflow-y:hidden}.katex{overflow-x:auto;overflow-y:hidden}.MathJax{overflow-x:scroll;overflow-y:hidden}mjx-container{overflow-x:scroll;overflow-y:hidden}.hextra-code-block pre{font-size:1em;overflow-x:auto;font-family:mona sans,sans-serif}code,kbd,samp,pre{font-family:mona sans,sans-serif;font-feature-settings:normal;font-variation-settings:normal;letter-spacing:.01em;line-height:normal}a{code { color: var(--link-color); background-color: var(--code-bg); padding: 0.2rem 0.4rem; border-radius: 0.25rem; }}li{code { color: #b87d00; }}html:is(.dark) li{code { color: #07a15e; }}mark{background:url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);margin:-2px -6px;padding:2px 6px}.content{hr { margin-top: 2rem; border: 0; height: 1px; --tw-text-opacity: 0.2; --color: rgb(12 12 12 / var(--tw-text-opacity)); border-top: 1px solid var(--color); } hr:is(html[class~="dark"] *) { border: 0; height: 1px; --tw-text-opacity: 0.2; --color: rgb(241 245 249 / var(--tw-text-opacity)); border-top: 1px solid var(--color); } .correct { color: rgb(6, 177, 63); } .correct:is(html[class~="dark"] *) { color: rgb(69, 202, 114); } .wrong { color: rgb(207, 32, 42); } .wrong:is(html[class~="dark"] *) { color: rgb(216, 63, 71); } .chart { margin-top: 1rem; }}#red{color:rebeccapurple}#blue{color:#003b6c}.card{margin-top:1.2rem;margin-bottom:1.2rem;padding:1rem;border-radius:.25rem;--shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;box-shadow:var(--shadow)}.card:is(html[class~=dark] *){margin-top:1.2rem;margin-bottom:1.2rem;padding:1rem;border-radius:.25rem;--shadow:rgba(0, 0, 0, 0.281) 0px 7px 29px 0px;box-shadow:var(--shadow)}.qna-card{margin-top:1.2rem;margin-bottom:1.2rem;padding:1rem;border-radius:.25rem;--shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;box-shadow:var(--shadow)}.qna-card:is(html[class~=dark] *){margin-top:1.2rem;margin-bottom:1.2rem;padding:1rem;border-radius:.25rem;--shadow:rgba(0, 0, 0, 0.281) 0px 7px 29px 0px;box-shadow:var(--shadow)}.fireship-tag{display:inline-block;border-radius:.3rem;padding:.2em .5em .3em;background:var(--tag-bg);color:var(--text-color);font-weight:600}.tag-sm{font-size:.7em;display:inline-block;letter-spacing:.15ch;font-weight:400}.tag-lg{font-size:1.2em;border-radius:4px}.tag-bg{background:var(--background)}.tag-green,.tag-pro{background:var(--green);color:#fff}.tag-purple{background:var(--purple);color:#fff}.tag-contrast{background:var(--text-color);color:var(--background)}.tag-javascript{background:#f0db4f;color:#000}.tag-typescript{background:#2775c3;color:#fff}.tag-angular{background:#dc0530;color:#fff}.tag-firebase{background:#ffcb2b;color:#12181a}.tag-vue{background:#41b883;color:#35495e}.tag-rxjs{background:var(--pink);color:var(--gray5)}.tag-node{background:#90c53f;color:#46483d}.tag-cloud-functions{background:var(--blue);color:#fff}.tag-flutter{background:#54c5f8;color:#003b6c}.tag-google-maps{background:#33a668;color:#f8d845}.tag-android{background:#a4c34a;color:#fff}.tag-stripe{color:#fff;background:#6675e0}.tag-machine-learning{color:#fff;background:var(--purple-light)}.tag-python{color:#ffda5d;background:#3879ab}.tag-svelte{color:#fff;background:#ff3e00}.tag-react{color:#00d8ff;background:#222}.tag-ios{color:#fff;background:#000}.tag-minimum-viable-product,.tag-mvp{color:#fff;background-image:linear-gradient(90deg,#ff8901,#db1d5f);font-weight:700}.tag-ionic{background:#fff;color:#4a8afc}.tag-nest{color:#e0234e;background:#000}.tag-graphql{color:#fff;background:#e10097}.tag-electron{color:#313244;background:#adecf3}.gradient-text{background-image:linear-gradient(to top,var(--tw-gradient-stops));--tw-gradient-from:#f97316;--tw-gradient-to:rgb(249 115 22 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to:#eab308;background-clip:text;color:#0000;-webkit-background-clip:text}.toc-active{font-weight:700;color:#e86c1a}.toc-scrollable{max-height:calc(100vh - var(--navbar-height) - 100px);overflow-y:auto}.hextra-toc{a:hover { color:var(--link-color); } a:target { color:var(--link-color); } a:visited { color:var(--link-color); }}.notes-blogs-wrapper{margin-bottom:40px;display:flex;flex-wrap:wrap;justify-content:center}.notes-blog-card{overflow:hidden;border-radius:.5rem;position:relative;width:350px;margin:1rem;transition:.5s all ease-in-out}.notes-blog-card-thumb{position:absolute;object-fit:cover;height:12rem;width:100%}.blog-category-tag{font-size:.8rem;font-weight:700;color:#fff;background:red;padding:.5rem 1.3rem .5rem 1rem;text-transform:uppercase;position:absolute;z-index:1;top:1rem;border-radius:0 2rem 2rem 0}.popular{background:var(--clr-popular)}.technology{background:var(--clr-technology)}.psychology{background:var(--clr-psychology)}.notes-blog-card-body{margin:13rem 1rem 1rem}.notes-blog-tags{}.notes-blog-tag{background:-webkit-linear-gradient(-70deg,#8250df,#d42a32);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}.notes-blog-tag:is(html[class~=dark] *){background:linear-gradient(140deg,#d2a8ff 12.09%,#f778ba 42.58%,#ff7b72 84.96%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.notes-blog-title{line-height:1.5rem;margin:1rem 0 .5rem}.notes-blog-description{color:var(--clr-gray-med)}.notes-blog-description:is(html[class~=dark] *){color:var(--clr-gray-light)}.notes-blog-cover{width:100%;height:auto;border-radius:.5rem;margin-top:1rem;margin-bottom:1rem;aspect-ratio:16/9;object-fit:cover;object-position:center}.blogs-wrapper{margin-top:0;margin-bottom:40px;display:flex;flex-wrap:wrap;justify-content:center}.blog-card{overflow:hidden;position:relative;width:350px;margin:1rem;transition:250ms all ease-in-out;border-radius:.5rem}.blog-card-description{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.blog-card:hover{.blog-card-title { color: #003b6c; } h3 { color: #0969da; text-decoration: underline; }}.blog-card:hover:is(html[class~=dark] *){h3 { color: #79c0ff; }}.blog-card-image{border-radius:.5rem}.blog-card-image .blog-card-thumb{border-radius:.5rem;object-fit:cover;height:12rem;width:100%}.mona-sans{font-family:mona sans,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;font-variation-settings:"wdth" 100}.blog-card-tag:is(html[class~=dark] *){background:linear-gradient(140deg,#d2a8ff 12.09%,#f778ba 42.58%,#ff7b72 84.96%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.blog-card-tag{background:-webkit-linear-gradient(-70deg,#8250df,#d42a32);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.about-card-body{display:flex;align-items:center;justify-content:center;margin-bottom:5rem}.about-card{--transition-duration:700ms;color:#fff;position:relative;border-radius:.6em;overflow:hidden;font-size:120%;height:min(21em,90vh);max-width:90vw;aspect-ratio:16/9;box-shadow:var(--shadow-lg),var(--shadow-lg),var(--shadow-lg);transition:transform var(--transition-duration);&::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% -150%,transparent 60%,rgba(0,0,0,0.9)); transition:box-shadow var(--transition-duration); mix-blend-mode:overlay; }}.about-img{height:100%;width:100%;transition:transform var(--transition-duration);object-fit:cover;object-position:center;margin-top:0}.about-content{z-index:1;position:absolute;bottom:min(2.5em,6vmin);left:min(3em,8vmin);right:min(3em,8vmin);text-align:left;transition:transform var(--transition-duration)var(--ease-in-out);>* { position: relative; will-change: transform; } h1 { font-size: 5rem; margin: 0; padding: 0; -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }}h1:not(html[class~=dark] *){font-size:1.8em;color:inherit;margin:0}h1:is(html[class~=dark] *){font-size:1.8em;color:inherit;margin:0}.infos{font-size:.8em;font-weight:700;color:#eee;display:flex;gap:.35em;align-items:flex-end;span { line-height: 1; }}.synopsis{font-size:.8em;line-height:1.4;margin-block:.75em;transition-delay:calc(var(--transition-duration)/8);transition-property:opacity,transform;transition-duration:calc(var(--transition-duration)/2)}.icons{display:flex;gap:.5em;svg { height: 1.2em; width: auto; transition-property: opacity, transform; transition-duration: calc(var(--transition-duration) / 2); transition-delay: 0s; }}.about-card:hover{transform:scale(1.03);.about-img { transform: scale(1.03); } .synopsis { transition-duration: var(--transition-duration); transition-delay: calc(var(--transition-duration) / 3); text-shadow: -1px -1px 0 #202020, 1px -1px 0 #202020, -1px 1px 0 #202020, 1px 1px 0 #202020; } .icons svg { &:nth-child(1) { transition-delay: calc(var(--transition-duration) / 1.8); } &:nth-child(2) { transition-delay: calc(var(--transition-duration) / 1.6); } &:nth-child(3) { transition-delay: calc(var(--transition-duration) / 1.4); } }}.about-card:not(:hover){.synopsis { opacity: 0; transform: translateY(1em); } .icons svg { opacity: 0; transform: translateY(50%); } .about-content { transform: translateY(calc(100% - 4.5em)); }}.hextra-toc{a:hover { color:#4d97b2; } a:target { color:#4d97b2; }}.course-card-btn{display:block;width:100%;padding-top:.75rem;padding-bottom:.75rem;padding-left:1.5rem;padding-right:1.5rem;text-align:center;--tw-bg-opacity:1;background-color:hsl(204deg 100% calc(calc(50%/50) * 45)/1);border:none;border-radius:.4rem;transition:200ms;cursor:pointer;span { margin-left: 0.5rem; }}