:root{--navigation-panel-bg:#222;--top-panel-bg:#333}.navigation-panel{background:var(--navigation-panel-bg);white-space:nowrap;border-right:5px solid #ffffff1a;flex-direction:column;width:400px;height:100vh;padding:80px 40px;display:flex;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:20px 0 20px #ffffff05}.navigation-panel a{color:#ccc;text-decoration:none;transition:all .5s;display:inline-block}.navigation-panel a:hover{color:#fff}.nav-group{flex-direction:column;display:flex}.nav-children{flex-direction:column;padding:10px 10px 10px 20px;display:flex}main{margin-left:450px}.top-panel{display:none}@media (max-width:1440px){.navigation-panel{opacity:0;pointer-events:none}.navigation-panel.open{opacity:1;pointer-events:auto;min-width:40vw;max-width:90vw;box-shadow:20px 0 20px #00000080}.navigation-overlay{opacity:0;pointer-events:none;transition:opacity .5s}.navigation-overlay.open{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer;background:#00000080;width:100%;height:100%;display:flex;position:fixed;inset:0;box-shadow:inset 0 0 20px #000}.top-panel{background:var(--top-panel-bg);flex-direction:row;justify-content:center;align-items:center;padding:50px;display:flex;position:relative}.top-panel .buttons{flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:100%;padding:50px;display:flex;position:absolute}.top-panel .buttons button{cursor:pointer;background:0 0;border:none}.top-panel .buttons button img{max-width:50px}.top-panel h1{text-align:center;font-size:25px}main{margin-left:0}}