1:root {
 2  --bg-color: hsl(19deg 89% 78%);
 3  --text-color: #1d2326;
 4}
 5
 6@font-face {
 7  font-family: "OrpheusPro";
 8  src: local("OrpheusPro"), url(./fonts/OrpheusPro-Bold.ttf) format("truetype");
 9  /* other formats include: 'woff', 'woff2', 'truetype, 'opentype',
10                              'embedded-opentype', and 'svg' */
11}
12
13body {
14  background-color: hsl(19deg 89% 78%);
15  transition: background 1s ease-in-out;
16  color: var(--text-color);
17  width: 100vw;
18  height: 100vh;
19  margin: 0px;
20  font-family: OrpheusPro;
21}
22
23#element-data {
24  position: absolute;
25  top: 128px;
26  left: 64px;
27}
28
29#element-name {
30  font-size: 128px;
31  animation: loadIn 0.2s ease-in-out;
32}
33
34#element-appearance {
35  font-style: italic;
36  font-size: 24px;
37  animation: loadIn 0.2s ease-in-out;
38}
39
40#element-properties {
41  margin-top: 32px;
42  font-size: 24px;
43  animation: loadIn 0.2s ease-in-out;
44}
45
46.element-property-container {
47  display: flex;
48  flex-wrap: nowrap;
49  width: 900px;
50}
51
52.element-property-value {
53  margin-left: auto;
54}
55
56.table-element:hover {
57  background: var(--text-color);
58  color: white;
59}
60
61.table-element {
62  position: absolute;
63  border: var(--text-color) solid 1px;
64  width: 80px;
65  height: 80px;
66  padding-top: 4px;
67  text-align: center;
68  font-size: 32px;
69  border-radius: 2px;
70  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
71}
72
73.element-name {
74  font-size: 12px;
75}
76
77.element-z-number {
78  position: absolute;
79  font-size: 16px;
80  bottom: 4px;
81  left: 4px;
82}
83
84@keyframes loadIn {
85  0% {
86    opacity: 0;
87    transform: translateY(16px);
88  }
89
90  100% {
91    opacity: 1;
92    transform: translateY(0px);
93  }
94}