/* Keep the original layout while making loading independent of external images. */
#preloader { display: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.navigation > button { display: inline-block; }
.close-btn { padding: 0; }
.cat-btn { display: block; }
.cat-list a { display: inline-block; }
.video-thumbnail img { width: 100%; max-width: 90vw; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #1b1b1b; }
.portfolio-status { margin: 1rem 30px; }
.portfolio-player { position: fixed; padding: 0; border: 0; background: transparent; color: white; width: min(1100px, 94vw); max-width: 94vw; overflow: visible; }
.portfolio-player::backdrop { background: rgba(0, 0, 0, .92); }
.player-content { background: black; aspect-ratio: 16 / 9; }
.player-content iframe { width: 100%; height: 100%; border: 0; }
.player-close { position: absolute; right: 0; top: -42px; font-size: 36px; width: 40px; height: 40px; }
a:focus-visible, button:focus-visible { outline: 2px solid white !important; outline-offset: 4px; }
@media (min-width: 900px) {
    .cat-btn { display: none; }
    .cat-list ul li { font-size: 12px; display: inline-block; margin-right: 20px; }
    .cat-list a { font-size: 12px; line-height: 20px; color: #a7a7a7; font-weight: 400; }
    .cat-list a:hover, .cat-list a[aria-current="true"] { color: white; }
    .navigation > button { color: #a7a7a7; font-size: 12px; font-weight: 400; }
}