@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");

:root {
    /* color-scheme: dark; */

    /* --text-color: #404244;
    --bg-color: #fff; */

    /* --text-color: #bbb; */
    --text-color: #eee;
    --bg-color: #141518;
    /* --bg2: #202126; */
    /* --bg2: color-mix(in srgb, var(--bg) 70%, #000 30%); */
    /* --bg2: color-mix(in srgb, var(--bg) 96%, #fff 4%); */
    /* --bg3: color-mix(in srgb, var(--bg) 92%, #fff 8%); */
    /* --bg4: color-mix(in srgb, var(--bg) 88%, #fff 12%); */

    --text-color: #e0e0e0;
    /* --text-color-2: #eee; */

    --bg-color: #121316;
    /* --bg-color-2: #1a1a1a;
    --bg-color-3: #1c1c1c;
    --bg-color-4: #333;
    --bg-color-5: #555; */

    --accent-color: #f9ba00;
}

* {
    margin: 0;
    padding: 0;

    font-variant-ligatures: none;

    &,
    &:after,
    &:before {
        box-sizing: border-box;
    }
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* font-family: Menlo, Monaco, "Courier New", monospace; */
    /* font-family: "JetBrains Mono", Menlo, Monaco, "Courier New", monospace; */
    /* font-family:
        -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        Fira Sans,
        Droid Sans,
        Helvetica Neue,
        sans-serif; */

    /* font-family: Menlo, Monaco, "Courier New", monospace; */
    /* font-family: "JetBrains Mono", monospace; */
    font-family: "JetBrains Mono", Menlo, Monaco, "Courier New", monospace;

    font-size: 16px;
    /* font-size: 14px; */
    font-weight: 400;
    line-height: 1.5;
    tab-size: 4;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: var(--text-color);
    background-color: var(--bg-color);

    accent-color: var(--accent-color);
}

a {
    text-decoration: none;
    color: var(--accent-color);

    &:hover {
        text-decoration: underline;
    }
}

p {
    margin: 1rem 0;
}

.container {
    height: 100%;
    /* max-width: 600px; */
    /* max-width: 1000px; */
    max-width: 500px;
    /* margin: 0 auto; */
    /* margin: 32px auto 48px; */
    margin: 32px auto 128px;
    padding: 1rem;
}