@import url('./basics/basics.css');

:root {
    --body-padding: 25px;
    --border-radius: 40px;
    --top-padding: 100px;

    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    box-sizing: border-box;
}

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

html, body {
    height: 100%;
    width: 100%;

    margin: 0;
    overflow: hidden;

    color: var(--color-blue-light);
    background-color: var(--color-blue-background);
}

body {
    padding: var(--body-padding);
}

#root {
    height: 100%;
    width: 100%;

    border-radius: var(--border-radius);

    overflow: hidden;

    background-color: var(--color-lila-background);
}

main {
    padding: var(--body-padding);

    width: 100%;
    height: calc(100% - var(--top-padding) + var(--body-padding));
}

::-webkit-scrollbar {
    width: 17px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-blue-background);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-lila-background);
    border-radius: 10px;
    border: 3px solid var(--color-blue-background);
}