@import url(layout.css);

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@layer style {

    /* this is kinda magic */
    @view-transition {
        navigation: auto;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: "Source Serif 4", serif;
        font-style: normal;
    }


    body {
        font-family: "Inter", sans-serif;

        color: #444;

        a, :visited {
            color: #020618;
            text-decoration: none;
        }
    }

    aside {
        /* Fade in */
        a {
            overflow: hidden;
            display: block;
            position: relative;
        }

        a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.1em;
            background-color: #020618;
            opacity: 0;
            transition: opacity 300ms, transform 300ms;
        }

        a:hover::after,
        a:focus::after {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        a::after {
            transform: translate3d(-100%, 0, 0);
        }        
    }    

    main {
        a {
            font-weight: bolder;
        }

        a:hover {
            text-decoration: underline;
        }

        table.schema, table.schema {            
            :is(td, th) {
                border-top: 1px solid #eee;
                border-left: 1px solid #eee;
            }

            :is(td,th):last-child {
                border-right: 1px solid #eee;
            }

            tr:last-child td {
                border-bottom: 1px solid #eee;
            }
        }

        table.schema [itemprop='cardinality'] {
            text-align: center;
        }
    }
}