*,
 ::before,
 ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

:root {
    --w: #fff;
    --b: #2a2e35;
    --scrollbar: #5f5f61;
    --border1: 5px;
    --border2: 15px;
    --marg1: 15%;
    --marg2: 5%;
    --gap1: 15px;
    --inseta: 10px;
    --insetb: -10px;

    --main-color: #56ADC9;
    --grey-container:#ededed;
    --grey-border:#e2e2e2;
    --grey-font:#828282;

    --top-bar-height:5vh;

    --font-large: 1.8em;
    --font-medium: 1.4em;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 1em;
    background: var(--w);
}

::-webkit-scrollbar-thumb {
    --scrollbar : #c4c4c4;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: var(--border2);
    border-radius: var(--border2);
    background-color: grey;
    -webkit-box-shadow: inset var(--insetb) var(--insetb) 0 var(--scrollbar), inset var(--inseta) var(--inseta) 0 var(--scrollbar);
    box-shadow: inset var(--insetb) var(--insetb) 0 var(--scrollbar), inset var(--inseta) var(--inseta) 0 var(--scrollbar);
    height: 20px;
    cursor: pointer;
}