body{width:100vw;height:100vh;margin:0;display:grid;grid-template-columns:15vw auto;grid-template-rows:min-content auto;grid-template-areas:"header header" "nav main";overflow:hidden}body main{overflow-y:auto}@media screen and (max-width: 768px){body{grid-template-columns:none;grid-template-rows:min-content min-content auto;grid-template-areas:"header" "nav" "main";overflow-y:auto}body main{overflow-y:unset}}header{grid-area:header;padding:1em}nav{grid-area:nav}nav ul{display:flex;align-items:stretch;flex-direction:column;list-style-type:none;margin:0;padding:0}@media screen and (max-width: 768px){nav ul{flex-direction:row}}nav ul li a{padding:1em;display:block}main{grid-area:main;padding:1em}header,footer{background-color:#1a2243;font-family:"Source Code Pro",monospace}body{background-color:#223643;color:#fbf9f0;font-family:"Montserrat",sans-serif}pre{font-family:"Source Code Pro",monospace}nav{background-color:#579fb3;color:#1a2243}nav ul li a{text-decoration:none;transition:background-color ease-out 200ms;transition:color ease-out 200ms}nav ul li a:link,nav ul li a:visited{color:inherit}nav ul li a:hover,nav ul li a.nav-active{color:#fbf9f0;background-color:#223643}nav ul li a:active{box-shadow:inset 5px 0 #579fb3}@media screen and (max-width: 768px){nav ul li a:active{box-shadow:inset 0 5px #579fb3}}button{border:none;font-size:larger;padding:4px 8px;transition:all ease-out 200ms;color:#fbf9f0;background-color:#e85f24}button:enabled{cursor:pointer}button:enabled:hover{background-color:#ea6b34}button:enabled:active{background-color:#ee9065}button:disabled{opacity:38%}pre{margin:0}pre>*,svg{color:inherit;background-color:inherit;border:1px solid;border-color:#579fb3;font-size:medium;white-space:break-spaces;display:block;padding:2px;box-sizing:border-box;min-width:100px;min-height:100px}