@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    height: 100vh;
    background-color: var(--clrBg);
    color: var(--clrText);
    cursor: default;
}

:root {
    --xxs: 0.5rem;
    --xs: 1rem;
    --s: 1.5rem;
    --m: 2rem;
    --l: 2.5rem;
    --xl: 3rem;
    --xxl: 5rem;

    --headerHeight: 100px;
    --footerHeight: 100px;
    --sidebarWidth: 300px;

    --clrBg: lightsteelblue;
    --clrSurface: aliceblue;
    --clrAccentLight: pink;
    --clrAccentDark: midnightblue;
    --clrText: black;
    --clrOutline: steelblue;
    --clrHighlight: blue;

    --boxShadow: 1px 1px 3px var(--clrOutline);
    --textShadow: -1px 0 var(--clrOutline), 0 1px var(--clrOutline), 1px 0 var(--clrOutline), 0 -1px var(--clrOutline);

    --fontP: normal normal 400 1rem/1.4 "Sour Gummy", sans-serif;
    --fontH: normal normal 500 1.8rem/1.2 "Cherry Bomb One", system-ui;
}

a {
    color: inherit;
    text-decoration: none;
    font: var(--fontP);
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

p {
    font: var(--fontP);
    overflow-wrap: break-word;
    max-width: 100vw;
}

h1,
h2,
h3,
h4 {
    font: var(--fontH);
}

#grid {
    display: grid;
    height: 100%;
    grid-template-columns: var(--sidebarWidth) 1fr var(--sidebarWidth);
    grid-template-rows: var(--headerHeight) 1fr var(--footerHeight);
    grid-template-areas:
        "left header right"
        "left main right"
        "left footer right";
    overflow-x: hidden;
}

#header {
    grid-area: header;
}

#main {
    grid-area: main;
}

#footer {
    grid-area: footer;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

@media (max-width: 600px) {
    #grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    #left,
    #right {
        display: none;
    }

    #main {
        padding: var(--xxs);
    }
}

button {
    padding: var(--xs);
    font: var(--fontP);
    background-color: var(--clrAccentLight);
    border: solid var(--clrSurface);
    border-radius: var(--m);
    cursor: pointer;
}

section {
    margin-bottom: var(--xl);
}

iframe {
    border: none;
}

.divider {
    height: var(--xl);
}

table,
pre {
    font: var(--fontP);
    border-radius: var(--xxs);
    overflow: hidden;
    background-color: var(--clrSurface);
    width: fit-content;
    padding: var(--xs);
    margin: var(--xs) auto;
    box-shadow: var(--boxShadow);
}

td {
    border-bottom: 1px solid var(--clrBg);
    padding: var(--xxs);
}

.watermark,
.related {
    color: var(--clrAccentDark);
    opacity: 0.5;
    display: flex;
    gap: var(--xxs);
    margin-bottom: var(--m);
}

.flexRow {
    display: flex;
    flex-direction: row;
    gap: var(--s);
    align-items: center;
    max-width: 100vw;
}

.jsonList {
    width: 100%;
}