* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Bahnschrift, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 200;
    margin: 0px;
    padding: 10px 8px;

    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    /*border: 2px salmon solid;*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

main {
    padding: 20px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
    border: 1px solid white;
}

nav {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgb(235,235,235);
    padding: 5px;
    /*font-size: 1.2rem;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 5px;
}

nav a {
    min-width: 120px;
    font-size: 0.7rem;
    display: inline-block;
    padding: 5px;
    border: 1px solid white;
    color: white;
    background-color: rgba(60,60,60);
    text-decoration: none;
    text-align: center;
}

nav a:hover {
    color: black;
    background-color: lemonchiffon;
    border-color: black;
}


section.summary {
    /*font-size: 1.15rem;*/
    scroll-margin-top: 60px;
    margin-bottom: 50px;
}

section.summary p {
    font-weight: 400;
    border: 1px solid lightgray;
    border-radius: 0px 10px;
    padding: 5px;
    margin: 0px;
    color: darkblue;
    background-color: rgba(200,200,255,0.3);
}

section.summary ul,
section.summary div,
section.summary img {
    margin-top: 0px;
    margin-left: 10px;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-radius: 0px 0px 5px 5px;
    padding-bottom: 5px;
}

section.summary img {
    padding-bottom: 0px;
}

section.summary table {
    table-layout: fixed;
}

section.summary table th {
    background-color: aquamarine;
}

pre {
    font-family: Consolas,'Courier New', Courier, Menlo, 'Roboto Mono', monospace;
    font-size: 0.8rem;
    color: white;
    background-color: rgb(20,20,20);
    overflow: auto;
    tab-size:4;
    padding: 5px;
}

.grid-2s {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 3px;
    row-gap: 5px;
}

div.grid-2s div {
    margin: 0px;
    border: none;
    border-radius: 0px;
    padding: 3px 5px;
}

.grid-2s .header {
    font-weight: 600;
    background-color: aquamarine;
}

span.m1 {
    background-color: coral;
}



@media (max-width: 500px) { 
    nav { column-gap: 3px; }
    nav a { min-width: 40px; padding: 2px 5px;}

    .grid-2s { grid-template-columns: auto; }
    .grid-2s .header { display: none; }
    .grid-2s .row1 { font-weight: 600; background-color: aquamarine;}
    .grid-2s .row2 { font-size: 1.05rem; margin-bottom: 5px;}

}