@import url('https://early.webawesome.com/webawesome@3.0.0-beta.4/dist/styles/webawesome.css');
@import url('https://early.webawesome.com/webawesome@3.0.0-beta.4/dist/styles/themes/default.css');

/* Your global tweaks */
:root {
    color-scheme: light dark; /* lets UA pick form controls, etc. */
}
/* Optional dark tokens if you want */
@media (prefers-color-scheme: dark) {
    :root { }
}

/* App-wide utilities (tiny) */
.container { max-width: 1100px; margin-inline: auto; padding: 1rem; }
.hidden { display: none !important; }

.card-media {
    max-width: 300px;
}

.img {
    width: 64px;
}

@view-transition {
    navigation: auto;
}

/* Both Pages */
body {
    view-transition-name: content;
}

/* Both Pages */
::view-transition-old(content) {
    animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

::view-transition-new(content) {
    animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* Both Pages */
@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        opacity: 0;
        transform: translateX(calc(50% * var(--direction)));
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(calc(-50% * var(--direction)));
    }

    100% {
        transform: translateX(0%);
    }
}