@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Raleway:400,400i&display=swap" rel="stylesheet');

:root {
  --font-heading: 'Great Vibes', cursive;
  --font-body: 'Raleway', sans-serif;
  --colour-background: #fcfcfc;
  --colour-primary: #000000;
  --colour-primary-l: #b8b8b8a2;
  --colour-secondary: #a0a9ff;
  --colour-secondary-l: #a0aeff8a;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--colour-background);
}

body {
  color: var(--colour-primary);
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  font-family: var(--font-body);
}

*::selection {
  background: var(--colour-secondary);
}
*::-moz-selection {
  background: var(--colour-secondary);
}

/* scrollbar */

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

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--colour-secondary-l);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--colour-secondary);
}