-
Notifications
You must be signed in to change notification settings - Fork 10
/
style.css
98 lines (84 loc) · 1.79 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
/* Existing CSS Variables */
:root {
--border-main: 3px solid black;
--background-image: url("assets/background.png");
--main-text-color: #fff;
--font-family-main: "Orbitron", sans-serif;
--input-border-color: #a7a4cc;
--button-bg-color: #a7a4cc;
--button-bg-color-hover: #918bc3;
}
/* Existing Styles */
#canvas1 {
border: var(--border-main);
background: var(--background-image);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gameContainer {
display: none;
}
.hidden {
display: none;
}
#passwordPrompt {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--background-image);
padding: 20px;
border: var(--border-main);
text-align: center;
color: var(--main-text-color);
}
#passwordPrompt h2 {
font-family: var(--font-family-main);
color: var(--main-text-color);
margin-bottom: 15px;
}
#passwordInput {
font-family: var(--font-family-main);
width: 80%;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: var(--input-border);
}
#passwordPrompt button {
font-family: var(--font-family-main);
width: 80%;
padding: 10px 20px;
background-color: var(--button-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
#passwordPrompt button:hover {
background-color: var(--button-bg-color-hover);
}
/* Responsive Gameplay Design */
@media (max-width: 768px) {
/* Adjusting canvas size for smaller screens */
#canvas1 {
width: 100%;
height: auto;
}
}
/* Additional Responsive Design for the password prompt */
@media (max-width: 768px) {
#passwordInput, #passwordPrompt button {
width: 90%;
}
#passwordPrompt {
width: 80%;
padding: 15px;
}
#passwordPrompt h2 {
font-size: 1.2em;
}
}