-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
113 lines (105 loc) · 2.31 KB
/
style.css
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.myGame {
height: 100vh;
}
canvas {
background-image: url("https://dcassetcdn.com/design_img/3985174/741410/27681943/2waxf5bhjmgm5vhpz3hk5yyge3_image.png");
background-color: rgb(200, 11, 11);
max-width: 100%;
cursor: crosshair;
}
* {
padding: 0;
margin: 0;
}
.scoreBoard {
position: fixed;
top: 5%;
left: 5%;
font: 600 1.2vmax "Franklin Gothic Medium";
color: white;
display: none;
}
form {
background-color: rgba(243, 36, 36, 0.158);
height: 60vh;
width: 60vw;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
border-radius: 5px;
justify-content: center;
align-items: center;
}
form > select,
form select option {
padding: 2vmax;
width: 20vw;
text-align: center;
font-size: 1.4vmax;
font-family: cursive;
outline: none;
transition: all 0.5s;
border: none;
}
form > input {
margin: 2vmax;
padding: 2vmax;
width: 20vw;
cursor: pointer;
border: none;
color: white;
transition: all 0.5s;
background-color: indianred;
font-size: 1.4vmax;
font-family: cursive;
outline: none;
}
form > select:hover {
box-shadow: 0 0 10px white;
}
form > input:hover {
background-color: rgb(194, 27, 91);
box-shadow: 0 0 10px white;
}
.gameover {
background-image: url("https://imgs.search.brave.com/kUlxfsdmXMLDextZN9Nk4XDXnESxj7EmqysLBDFg0Is/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zdC5k/ZXBvc2l0cGhvdG9z/LmNvbS8xNDMxMTA3/LzEzMzkvaS82MDAv/ZGVwb3NpdHBob3Rv/c18xMzM5MTMwMi1z/dG9jay1waG90by1n/b29kLWx1Y2suanBn");
/* background-color: rgba(122, 122, 122, 0.041); */
border-radius: 5px;
position: fixed;
top: 50%;
height: 50vh;
width: 50vw;
right:70%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.gameover > button {
padding: 1vmax;
border: 2px solid rgb(37, 4, 119);
cursor: pointer;
width: 10vw;
background-color: white;
font: 900 1.1vmax cursive;
transition: all 0.5s;
}
.gameover > button:hover {
background-color: rgb(30, 30, 34);
color: white;
box-shadow: 0 0 10px rgb(255, 255, 255);
}
.gameover > div {
padding-left: 70%;
padding-bottom: 40%;
font-size:larger;
font-weight: 900;
margin: 2vmax;
color: rgb(230, 5, 5);
font: 600 1.2vmax cursive;
}