Hugging Face's logo

Spaces:
ayush2917
/
BirthdayM
Sleeping

App Files Community
ayush2917 commited on
Commit
e273c8d
·
verified ·
1 Parent(s): 3fc8e81

Update static/css/adventure.css

Browse files
Files changed (1) hide show
  1. static/css/adventure.css +73 -34
static/css/adventure.css CHANGED
@@ -1,56 +1,95 @@
1
- /* static/css/adventure.css */
2
- .adventure-container {
3
- background: rgba(255, 255, 255, 0.9);
4
  padding: 20px;
5
- border-radius: 10px;
6
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
7
- animation: fadeIn 2s ease-in-out;
8
  }
9
 
10
- .adventure-container h1 {
11
- font-size: 2.5em;
12
- color: #FF4500;
13
- text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
 
 
 
14
  }
15
 
16
- .adventure-scene {
17
- background: rgba(255, 255, 255, 0.9);
18
- padding: 20px;
19
  border-radius: 10px;
20
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
21
- margin: 20px 0;
22
- animation: fadeIn 2s ease-in-out 0.5s;
 
23
  }
24
 
25
- .adventure-scene p {
26
- font-size: 1.2em;
 
27
  color: #333;
28
- margin: 0;
29
  }
30
 
31
- .adventure-choices {
32
- margin: 20px 0;
 
 
33
  }
34
 
35
- .adventure-choices button {
36
- background: #FF69B4;
 
37
  color: white;
38
  border: none;
39
- padding: 10px 20px;
40
- margin: 5px;
41
- border-radius: 5px;
42
  cursor: pointer;
43
- font-size: 1.1em;
44
- transition: background 0.3s, transform 0.2s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
 
47
- .adventure-choices button:hover {
48
- background: #FF1493;
49
  transform: scale(1.05);
50
  }
51
 
52
- .adventure-error {
53
- color: #FF4500;
54
- font-weight: bold;
55
- margin: 10px 0;
 
 
 
 
 
 
 
56
  }
 
1
+ .container {
2
+ max-width: 800px;
3
+ margin: 0 auto;
4
  padding: 20px;
 
 
 
5
  }
6
 
7
+ .adventure-game {
8
+ position: relative;
9
+ min-height: 500px;
10
+ background-color: #f5f5f5;
11
+ border-radius: 15px;
12
+ padding: 20px;
13
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
14
  }
15
 
16
+ .scene-container {
17
+ background-color: white;
 
18
  border-radius: 10px;
19
+ padding: 20px;
20
+ margin-bottom: 20px;
21
+ min-height: 200px;
22
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
23
  }
24
 
25
+ .scene-content {
26
+ font-size: 1.1rem;
27
+ line-height: 1.6;
28
  color: #333;
 
29
  }
30
 
31
+ .choices-container {
32
+ display: flex;
33
+ flex-direction: column;
34
+ gap: 10px;
35
  }
36
 
37
+ .choice-btn {
38
+ padding: 12px 20px;
39
+ background-color: #8e44ad;
40
  color: white;
41
  border: none;
42
+ border-radius: 25px;
 
 
43
  cursor: pointer;
44
+ font-size: 1rem;
45
+ transition: all 0.3s;
46
+ text-align: center;
47
+ }
48
+
49
+ .choice-btn:hover {
50
+ background-color: #732d91;
51
+ transform: translateY(-2px);
52
+ }
53
+
54
+ .choice-btn:active {
55
+ transform: translateY(0);
56
+ }
57
+
58
+ .restart-btn {
59
+ background-color: #27ae60;
60
+ }
61
+
62
+ .restart-btn:hover {
63
+ background-color: #219653;
64
+ }
65
+
66
+ .krishna-character {
67
+ position: absolute;
68
+ right: 30px;
69
+ bottom: 30px;
70
+ width: 150px;
71
+ height: 150px;
72
+ }
73
+
74
+ .krishna-character img {
75
+ width: 100%;
76
+ height: auto;
77
+ transition: all 0.3s;
78
  }
79
 
80
+ .krishna-character:hover img {
 
81
  transform: scale(1.05);
82
  }
83
 
84
+ @media (max-width: 768px) {
85
+ .krishna-character {
86
+ position: static;
87
+ margin: 20px auto;
88
+ display: block;
89
+ }
90
+
91
+ .adventure-game {
92
+ min-height: auto;
93
+ padding-bottom: 100px;
94
+ }
95
  }