main > header { background-color: #0b0b11; position: fixed; width: 100%; height: var(--module-double-n-half); top: 0; box-shadow: 0 0 var(--module) black, 0 0 var(--module-quarter) black; z-index: 10; }

main > header.plain { justify-content: center; align-items: center; position: static; }

main > header.with-logo { background-image: url("logo-prod.svg"); background-repeat: no-repeat; background-position: center; background-size: auto 100%; }

.loading:not(.silent-loading) main > header { background-position: center; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="rgba(255,255,255,0.6)"><style>@keyframes morph {0% { opacity: 0.5;} 50% {opacity: 1} 100% {opacity: 0.5}} circle:nth-child(2) { animation: morph .5s linear 0s infinite } circle:nth-child(3) { animation: morph .5s linear .25s infinite } </style><circle id="c1" cx="20" cy="50" r="20"/><circle id="c2" cx="80" cy="50" r="20"/></svg>'); }

main > header > .Btn { flex: 0 0 var(--module-double-n-half); border-radius: 50%; }

main > header > .Btn:first-child, main > header > .Btn:first-child + .Btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

main > header > .Btn:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

main > header > span { flex: 1 0 var(--module-double-n-half); display: flex; justify-content: center; align-items: center; font-size: 1.3rem; font-weight: bold; }

.loading:not(.silent-loading) main > header > span { visibility: hidden; }

/*# sourceMappingURL=header.css.map */