:root {
    --font-family: "Montserrat", sans-serif;

    --color-primary-light: #F5F7FF;
    --color-primary-thin: #D9E3FF;
    --color-primary-regular: #C0CCFF;
    --color-primary-normal: #3366FF;
    --color-primary-medium: #5378FF;
    --color-primary-heavy: #004BD4;
    --color-primary-dark: #002EB7;
    --color-secondary-light: #DDFFE8;
    --color-secondary-thin: #AEFFC8;
    --color-secondary-regular: #76F69C;
    --color-secondary-normal: #33BB66;
    --color-secondary-medium: #009B4A;
    --color-secondary-heavy: #00654C;
    --color-secondary-dark: #004800;
    --color-gray-light: #ffffff;
    --color-gray-thin: #DDDDDD;
    --color-gray-regular: #B0B0B0;
    --color-gray-normal: #868686;
    --color-gray-medium: #5E5E5E;
    --color-gray-heavy: #393939;
    --color-gray-dark: #000000;

    --color-cancel-light: #f6f6f6;

    --scroll-button-bg: #0003;
    --scroll-button-bg-hover: #0006;
    --scroll-thumb: #0002;
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    color: inherit;
}

::-moz-placeholder {
    opacity: 1;
}

:-webkit-autofill,
:-webkit-autofill:focus {
    box-shadow: 0 0 0 50px white inset;
}

::-moz-selection {
    background-color: var(--color-primary-normal);
    text-shadow: -2px 2px var(--color-primary-dark);
    color: var(--color-gray-light);
}

::selection {
    background-color: var(--color-primary-normal);
    text-shadow: -2px 2px var(--color-primary-dark);
    color: var(--color-gray-light);
}

::-webkit-scrollbar {
    width: 16px;
    border-radius: 4px;
    background-color: var(--color-gray-light);
}

::-webkit-scrollbar-button {
    background-color: var(--scroll-button-bg);
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

::-webkit-scrollbar-button:hover {
    background-color: var(--scroll-button-bg-hover);
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image:
        linear-gradient(-45deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(45deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(0deg, var(--color-cancel-light) 35%, transparent 35%);
}

::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image:
        linear-gradient(45deg, var(--color-cancel-light) 40%, transparent 40%),
        linear-gradient(-45deg, var(--color-cancel-light) 40%, transparent 40%),
        linear-gradient(180deg, var(--color-cancel-light) 35%, transparent 35%);
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image:
        linear-gradient(-45deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(-135deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(-90deg, var(--color-cancel-light) 35%, transparent 35%);
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image:
        linear-gradient(45deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(135deg, transparent 60%, var(--color-cancel-light) 60%),
        linear-gradient(90deg, var(--color-cancel-light) 35%, transparent 35%);
}


::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    box-shadow: 0 0 20px 20px var(--scroll-thumb) inset;
    border-radius: 8px;

}

::-webkit-scrollbar-thumb:hover {
    box-shadow: 0 0 20px 20px var(--scroll-button-bg) inset;
}

html {
    font-size: 14px;
}

body {
    font-family: var(--font-family);
    font-optical-sizing: auto;
    font-style: normal;
    min-height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--color-gray-light);
    color: var(--color-gray-dark);
    border-top: 1px solid var(--color-gray-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
th {
    font-size: inherit;
    font-weight: inherit;
}

cite,
var,
address,
dfn {
    font-style: inherit;
}

body,
pre,
form,
input,
textarea,
keygen,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
blockquote,
ol,
ul,
dl,
dd,
figure,
fieldset {
    margin: 0;
}

ol,
fieldset,
legend,
input,
button,
textarea {
    padding: 0;
    font-family: inherit;
}

ul {
    padding-left: 0;
}

ol,
ul,
li {
    list-style-type: none;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

textarea {
    resize: none;
    overflow-y: auto;
}

iframe {
    border-style: none;
}

fieldset,
hr,
button,
keygen,
img {
    border-style: none;
    outline-style: none;
    font-family: inherit;
    font-size: inherit;
}

[type=button],
[type=reset],
[type=submit],
[type=file],
[type=image],
button {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

[disabled] {
    cursor: not-allowed;
}