/* Dark mode */

    @media (prefers-color-scheme: dark) {
        body {
            caret-color: rgba(255, 255, 255, 0.9);
            background-color: rgb(47, 52, 55);
            color: rgba(255, 255, 255, 0.9);
        }
        img {
            filter: grayscale(30%);
        }
        h1, h2, h3, h4, h5, h6,p {
            color: rgba(255, 255, 255, 0.9);
        }
        a:visited {
            color: #993F5F;
        }
        a {
            color: #036ffc;
        }
        /* block code */
        code {
            background-color: transparent;
        }
        /* inline code */
        p code, li > code {
            color: #bf616a;
        }
        .nav {
            background-color: black;
        }
        .footer {
            background-color: black;
        }

        details[open] > summary{
            color:  #993F5F;
        }
        
        details:not([open]) > summary{
            color: #036ffc;
        }

        .navigation-primary {
            background-color: rgb(55, 60, 63);
        }

        .navigation-link {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .navigation-link .is-active{
            color: rgba(255, 255, 255, 0.6);
        }

        footer.footer {
            background-color:rgb(55, 60, 63);
        }
        
    }

    /* Light mode */

    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
            color: black;
            /* transition: background-color 300ms ease-in-out 0s; */
        }
        /* inline code */
        p code, li > code {
            /* padding: .25em .5em;
            font-size: 85%; */
            color: #bf616a;
            background-color: #f9f9f9;
            border-radius: 3px;
        }
        .nav {
            background-color: white;
        }
        .footer {
            background-color: white;
        }

        details[open] >summary{
            color:  #551A8B;
        }
        
        details:not([open])>summary{
            color: #0000EE;
        }

        h1, h2, h3, h4, h5, h6,p {
            color: #2f3437;
        }

        footer.footer {
            background-color: #f7f6f3;
        }
        
        
    }