1#tooltip{
2 color: var(--gold);
3 margin-top: 25px;
4 margin-bottom: 50px;
5}
6
7:root {
8 --pixel-size: 1;
9 }
10
11 .Character {
12 width: calc(48px * var(--pixel-size));
13 height: calc(96px * var(--pixel-size));
14 overflow: hidden;
15 position:relative;
16 visibility: hidden;
17 display: flex;
18}
19
20.character-dialog{
21 font-size: 10px;
22 color: var(--gold);
23 text-shadow: 1px 1px 0px var(--black);
24 text-align: center;
25 width: 100%;
26 margin-bottom: 5px;
27 visibility: hidden;
28}
29
30 .Character_spritesheet {
31 animation: moveSpritesheet 1.2s steps(12) infinite;
32 width: calc(576px * var(--pixel-size));
33 position: absolute;
34 }
35
36 .pixelart {
37 image-rendering: pixelated;
38 }
39
40 .face-down {
41 top: calc(-96px * var(--pixel-size)) !important;
42 }
43
44 .face-left {
45 top: calc(-192px * var(--pixel-size));
46 }
47
48 .face-right {
49 top: calc(-288px * var(--pixel-size));
50 }
51
52 .face-up {
53 top: calc(-384px * var(--pixel-size)) !important;
54 }
55
56 @keyframes moveSpritesheet {
57 from {
58 transform: translate3d(0px,0,0)
59 }
60 to {
61 transform: translate3d(-100%,0,0)
62 }
63 }
64
65 .keyboard {
66 position: relative;
67 width: 200px;
68 height: 120px;
69 display: none;
70}
71
72 .keyboard button {
73 color : white;
74 text-decoration: none;
75 border: 3px solid white;
76 border-radius: 5px;
77 box-shadow: -2px 2px;
78 flex-grow: 1;
79 font-family: monospace;
80 background: black;
81 font-size: 20px;
82 position: absolute;
83 width: 50px;
84 height: 50px;
85 display: flex;
86 justify-content: center;
87 align-items: center;
88 cursor: pointer;
89}
90
91.left {
92 left: 0;
93}
94
95.right {
96 right: 0;
97 box-shadow: 2px -2px !important;
98}
99
100.top, .bottom {
101 left: 50%;
102 transform: translateX(-50%);
103}
104
105.bottom, .left, .right {
106 bottom: 0px;
107}
108
109.lit{
110 background: 3px solid var(--gold) !important;
111 color: var(--gold) !important;
112 border: 3px solid var(--gold) !important;
113}