ReactJS

1
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2

3
:root {
4
    --black: #333333;
5
    --orange: #CC6633;
6
    --green: #A4CC33;
7
    --whiteLightness: 100%;
8
    --white: hsl(0, 0%, var(--whiteLightness));
9
    --grayF4: hsl(0, 0%, calc(var(--whiteLightness) - 4%));
10
    --greyF3: hsl(0, 0%, calc(var(--whiteLightness) - 5%));
11
    --greyEC: hsl(0, 0%, calc(var(--whiteLightness) - 7%));
12
    --greyD9: hsl(0, 0%, calc(var(--whiteLightness) - 15%));
13
    --greyC4: hsl(0, 0%, calc(var(--whiteLightness) - 23%));
14
    --grey99: hsl(0, 0%, calc(var(--whiteLightness) - 40%));
15
    --grey66: hsl(0, 0%, calc(var(--whiteLightness) - 60%));
16
}
17

18
body {
19
    padding: 0;
20
    margin: 0;
21
    background-color: var(--grayF4);
22
    font-size: 14px;
23
    line-height: 16px;
24
    font-family: 'Roboto', serif;
25
}
26

27
* {
28
    color: var(--black);
29
    box-sizing: border-box;
30
    -webkit-font-smoothing: antialiased;
31
    -moz-osx-font-smoothing: grayscale;
32
}
33

34
ul {
35
    margin: 0;
36
    padding: 0;
37
    list-style: none;
38
}
39

40
a {
41
    text-decoration: none;
42
}
43

44
button {
45
    padding: 0;
46
    border: 0;
47
    background: transparent;
48
    cursor: pointer;
49
}