body { display: flex; flex-flow: column; height: 100vh; margin: 0; font-family: Helvetica, sans-serif; background-color: #222; color: white; } .hidden { display: none; } nav { overflow-x: auto; font-weight: bold; font-size: 12pt; display: flex; } nav img { max-height: 2em; } nav a { padding: 0.5em 1.5em; color: #aaa; text-decoration: none; white-space: nowrap; } nav a[data-no-menu] { display: none; } nav a:hover { background: #555; } nav a.active { background: #8b8; color: black; } #app { flex-grow: 1; } iframe { display: block; border: none; width: 100%; height: 100%; } .icons { margin: auto 2em; } .icons { display: flex; flex-wrap: wrap; justify-content: center; max-width: 40em; margin: auto; gap: 20px; } .icons a { background-color: #444; color: #fff; width: 120px; height: 120px; border-radius: 10px; display: flex; justify-content: center; align-items: center; } .icons a img, .icons a canvas { max-width: 75%; max-height: 75%; width: 100%; height: 100%; image-rendering: pixelated; }