/* layout */
.grid {
    grid-template-columns: 25% 1fr;
}

@media screen and (max-width: 600px) {
  .grid {
      grid-template-columns: 1fr;
   }
}

.skip-link {
    background: rgb(211, 211, 211);
    color: rgb(57, 52, 134);
    left: 50%;
    padding: 8px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}
  
.skip-link:focus {
    transform: translateY(0%);
}

/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 6px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

/* headings */

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* toc */

.back {
    text-transform: uppercase;
    font-size: x-small;
    color: var(--contrast);
}

aside > nav > ul > li > a {
    color: var(--primary);
    text-transform: uppercase;
    font-size: small;
}

aside > nav > ul > li > ul > li > a {
    font-size: x-small;
    margin-bottom: 0;
    padding-bottom: 0;
 }

@media (min-width: 992px) {
    main aside nav {
        position: fixed;
        width: 200px;
        max-height: calc(100vh - 5.5rem);
        margin-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* References */

div.csl-entry {
    margin-left:2em;
    text-indent:-2em;
    margin-bottom: 1em;
}

/* Questions */

details {
    background-color: var(--contrast);
    padding: 1em;
}

details summary {
    font-weight: bold;
    color: var(--background-color);
}

details summary:focus {
    color: var(--background-color);
}

details p {
    color: var(--background-color);
}

/* boxes */


.box {
    margin: var(--block-spacing-vertical) 0;
    padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
    overflow: hidden;
    border-radius: var(--border-radius);
    background: var(--card-background-color);
    box-shadow: var(--card-box-shadow);
}