/* The disc: one bar on top of every screen (src/partials/disc-bar.html), in the navy of the main menu,
   keys drawn as boxes, links in yellow; the screen you are on is boxed like a key. */
.bar { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; background: #000033; color: #CCEEFF;
  padding: 9px 14px; border-bottom: 2px solid #FFCC00; font: 15px/1.3 "Arial Rounded MT Bold", "Arial Black", Arial, Helvetica, sans-serif; }
.bar a { color: #FFFF66; text-decoration: none; padding: 0 5px; border: 1px solid transparent; }
.bar a:hover, .bar a:focus { text-decoration: underline; }
.bar .gap { flex: 1; }
.bar kbd { font: inherit; color: #FFFFFF; border: 1px solid #6699CC; padding: 0 5px; margin: 0 2px 0 0; }
[data-page="cv"] .bar [data-nav="cv"], [data-page="projects"] .bar [data-nav="projects"], [data-page="contacts"] .bar [data-nav="contacts"] {
  color: #FFFFFF; border-color: #6699CC; text-decoration: none; pointer-events: none; }
@media (hover: none), (max-width: 600px) { .bar kbd { display: none; } }
@media (max-width: 600px) { .bar { gap: 6px 12px; } }