:root {
    --margin-body: .5em;
    --main-color: rgb(193, 193, 193);
    --direction: -1;

    /* --theme-1: #B3ADFF;
    --theme-2: #AAF042;
    --theme-3: #FF464C;
    --theme-4: #1832A5;
    --theme-5: #FFAEED; */
    --font-size-body: 2.5rem;

}



@view-transition {
    navigation: auto;
}

main {
    view-transition-name: content;
    width: clamp(0px, 90%, 1600px);

    word-spacing: -.1ch;
    line-height: 1.11;
}

::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;
}

@keyframes slide-out {
    0% {
        opacity: 1;
    }

    100% {


        opacity: 0;

    }
}

@keyframes slide-in {
    0% {

        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body {
    font-family: "Plantin", sans-serif;
    font-size: 1.5em;
    font-style: normal;

    font-weight: normal;
    line-height: 1;
    font-variant-numeric: oldstyle-nums;


    margin: 0 auto;

}

.button,
nav a {
    padding: .4em .4rem .2rem;
    background-color: rgb(255, 255, 255);
    /* border-radius: .3rem; */

}

/* .button:hover {
    outline: 1px solid black;
} */

main {

    margin: 2rem auto;
    font-size: var(--font-size-body);


}




a {
    color: inherit;
    text-decoration: none;
}

em {
    font-style: italic;
    font-weight: 600;
}

::selection {
    background: var(--main-color);
    color: rgb(0, 0, 0);
}