@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply text-slate-900 text-lg font-serif bg-white xl:flex;
}
nav#topbar {
    @apply w-full flex justify-around content-center text-white bg-slate-800 p-2 text-xl xl:hidden;
}
nav#topbar p {
    @apply p-0 m-0;
}
nav#sidebar {
    @apply bg-slate-800 hidden max-w-sm p-12 xl:flex-none xl:block;
}
.nav-list details summary {
    @apply text-pink-300;
}
ul.nav-list:first-child {
    @apply mt-0;
}
ul.nav-list > li:first-child {
    @apply uppercase;
}
.level1 {
    @apply list-none mt-4;
}
.level1.nav-node h5, .level1.nav-header h5 {
    @apply text-pink-300 my-2;
}
.level1.nav-leaf > h5 {
    @apply text-pink-300 my-2;
}
.level2.nav-leaf {
    @apply list-none text-slate-300 pl-4;
}

#content {
    @apply flex-auto p-12;
}

main {
    display: grid;
    grid-template-columns: [main-start] minmax(20ch, 70ch) [main-end] minmax(0ch,20ch) [overflow-end];
}
h1, h2, h3, h4, h5 {
    @apply text-pink-800;
}
h1 {
    @apply text-6xl mb-16;
}
h2 {
    @apply text-4xl mt-8 mb-4;
}
h3 {
    @apply text-2xl mt-8 mb-4;
}
h4 {
    @apply text-xl mt-8 mb-4;
}
h5 {
    @apply text-lg mt-8 mb-4;
}
p {
    @apply mb-4;
}
a {
    @apply hover:underline hover:decoration-solid;
}
.content a {
    @apply underline decoration-dotted decoration-1 hover:decoration-solid;
}
.content * {
    grid-column-start: main-start;
    grid-column-end: main-end;
}
.content ol.arabic {
    @apply list-decimal list-outside pl-4 mb-4;
}
.content ul {
    @apply list-disc list-outside pl-4 mb-4;
}
.content pre {
    grid-column-start: main-start;
    grid-column-end: overflow-end;
}
.content table.footnote tbody tr td {
    @apply pr-4 text-sm;
}
pre {
    @apply mb-4 p-2 bg-slate-100;
}
.content div.doodle {
    @apply my-4;
    margin-left: auto;
    margin-right: auto;
}
.content p img {
    @apply my-4;
    margin-left: auto;
    margin-right: auto;
}
.content div.callout {
    @apply my-4 p-4;
}
.content div.info {
    @apply bg-blue-200;
}
.content div.warn {
    @apply bg-amber-200;
}
details summary {
    cursor: pointer;
    @apply text-yellow-800;
}
details summary > * {
    display: inline;
}
.exercise {
    @apply pb-4;
    grid-column-start: main-start;
    grid-column-end: overflow-end;
    display: grid;
    grid-template-columns: [main-start] minmax(20ch, 70ch) [main-end] minmax(0ch,20ch) [overflow-end];
}
.exercise * {
    grid-column-start: main-start;
    grid-column-end: main-end;
}
.exercise pre {
    grid-column-start: main-start;
    grid-column-end: overflow-end;
}
.solution {
    @apply pb-4;
    grid-column-start: main-start;
    grid-column-end: overflow-end;
}
.solution details .solution-body {
    display: grid;
    grid-template-columns: [main-start] minmax(20ch, 70ch) [main-end] minmax(0ch,20ch) [overflow-end];
}
.solution details .solution-body * {
    grid-column-start: main-start;
    grid-column-end: main-end;
}
.solution details .solution-body pre {
    grid-column-start: main-start;
    grid-column-end: overflow-end;
}
code {
    @apply text-sm;
    font-family: "Source Code Pro", ui-monospace, monospace;
}
pre code .number-literal, .char-literal, .boolean-literal, .string-literal {
    @apply text-sky-600;
}
pre code .keyword {
    @apply text-rose-600;
}
pre code .identifier {
    @apply text-slate-600;
}
pre code .type-name {
    @apply text-green-600;
}
pre code .declaration-name {
    @apply text-blue-600;
}
pre code .comment {
    @apply italic;
}


.pageNavigation {
    @apply mt-4 text-xl text-pink-800;
}
footer {
    @apply mt-4 pt-4 border-t-2 border-slate-300 text-slate-300 text-center text-sm font-sans;
}
