@layer base {
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    :root {
        --main: #D9C07E;
        --white: #fff;
        --grey: #D5DDE1;
        --black: #2D3641;
        --main__second: #9EACB9;
        --fontcolor: #454F58;
        --background: rgba(162, 191, 209, 0.445);
        --background__content: rgba(240, 240, 240, 0.5);
        --space: 10px;
        --counter:5;
    }

    html, body {
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        max-width: 100vw;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 1px grey;
        border-radius: 5px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--background);
        border-radius: 5px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }

    @media screen and (max-width: 600px) {
        html {
            max-width: 600px;
        }

        :root {
            --space: 5px;
        }
    }
}