@font-face {
    font-family: cascadia-mono;
    src: url("../font/CascadiaMono.ttf");
}

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

    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --color-box-shadow: rgba(0, 0, 0, 0.425);
    --highlight-color: #3078ff;
    --box-border-radius: 7px;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;

    display: grid;
    grid-auto-flow: column;
    grid-template-columns: max-content auto;

    overflow: hidden;
}


code {
    border-radius: var(--box-border-radius);
    font-family: cascadia-mono;
}
code[pre] {
    display: block;
    white-space: pre-wrap;
}
code * {
    font-family: cascadia-mono;
}



.button {
    padding: 5px;
    border-radius: var(--box-border-radius);
}
.button:hover {
    color: white;
    background-color: var(--highlight-color);
}



section.sidebar {
    display: grid;
    grid-auto-rows: max-content;
    gap: 10px;

    margin: 25px;
    padding: 20px;
    overflow-y: auto;

    border-radius: 10px;

    box-shadow: 0px 0px 20px var(--color-box-shadow);
}

section.main {
    padding: 40px;
    overflow: auto;
}

.sidebar a {
    text-decoration: none;
    color: black;
}