GameZone/Games/Otherworldly_Odyssey/style.css at f6e4daae052c24c0d7526131a9dc033868ad8bf9 · kunjgit/GameZone · 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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/* Global body styles */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #0a0a23;
  background-image: url('img/23.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size: 16px;
  }

/* Game text area styles */
#text {
    background-color: rgba(10, 10, 35, 0.5);
    color: #ffffff;
    padding: 10px;
  }

/* Main game container styles */
#game {
  max-width: 90%; /* Responsive width */
  max-height: none; /* Remove max-height */
  margin: 20px auto;
  padding: 10px;
  background-color: rgba(0, 0, 10, 0);
  }

/* Styles for controls and stats sections */
#controls,
#stats {
    border: 1px solid #0a0a23;
    padding: 5px;
    color: #0a0a23;
    background-color: rgba(0, 0, 10, 0.5);
  }

/* Control buttons layout */
#controls {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    flex-direction: column; /* Stack buttons vertically on mobile */
    gap: 10px; /* Add space between buttons */
  }

/* Monster stats section styles */
#monsterStats {
    display: none;
    border: 1px solid #0a0a23;
    padding: 5px;
    color: #ffffff;
    background-color: #c70d0d;
  }

/* Individual stat styling */
.stat {
    padding-right: 10px;
  }

/* Button styles */
button {
    cursor: pointer;
    color: #0a0a23;
    background-color: #feac32;
    background-image: linear-gradient(#fecc4c, #ffac33);
    border: 3px solid #feac32;
    border-radius: 20px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out, transform 0.1s ease-in-out;
    width: 100%; /* Full width buttons */
    padding: 10px; /* Larger touch target */
    font-size: 1em; /* Relative font size */
  }

/* Button hover effect */
button:hover {
    box-shadow: 0 0 15px 5px rgba(255, 165, 0, 0.7); /* Glow effect */
    transform: scale(1.05); /* Slightly increase size on hover */
}

/* Centering utility class */
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

/* Gradient text effect for title */
.gradient-text {
    font-size: 2em; /* Relative font size */
    font-weight: bold;
    background: linear-gradient(
      to right,
      #4285F4, /* Blue */
      #f4009f, /* Pink */
      #DB4437, /* Red */
      #5d0f9d, /* Purple */
      #4285F4  /* Blue again to loop smoothly */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: gradient-animation 10s linear infinite;
    text-align: center;
  }

/* Keyframes for gradient animation */
@keyframes gradient-animation {
    0% {
      background-position: 0% center;
    }
    100% {
      background-position: -200% center;
    }
  }

/* XP stat styling */
.xpStat {
    color:#8c00ff;
    text-shadow: 0 0 10px #8c00ff, 0 0 20px #8c00ff, 0 0 30px #8c00ff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }

/* Health stat styling */
.healthStat {
    color: #ff0000 ;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }

/* Gold stat styling */
.goldStat {
    color: #FFD300;
    text-shadow: 0 0 10px #FFD300, 0 0 20px #FFD300, 0 0 30px #FFD300, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }

/* Media query for larger screens */
@media screen and (min-width: 768px) {
  #game {
    max-width: 500px;
  }

  #controls {
    flex-direction: row;
  }

  button {
    width: auto;
  }

  .gradient-text {
    font-size: 48px;
  }
}