Flappy-Charmander/styles.css at main · MathiasHandeland/Flappy-Charmander · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#gameContainer {
  position: relative;
}

#gameCanvas {
  background-image: url(./assets/flappybirdbg.png);
  touch-action: none; /* blocks all gesture-based behavior (including panning and zooming) */
  user-select: none; /* stops accidental text highlighting on taps, clicks, or drags. */
}

#startGameMessage, #gameoverMessage, #restartMessage, #playGameMessage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Luckiest Guy', sans-serif;
  color: white;
  text-shadow: /* shadow adding a colorful, 3D effect*/
    -2px -2px 0 rgba(0, 0, 0, 0.7),
     2px -2px 0 rgba(255, 0, 0, 0.7),
    -2px  2px 0 rgba(0, 0, 255, 0.7),
     2px  2px 0 rgba(0, 255, 0, 0.7),
     0px -2px 0 rgba(255, 255, 0, 0.7),
     0px  2px 0 rgba(255, 165, 0, 0.7),
    -2px  0px 0 rgba(75, 0, 130, 0.7),
     2px  0px 0 rgba(255, 20, 147, 0.7);
  display: none;
}

#startGameMessage {
  top: 30%;
  font-size: 55px;
}

#gameoverMessage {
  top: 45%;
  font-size: 65px;
  white-space: nowrap;
}

#restartMessage, #playGameMessage {
  top: 60%;
  font-size: 20px;
}