@import url(./reset.css);
@import url(./blocks.css);
@import url(./font-page.css);

@view-transition {
    navigation: auto;
}
::view-transition-group(*) {
    animation-duration: .5s;
    animation-timing-function: ease-out;
    z-index: 1;
}

:root {
    --bg-clr: hsl(240, 3%, 8%);
    --theme-clr: hsl(203, 100%, 23%);
    --text-clr: hsl(217, 89%, 78%);

    --app-width: 85%;
}

html {
    scrollbar-gutter: stable;
    /* scroll-behavior: smooth; */
    will-change: transition;
}

body {
    background-color: var(--bg-clr);
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: var(--text-clr);
    display: flex;
    flex-direction: column;
    
    opacity: 0;
    animation: fadeInOnLoad 500ms ease-in forwards;
}

@keyframes fadeInOnLoad {
    to { opacity: 1; }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

@media screen and (width < 1024px) {
    .desktop-only-app {
        display: grid;
        place-items: center;
        position: absolute;
        inset: 0;
        background-color: var(--bg-clr);
        font-size: 4vw;
        color: var(--text-clr);
        outline-offset: -5rem;
        outline: 1px solid var(--text-clr);
    }

    body > :not(.desktop-only-app) {
        display: none;
    }
}