:root{--font-size: 16px;--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-monospace: "Courier New", monospace;color-scheme:light dark;box-sizing:border-box;--base-color: hsl(45, 28.6%, 97.3%);--base-background-color: hsl(216, 12.2%, 83.9%);--base-background-color: #e8eaec;--base-background-color: hsl(0, 0%, 94.51%);--base-background-color: #f1f1f1;--base-background-hover: hsl(0, 0%, 94.51%);--base-background-color-2: hsl(0deg 0% 97.25%);--base-border-color: #e3e3e3;--base-box-shadow-color: rgba(99, 99, 99, .4);--base-color-light: hsl(0, 0%, 100%);--base-color-dark: hsl(43, 4.3%, 68%);--base-color-dark-2: #e2e2e2;--base-text-color: #000000;--base-title-color: #1c212d;--base-subtitle-color: #888a8c;--base-link: hsl(216, 100%, 50%);--base-gradient: linear-gradient(135deg, #f3f4f6, #d1d5db);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--main-color: #f5f5f5;--base-background-color: #282828;--base-background-color: #1b1b1b;--base-title-color: #f5f5f5;background-color:#232323;--base-background-hover: #1b1b1b;--base-border-color: rgb(57, 57, 57)}}p,a,h1,h2,h3,h4,h5,h6{margin:0;padding:0}a{color:var(--base-title-color);text-decoration:none;transition:color .3s ease}a:hover{color:var(--base-link)}h1{font-size:2rem;line-height:2rem}body{margin:0;font-family:var(--font);font-size:var(--font-size)}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;min-height:100vh;display:flex;justify-content:center;align-items:center}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .3s}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{background-color:#fff}button{background-color:#f9f9f9}}#header{height:100vh;background:url(/learn/javascript/vite/assets/colin-watts-YwwUXa6NvX4-unsplash-BFmLi_mw.jpg);background:url(/learn/javascript/vite/assets/marek-piwnicki-kE1zeGSBJJk-unsplash-D-nyPvx2.jpg);background:url(/learn/javascript/vite/assets/marissa-rodriguez-2mKYEVGA4jE-unsplash-2-WMLL09IW.jpg);background:url(/learn/javascript/vite/assets/blair-fraser-VF4t6jLMD5g-unsplash-DfymUiTk.jpg);background-size:cover;position:relative}#header:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#0000,#00000040 60%,#000000bf);z-index:10}#header .header{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1rem;position:sticky;top:0rem;z-index:1000}#header .header .logo{padding:1rem;border-radius:.5rem;background-color:var(--base-background-color);box-shadow:var(--box-shadow-color) 0 2px 8px 0;color:var(--base-title-color);will-change:filter;transition:filter .3s}#header .header .nav{display:flex;justify-content:end;align-items:center;padding:1rem;border-radius:.5rem;background-color:var(--base-background-color);box-shadow:var(--base-shadow-color) 0 2px 8px 0;color:var(--base-title-color)}#header .header .nav ul{list-style:none;padding:0;margin:0;display:flex;gap:1rem}#header .header .nav ul li a{text-decoration:none;font-weight:500}#header .title{font-size:16rem;display:flex;justify-content:center;align-items:center;align-content:flex-end;height:calc(100svh - 12rem);transform:translateY(12rem);opacity:0;animation:slideUp 1.2s ease-out forwards;color:#fff;z-index:998;transition:all .2s ease;position:relative}@media (max-width: 1280px){#header .title{font-size:12rem}}@media (max-width: 1024px){#header .title{font-size:8rem}}@media (max-width: 640px){#header .header{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}#header .title{font-size:6rem}}@media (max-width: 480px){#header .header{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}#header .title{font-size:3rem}}@keyframes slideUp{to{transform:translateY(0);opacity:1}}#aside{padding:1rem;z-index:999}#aside h3{color:var(--base-subtitle-color)}#aside .sidebar-links{display:flex;overflow-x:auto;gap:1rem;margin:1rem 0 0;padding:0 0 .5rem}#aside .sidebar-links .sidebar-link{flex:0 0 calc((100% - 3rem) / 5.2);min-width:200px;height:200px;background:var(--base-background-color);padding:1rem;list-style:none;border-radius:.5rem;border:1px solid var(--base-background-color)}#aside .sidebar-links .sidebar-link:hover{background-color:var(--base-background-hover);border:1px solid var(--base-border-color)}#main-content{padding:1rem}#main-content .content{display:flex;gap:1rem;margin:1rem 0}#main-content .content p{flex-grow:1;flex-shrink:1;flex-basis:0%}@media (max-width: 640px){#main-content .content{flex-direction:column}}#main-content .cards{display:grid;grid-gap:1rem;grid-template-columns:1fr 1fr 1fr 1fr;grid-auto-rows:minmax(1rem,auto);margin:1rem 0}#main-content .cards .card{background-color:var(--base-background-color);padding:1rem;border-radius:.5rem;border:1px solid var(--base-background-color);transition:transform .3s ease;position:relative}#main-content .cards .card:hover{border:1px solid var(--base-border-color)}#main-content .cards .card img{width:calc(100% + 2rem);margin:-1rem -1rem .5rem;border-radius:.5rem .5rem 0 0}#main-content .cards .card .button__like{padding:0;position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center;border:none;width:2rem;height:2rem;line-height:1;background-color:#fff3;border-radius:100%}#main-content .cards .card .button__like:hover{background-color:#ffffff80;transform:scale(1.1);transition:all .2s ease}#main-content .cards .card .button__like:hover svg{fill:#ffb6c1}#main-content .cards .card .button__like svg{fill:var(--base-title-color);width:1.2rem;height:1.2rem}@media (max-width: 1180px){#main-content .cards{grid-template-columns:1fr 1fr 1fr}}@media (max-width: 768px){#main-content .cards{grid-template-columns:1fr 1fr}}@media (max-width: 640px){#main-content .cards{grid-template-columns:1fr}}#main-content .grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(16rem,auto);grid-gap:1rem;margin-bottom:1rem}#main-content .grid .box{background-color:var(--base-background-color);padding:1rem;border-radius:.5rem;border:1px solid var(--base-background-color)}#main-content .grid .box:hover{border:1px solid var(--base-border-color)}#main-content .grid .box.a{grid-column:1 / span 2}#main-content .grid .box.b{grid-column:3;grid-row:1 / span 2}#main-content .grid .box.e{grid-column:1 / span 3;grid-row:3}#footer{padding:4rem 1rem;background-color:var(--base-background-color)}#footer:after{content:"";height:.5rem;width:100%;background:var(--base-border-color);left:0;bottom:0;position:fixed;animation:progress-expand;animation-timeline:scroll()}@keyframes progress-expand{0%{width:0%}to{width:100%}}#append-body{min-height:100vh;display:flex;align-items:center;justify-content:center}.scroll-reveal{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1);transition:.6s ease}.scroll-reveal.visible{opacity:1;transform:translateY(0)}.spin{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}