*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}:root{--root-nav-background: pink;--root-nav-bt-text: white;--root-nav-bt-background: grey;--root-nav-bt-border: 2px solid white;--root-nav-bt-hover-text: grey;--root-nav-bt-hover-background: white;--root-nav-bt-hover-border: 2px solid grey}.site-container{background-color:pink;width:100%;height:100vh;display:grid;grid-template-columns:1fr;grid-template-areas:"INFO" "ASIDE" "MAIN";transition:grid-template-rows ease-in .25s}@media (min-width: 992px){.site-container{grid-template-columns:minmax(300px,1fr) 3fr;grid-template-rows:minmax(169px,1fr) 2fr;grid-template-areas:"INFO MAIN" "ASIDE MAIN"}}header{background-color:red;grid-area:INFO}main{background-color:#00f;grid-area:MAIN}aside{background-color:green;grid-area:ASIDE;min-height:0}@media (max-width: 992px){.mobile-aside-on{grid-template-rows:200px calc(100vh - 254px) 54px}.mobile-aside-off{grid-template-rows:200px 54px calc(100vh - 254px)}}.root-nav{padding:2px;background-color:var(--root-nav-background);height:100%;display:flex;flex-direction:column;align-items:center;gap:2px;overflow-y:scroll}.root-nav__btn{height:50px;width:100%;color:var(--root-nav-bt-text);background-color:var(--root-nav-bt-background);text-decoration:none;font-size:1.5em;border:var(--root-nav-bt-border);cursor:pointer;display:flex;align-items:center;justify-content:center}.root-nav__btn:hover{color:var(--root-nav-bt-hover-text);background-color:var(--root-nav-bt-hover-background);border:var(--root-nav-bt-hover-border)}.not-found-header{color:#fff;background-color:red;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.5em}.not-found-main{color:#fff;background-color:#00f;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:2em}@media (min-width: 768px){.not-found-main{font-size:3em}}.not-found-main a{color:red}.intro-header{background-color:sienna;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.5em}.intro-main{color:sienna;background-color:wheat;text-align:center}.intro-main h2{font-size:3em;margin-top:25px}.intro-main h3{font-weight:400;font-size:1.25em}.intro-main ul{margin-top:25px;list-style:none}.intro-main ul li{margin:10px}.intro-main ul li a{color:sienna}.intro-main p{margin-top:25px}@media (min-width: 768px){.intro-main h2{font-size:4em;margin-top:100px}.intro-main h3{font-size:2em}}.tetris-header{color:#fff;background-color:#000;outline:2px solid white;outline-offset:-4px;display:flex;justify-content:center;align-items:center}.tetris-header p{font-family:monospace;text-align:center}@media (min-width: 992px){.tetris-header p{font-size:1.25em}}.tetris-main{color:#fff;background-color:#000;display:flex;flex-direction:column;justify-content:center;align-items:center}.shaders-header{background-color:gray;padding:5px;display:flex;gap:5px}.shaders-header .shaders-nav-btn{background-color:#fff;border:5px solid black;width:50px;height:50px}.shaders-main{background-color:gray;display:flex}.shaders-main .sketch-container-wrapper{width:100%;overflow:hidden}.rainbow-bg{animation:rainbow-bg 2.5s linear;animation-iteration-count:infinite}.rainbow-text{animation:rainbow 2.5s linear;animation-iteration-count:infinite}@keyframes rainbow-bg{to,0%{background-color:red}8%{background-color:#ff7f00}16%{background-color:#ff0}25%{background-color:#7fff00}33%{background-color:#0f0}41%{background-color:#00ff7f}50%{background-color:#0ff}58%{background-color:#007fff}66%{background-color:#00f}75%{background-color:#7f00ff}83%{background-color:#f0f}91%{background-color:#ff007f}}@keyframes rainbow{to,0%{color:red}8%{color:#ff7f00}16%{color:#ff0}25%{color:#7fff00}33%{color:#0f0}41%{color:#00ff7f}50%{color:#0ff}58%{color:#007fff}66%{color:#00f}75%{color:#7f00ff}83%{color:#f0f}91%{color:#ff007f}}