:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}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 .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#sidebar{width:100%;height:120px;min-height:120px;display:flex;z-index:1111;border-bottom:1px dashed #fff}#sidebar .nav-box{width:100%;max-width:100%;margin:1rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}#sidebar .nav-box a{color:#fff;white-space:nowrap;font-size:1.5rem;font-family:Alumni Sans Pinstripe;text-decoration:none;transition:font-size .5s ease}#sidebar .nav-box:hover a{font-size:3rem;color:#fff;white-space:nowrap}#sidebar #logo{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:#000;color:#fff;border-radius:50%;font-weight:800;font-family:Jost,sans-serif;font-size:24px}#root{width:100%;text-align:center}#main{position:relative;max-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;background-color:#011f5f;background-color:#1d0413;transition:all ease-in-out 1s;overflow:hidden}#main h1{position:absolute;top:15%;left:7%;margin:0;width:50%;text-align:left;z-index:0;font-size:11rem;opacity:0;transform:translate(100%);transition:transform .5s ease,opacity .5s ease}#main h1.animate{opacity:.7;transform:translate(0)}#main #background{position:absolute;width:100%;height:100vh;overflow:hidden;top:0;left:0;filter:blur(10px);opacity:.5}#main #main-content{display:flex}#main #main-legend{position:absolute;top:0%;left:0%;width:20%;display:flex;flex-direction:column;flex-wrap:wrap;font-family:Poiret One;z-index:111}#main #main-legend p{font-size:2rem}#main #main-legend.hide{animation:slideLegend .5s ease forwards}#main #banner-container{position:absolute;top:20%;right:10%;cursor:pointer;width:500px;height:600px;max-height:600px;overflow:hidden;border:1px solid #fff;border-radius:40px}#main .hover-img{width:100%;height:auto;opacity:0;transform:translate(100%);animation:slideIn 1s ease forwards;filter:brightness(60%);object-fit:cover}#main .hover-description{position:absolute;background-color:#000;top:0;width:100%;opacity:0;transform:translateY(100%);animation:slideIn 1s ease forwards;height:100%}#main .hover-description .text{width:70%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;font-family:Poiret One}#main .hover-description .text h1{font-weight:900}#main .hover-description .text p{font-size:1.5rem}#main .btn-container{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}#main .btn-container button{width:150px;max-width:150px;min-width:140px;height:40px}#main .btn-container #dropdown-btn{margin-top:1rem;position:relative;right:0;background-color:transparent;border:1px solid #fff}#main .btn-container .dropdown{position:absolute;top:0;display:flex;flex-direction:column;height:0;opacity:0;animation:slideDown .5s ease forwards}#main .btn-container .dropdown button{border-radius:0;background-color:transparent;border:none}#main .btn-container .dropdown button:hover{background-color:#888}@keyframes slideIn{to{opacity:1;transform:translate(0)}}@keyframes slideDown{to{opacity:1;height:auto;top:100%;transform:translateY(0)}}@keyframes slideLegend{to{opacity:0;transform:translate(100%)}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(100,108,255,.6666666667))}.logo.react:hover{filter:drop-shadow(0 0 2em rgba(97,218,251,.6666666667))}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}