.app-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:var(--background-color);color:var(--text-color);transition:all .3s ease-in-out}.layout{display:flex;height:100vh;width:100vw}.sidebar{transition:width .3s ease-in-out;overflow:hidden;background-color:var(--nav-background)}.main-content{flex:1;padding:20px}.iframe-content{width:100%;height:100%;border:none}.nav-button{background-color:var(--button-background);color:var(--text-color);border-radius:5px;padding:10px;margin:5px;cursor:pointer}.nav-button:hover{opacity:.8}#root{margin:0 auto;text-align:center;position:absolute;left:0;top:0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@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}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:calc(min(45vh,72vw)*.06);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-color: #ffffff;--nav-background: rgba(42, 67, 147, .27);--button-background: rgb(71, 33, 33);--nav-width: 50vw;--safe-height: 100vh}#root{height:var(--safe-height)!important;width:100vw;display:flex;overflow:hidden;flex-direction:row}@media(prefers-color-scheme:dark){:root{--background-color: #000000;--text-color: #e0e0e0;--nav-background: rgba(19, 30, 58, .7);--button-background: rgba(255, 195, 0, .5)}}html,body{background-color:var(--background-color);color:var(--text-color);transition:background .3s ease,color .3s ease;margin:0;padding:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow-x:hidden}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}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;cursor:pointer;background-color:var(--button-background);color:var(--text-color)}button:hover{border-color:#646cff;opacity:.8}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.navBar{height:var(--safe-height)!important;width:var(--nav-width)!important;max-width:var(--nav-width)!important;min-width:var(--nav-width)!important;background-color:var(--nav-background)}.container{overflow-y:overlay;scrollbar-width:none}.container::-webkit-scrollbar{width:0px;display:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#0095ff73;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#0064c8}::-webkit-scrollbar-track{background:#fff3;border-radius:10px}*{scrollbar-width:thin;scrollbar-color:rgba(0,255,187,.3) rgba(255,255,255,.1)}.no-scroll{overflow:hidden!important;touch-action:none!important}.learningList{list-style-type:none;justify-items:left;text-align:left;width:95%;margin:0;padding-left:1.5em;padding-top:.25em;padding-bottom:.5em;font-size:.8em;border-radius:1em;box-shadow:0 .5vh 1vh #0000001a;background-color:var(--nav-background);box-sizing:border-box}.learningList p{line-height:1.5;padding:0;margin:0}.learningList li{text-indent:-1.5em;padding-left:2em;line-height:1.4;margin-top:.5em}.container{padding-left:2vw;color:var(--text-color);height:calc(var(--safe-height) - 1vh);overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;font-size:calc(min(45vh,72vw)*.06)}.gamesContainer{display:flex;flex-wrap:wrap;justify-content:center;width:95%;gap:2em;align-items:center;padding-left:2em;padding-right:2em;padding-top:.5em;flex-grow:1;box-sizing:border-box}.gameFrame{height:auto;max-height:calc(var(--safe-height) - 15vh);border-radius:1em;box-shadow:0 .5vh 1vh #0000001a;background-color:var(--nav-background);text-align:center;padding-top:.25%;padding-bottom:2vh;padding-right:2vw;padding-left:2vw;transition:transform .2s ease-in-out;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-grow:1;overflow:visible}.gameFrame p{text-align:justify;padding-bottom:.5em;padding-top:.5em;margin:0;font-size:calc(min(40vh,40vw) / 35 * 2)}.gameFrame h2{font-size:1.5em;flex-shrink:1;margin:0;padding-bottom:1%}.gameImage{margin:0;width:100%;max-height:25vh;object-fit:contain;flex-shrink:1;aspect-ratio:16 / 9}.projectContainer{display:flex;flex-wrap:wrap;justify-content:center;width:95%;gap:2em;align-items:center;padding-left:2em;padding-right:2em;padding-top:.5em;flex-grow:1;box-sizing:border-box}.projectFrame{height:auto;max-height:calc(var(--safe-height) - 15vh);border-radius:1em;box-shadow:0 .5vh 1vh #0000001a;background-color:var(--nav-background);text-align:center;padding-top:.25%;padding-bottom:2vh;padding-right:2vw;padding-left:2vw;transition:transform .2s ease-in-out;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-grow:1;overflow:visible}.projectFrame p{text-align:justify;padding-bottom:.5em;padding-top:.5em;margin:0;font-size:calc(min(40vh,40vw) / 35 * 2)}.projectFrame h2{font-size:1.5em;flex-shrink:1;margin:0;padding-bottom:1%}.projectImage{margin:0;width:100%;max-height:20vh;object-fit:contain;flex-shrink:1;aspect-ratio:16 / 9}.projectList{list-style-type:none;justify-items:left;text-align:left;width:95%;font-size:calc(min(40vh,40vw) / 35 * 2);padding-left:1em;padding-bottom:.25em;margin:0;border-radius:1em;box-shadow:0 .5vh 1vh #0000001a;background-color:var(--nav-background);box-sizing:border-box}.projectList p{line-height:1.4;margin-bottom:.5em}.projectList li{padding-left:1em;line-height:1;margin-bottom:.5em}.buttonContainer{display:inline-block;flex-direction:row;font-size:clamp(.4em,.6em,.75em);height:8%;width:90%}.playButton{border:none;background-color:#4caf50;color:#fff;cursor:pointer;font-size:100%;height:100%;width:40%;margin-right:10%}.githubButton{border:none;background-color:#007bff;color:#fff;cursor:pointer;font-size:100%;height:100%;width:40%}.playButton:hover{background-color:#388e3c}.githubButton:hover{background-color:#0056b3}@media(max-width:768px){:root{--nav-width: 60vw}.container{font-size:calc(min(25vh,45vw)*.06)}.gameFrame h2{font-size:2em}.navBar{width:60vw!important;padding-bottom:env(safe-area-inset-bottom)}.navBar button{padding:16px 32px!important}.hideButton{width:95%!important}}