45 |
46 |
57 |
47 |
55 |
56 |
48 | 
49 |
50 |
51 |
54 | ${game.name}
52 |${game.description}
53 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
49 |
50 |
--------------------------------------------------------------------------------
/mini-game.js:
--------------------------------------------------------------------------------
1 | let hits = 0;
2 | let currentAlienIndex = 0;
3 | let timerInterval = null;
4 | let startTime = null;
5 | let timerRunning = false;
6 | let gameEnded = false; // Variável para controlar o fim do jogo
7 |
8 | // Lista de aliens com diferentes imagens e número de hits
9 | const aliens = [
10 |
11 | { imagePath: 'assets/alien1.gif', hitsToKill: 15, class: 'alien' },
12 | { imagePath: 'assets/alien2.gif', hitsToKill: 20, class: 'alien2' },
13 | { imagePath: 'assets/alien3.gif', hitsToKill: 30, class: 'alien3' },
14 | { imagePath: 'assets/alien4.gif', hitsToKill: 30, class: 'alien4' },
15 | { imagePath: 'assets/alien5.gif', hitsToKill: 100, class: 'alien5' },
16 | ];
17 |
18 | const collisionSound = document.getElementById('collision-sound');
19 | const hahahaSound = document.getElementById('hahaha-sound');
20 | const deathSound = document.getElementById('death-sound');
21 | const noSound = document.getElementById('no-sound');
22 | const darthVaderSound = document.getElementById('darth-vader-sound');
23 | const pacmanSound = document.getElementById('pacman-sound');
24 | const tartarugaSound = document.getElementById('tartaruga-sound');
25 | const restartButton = document.getElementById('restartButton');
26 | const nave = document.getElementById('nave');
27 | const timerElement = document.getElementById('timer');
28 |
29 | // Função para iniciar o cronômetro
30 | function startTimer() {
31 | if (timerRunning || gameEnded) return; // Não reiniciar se o jogo acabou
32 |
33 | startTime = Date.now();
34 | timerRunning = true;
35 |
36 | timerInterval = setInterval(() => {
37 | const elapsedTime = Date.now() - startTime;
38 | const minutes = Math.floor(elapsedTime / 60000).toString().padStart(2, '0');
39 | const seconds = Math.floor((elapsedTime % 60000) / 1000).toString().padStart(2, '0');
40 | timerElement.textContent = `${minutes}:${seconds}`;
41 | }, 1000);
42 | }
43 |
44 | // Função para parar o cronômetro
45 | function stopTimer() {
46 | clearInterval(timerInterval);
47 | timerRunning = false;
48 | }
49 |
50 | // Função para criar um novo alien com base no índice atual
51 | function criarAlien() {
52 | const alienData = aliens[currentAlienIndex];
53 |
54 | if (!alienData) {
55 | stopTimer(); // Para o cronômetro quando o último alien for derrotado
56 | gameEnded = true; // Define o jogo como finalizado
57 | restartButton.style.display = 'block'; // Mostra o botão de reiniciar
58 | nave.remove();
59 | return;
60 | }
61 |
62 | const alien = document.createElement('img');
63 | alien.src = alienData.imagePath; // Define a imagem do alien
64 | alien.alt = 'alien';
65 | alien.classList.add(alienData.class);
66 | document.body.appendChild(alien);
67 |
68 | hits = 0; // Reseta o contador de hits para o novo alien
69 |
70 | let hitsToKill = alienData.hitsToKill;
71 |
72 |
73 | if(currentAlienIndex === 1){
74 | hahahaSound.play();
75 | }
76 |
77 | if(currentAlienIndex === 2){
78 | pacmanSound.play();
79 | }
80 |
81 | if(currentAlienIndex === 3){
82 | tartarugaSound.play();
83 | }
84 |
85 | if(currentAlienIndex === 4){
86 | darthVaderSound.play();
87 | }
88 |
89 | // Função para verificar colisão do tiro com o alien
90 | function checkCollision(tiro) {
91 | const tiroRect = tiro.getBoundingClientRect();
92 | const alienRect = alien.getBoundingClientRect();
93 |
94 | if (tiroRect.top <= alienRect.bottom &&
95 | tiroRect.bottom >= alienRect.top &&
96 | tiroRect.left >= alienRect.left &&
97 | tiroRect.right <= alienRect.right) {
98 |
99 | hits += 1;
100 | collisionSound.play();
101 | tiro.remove();
102 | clearInterval(tiro.checkCollision);
103 |
104 | // Verifica se o alien atingiu o limite de hits
105 | if (hits >= hitsToKill) {
106 | deathSound.play();
107 | alien.remove();
108 | if(currentAlienIndex === 4){
109 | noSound.play();
110 | }
111 | currentAlienIndex += 1;
112 | criarAlien(); // Cria o próximo alien
113 | }
114 | }
115 | }
116 |
117 | // Disparar tiros quando o usuário clica
118 | document.addEventListener('click', criarTiro);
119 |
120 | function criarTiro() {
121 | if (gameEnded) return; // Não dispara tiros se o jogo acabou
122 |
123 | if (!timerRunning) {
124 | startTimer(); // Inicia o cronômetro ao disparar o primeiro tiro
125 | }
126 |
127 | const nave = document.querySelector('.nave');
128 | const tiro = document.createElement('div');
129 | tiro.classList.add('tiro');
130 | tiro.style.left = `${nave.offsetLeft + nave.offsetWidth / 2 - 15}px`;
131 | document.body.appendChild(tiro);
132 |
133 | tiro.checkCollision = setInterval(() => checkCollision(tiro), 50);
134 |
135 | // Remover o tiro depois que ele sai da tela
136 | setTimeout(() => {
137 | tiro.remove();
138 | clearInterval(tiro.checkCollision); // Para de checar a colisão se o tiro sair da tela
139 | }, 2000);
140 | }
141 | }
142 |
143 | // Função para mover a nave junto com o mouse
144 | document.addEventListener('mousemove', function (event) {
145 | if (gameEnded) return; // Impede movimentação após o fim do jogo
146 | const nave = document.querySelector('.nave');
147 | const x = event.clientX;
148 | nave.style.left = `${x}px`;
149 | });
150 |
151 | // Evento para recarregar a página quando o botão de reiniciar for clicado
152 | restartButton.addEventListener('click', function () {
153 | location.reload();
154 | });
155 |
156 | // Inicializa o primeiro alien
157 | criarAlien();
158 |
--------------------------------------------------------------------------------
/data.js:
--------------------------------------------------------------------------------
1 | export const games = [
2 | {
3 | name: "Super Mario",
4 | description: "Super Mario All-Stars e Super Mario World",
5 | image: "super-mario-world.png",
6 | platform: "Nintendo",
7 | gameLink: "https://www.retrogames.cc/embed/44617-super-mario-all-stars-super-mario-world-improvement.html"
8 | },
9 | {
10 | name: "Super Bomberman 4",
11 | description: "Jogo de ação e estratégia de 1996",
12 | image: "bomberman4.jpeg",
13 | platform: "Nintendo",
14 | gameLink: "https://www.retrogames.cc/snes-games/super-bomberman-4-english-translated.html"
15 | },
16 | {
17 | name: "Top Gear",
18 | description: "Top Gear é um jogo de corrida de 1992",
19 | image: "topgear.jpg",
20 | platform: "Nintendo",
21 | gameLink: "https://www.retrogames.cc/snes-games/top-gear-usa.html"
22 | },
23 | {
24 | name: "Donkey Kong Country",
25 | description: "Um jogo revolucionário de 1994",
26 | image: "Donkey_Kong_Country_capa.png",
27 | platform: "Nintendo",
28 | gameLink: "https://www.retrogames.cc/snes-games/donkey-kong-country-usa.html"
29 | },
30 | {
31 | name: "Família Addams Values",
32 | description: "Um jogo de aventura baseado no filme de 1993",
33 | image: "familiaadams.jpeg",
34 | platform: "Nintendo",
35 | gameLink: "https://www.retrogames.cc/snes-games/addams-family-values-usa-en-fr-de.html"
36 | },
37 | {
38 | name: "Batman & Robin",
39 | description: "As aventuras de Batman e Robin",
40 | image: "batandrobin.jpeg",
41 | platform: "Nintendo",
42 | gameLink: "https://www.retrogames.cc/snes-games/adventures-of-batman-robin-the-europe.html"
43 | },
44 | {
45 | name: "Aladdin",
46 | description: "Baseado no filme da Disney de 1992",
47 | image: "aladim.jpg",
48 | platform: "Nintendo",
49 | gameLink: "https://www.retrogames.cc/snes-games/aladdin-usa.html"
50 | },
51 | {
52 | name: "Animaniacs",
53 | description: "Jogo de plataforma baseado no desenho animado",
54 | image: "animaniacs.jpg",
55 | platform: "Nintendo",
56 | gameLink: "https://www.retrogames.cc/snes-games/animaniacs-usa.html"
57 | },
58 | {
59 | name: "Marvel Super Heroes",
60 | description: "War of the Gems",
61 | image: "marvel.webp",
62 | platform: "Nintendo",
63 | gameLink: "https://www.retrogames.cc/snes-games/marvel-super-heroes-war-of-the-gems-usa.html"
64 | },
65 | {
66 | name: "Sonic The Hedgehog (SNES)",
67 | description: "Versão para Super Nintendo",
68 | image: "sonic1.jpeg",
69 | platform: "Nintendo",
70 | gameLink: "https://www.retrogames.cc/mastersystem-games/sonic-genesis-for-master-system.html"
71 | },
72 | {
73 | name: "Sonic The Hedgehog",
74 | description: "Primeiro lançamento da série Sonic The Hedgehog",
75 | image: "sonic2.jpg",
76 | platform: "Master System",
77 | gameLink: "https://www.retrogames.cc/mastersystem-games/sonic-genesis-for-master-system.html"
78 | },
79 | {
80 | name: "Sonic The Hedgehog 2",
81 | description: "Sonic The Hedgehog 2 (Europa)",
82 | image: "sonic3.jpeg",
83 | platform: "Master System",
84 | gameLink: "https://www.retrogames.cc/mastersystem-games/sonic-the-hedgehog-2-europe.html"
85 | },
86 | {
87 | name: "Sonic Chaos",
88 | description: "Terceiro lançamento da série Sonic the Hedgehog",
89 | image: "sonic4.jpg",
90 | platform: "Master System",
91 | gameLink: "https://www.retrogames.cc/mastersystem-games/sonic-chaos-europe.html"
92 | },
93 | {
94 | name: "Alex Kidd",
95 | description: "Alex Kidd In Miracle World",
96 | image: "alexk.jpg",
97 | platform: "Master System",
98 | gameLink: "https://www.retrogames.cc/mastersystem-games/alex-kidd-in-miracle-world-usa-europe.html"
99 | },
100 | {
101 | name: "Asterix",
102 | description: "Baseado na série de quadrinhos Asterix",
103 | image: "asterix.jpg",
104 | platform: "Master System",
105 | gameLink: "https://www.retrogames.cc/mastersystem-games/asterix-europe-en-fr-v1-1.html"
106 | },
107 | {
108 | name: "Asterix and the Secret Mission",
109 | description: "Baseado na série de quadrinhos Asterix",
110 | image: "asterix2.jpeg",
111 | platform: "Master System",
112 | gameLink: "https://www.retrogames.cc/mastersystem-games/asterix-and-the-secret-mission-europe-en-fr-de.html"
113 | },
114 | {
115 | name: "Ayrton Senna's",
116 | description: "Super Monaco GP II (Europa)",
117 | image: "ayrton.jpg",
118 | platform: "Master System",
119 | gameLink: "https://www.retrogames.cc/mastersystem-games/ayrton-senna-s-super-monaco-gp-ii-europe.html"
120 | },
121 | {
122 | name: "Batman Returns",
123 | description: "Baseado no filde de 1992",
124 | image: "BatmanReturns_SMS_title.png",
125 | platform: "Master System",
126 | gameLink: "https://www.retrogames.cc/mastersystem-games/batman-returns-europe.html"
127 | },
128 | {
129 | name: "Black Belt",
130 | description: "Versão do jogo japonês Hokuto no Ken",
131 | image: "bb.jpeg",
132 | platform: "Master System",
133 | gameLink: "https://www.retrogames.cc/mastersystem-games/black-belt-usa-europe.html"
134 | },
135 | {
136 | name: "Golden Axe",
137 | description: "Jogo de luta com elementos de fantasia medieval",
138 | image: "ga.png",
139 | platform: "Master System",
140 | gameLink: "https://www.retrogames.cc/mastersystem-games/golden-axe-usa-europe.html"
141 | },
142 | {
143 | name: "Mortal Kombat",
144 | description: "Jogo que revolucionou o gênero de luta",
145 | image: "MK-2.jpg",
146 | platform: "Master System",
147 | gameLink: "https://www.retrogames.cc/mastersystem-games/mortal-kombat-europe.html"
148 | },
149 | {
150 | name: "Crash Bandicoot",
151 | description: "Um dos jogos mais populares do PlayStation",
152 | image: "crash.jpeg",
153 | platform: "PlayStation",
154 | gameLink: "https://www.retrogames.cc/psx-games/crash-bandicoot.html"
155 | },
156 | {
157 | name: "FIFA 2000",
158 | description: "Jogo de futebol lançado em 1999",
159 | image: "f2000.jpg",
160 | platform: "PlayStation",
161 | gameLink: "https://www.retrogames.cc/psx-games/fifa-2000.html"
162 | },
163 | {
164 | name: "Tekken 3",
165 | description: "Jogo de luta lançado em 1997",
166 | image: "t3.jpg",
167 | platform: "PlayStation",
168 | gameLink: "https://www.retrogames.cc/psx-games/tekken-3.html"
169 | },
170 | {
171 | name: "Castlevania",
172 | description: "Symphony Of The Night",
173 | image: "castlevania.jpg",
174 | platform: "PlayStation",
175 | gameLink: "https://www.retrogames.cc/psx-games/castlevania-symphony-of-the-night.html"
176 | },
177 | {
178 | name: "Crash Bandicoot Warped",
179 | description: "Terceiro jogo da série",
180 | image: "warped.jpg",
181 | platform: "PlayStation",
182 | gameLink: "https://www.retrogames.cc/psx-games/crash-bandicoot-warped.html"
183 | },
184 | {
185 | name: "Grand Theft Auto",
186 | description: "O primeiro jogo da série GTA",
187 | image: "gta.jpeg",
188 | platform: "PlayStation",
189 | gameLink: "https://www.retrogames.cc/psx-games/grand-theft-auto.html"
190 | },
191 | {
192 | name: "Harvest Moon",
193 | description: "Back to Nature",
194 | image: "hm.jpg",
195 | platform: "PlayStation",
196 | gameLink: "https://www.retrogames.cc/psx-games/harvest-moon-back-to-nature.html"
197 | },
198 | ];
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | /* Importando a fonte */
2 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
3 |
4 | /* Estilo do fundo e das estrelas */
5 | body {
6 | background-color: black;
7 | color: white;
8 | font-family: 'Press Start 2P', cursive;
9 | margin: 0;
10 | padding: 0;
11 | width: 100%;
12 | height: 100%;
13 | overflow-x: hidden;
14 | }
15 |
16 | .estrelas {
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | width: 100%;
21 | height: 100%;
22 | pointer-events: none;
23 | overflow: hidden;
24 | }
25 |
26 | .estrela {
27 | position: absolute;
28 | width: 2px;
29 | height: 2px;
30 | background-color: white;
31 | border-radius: 50%;
32 | animation: twinkling 2s infinite, moveStar 30s linear infinite;
33 | }
34 |
35 | @keyframes twinkling {
36 | 0% {
37 | transform: scale(1);
38 | opacity: 1;
39 | }
40 | 50% {
41 | transform: scale(1.5);
42 | opacity: 0.5;
43 | }
44 | 100% {
45 | transform: scale(1);
46 | opacity: 1;
47 | }
48 | }
49 |
50 | @keyframes moveStar {
51 | 0% {
52 | transform: translate(0, 0);
53 | }
54 | 50% {
55 | transform: translate(50px, 50px);
56 | }
57 | 100% {
58 | transform: translate(0, 0);
59 | }
60 | }
61 |
62 | /* Estilo da nave */
63 | .nave {
64 | position: fixed;
65 | bottom: 20px;
66 | left: 50%;
67 | transform: translateX(-50%);
68 | width: 0;
69 | height: 0;
70 | border-left: 15px solid transparent;
71 | border-right: 15px solid transparent;
72 | border-bottom: 25px solid #FFD700;
73 | transition: left 0.1s linear;
74 | }
75 |
76 | @keyframes moverNave {
77 | 0% { transform: translateX(-50%) translateY(0); }
78 | 50% { transform: translateX(-50%) translateY(-30px); }
79 | 100% { transform: translateX(-50%) translateY(0); }
80 | }
81 |
82 | /* Estilo dos tiros */
83 | .tiro {
84 | position: fixed;
85 | bottom: 20px;
86 | width: 2px;
87 | height: 10px;
88 | background-color: #FF0066;
89 | animation: moverTiro 2s linear infinite;
90 | }
91 |
92 | @keyframes moverTiro {
93 | 0% {
94 | bottom: 50px;
95 | opacity: 1;
96 | }
97 | 50% {
98 | bottom: 50%;
99 | opacity: 1;
100 | }
101 | 90% {
102 | bottom: 95%;
103 | opacity: 0;
104 | }
105 | 100% {
106 | bottom: 100%;
107 | opacity: 0;
108 | }
109 | }
110 |
111 | /* Estilo do alien */
112 | .alien {
113 | position: absolute;
114 | top: 0;
115 | left: -5%;
116 | animation: moverAlien 30s linear infinite;
117 | width: 50px;
118 | height: 80px;
119 | user-select: none;
120 | }
121 |
122 | .alien2 {
123 | position: absolute;
124 | top: 5px;
125 | left: -5%;
126 | animation: moverAlien 15s linear infinite;
127 | width: 80px;
128 | height: 80px;
129 | user-select: none;
130 | }
131 |
132 | @keyframes moverAlien4 {
133 | 0% {
134 | transform: translateX(0) translateY(500px); /* Início do movimento */
135 | }
136 | 25% {
137 | transform: translateX(calc(25vw)) translateY(200px); /* Movimento para direita e para baixo */
138 | }
139 | 50% {
140 | transform: translateX(calc(50vw)) translateY(-20px); /* Movimento para direita e para cima */
141 | }
142 | 75% {
143 | transform: translateX(calc(75vw)) translateY(250px); /* Movimento para direita e para baixo */
144 | }
145 | 100% {
146 | transform: translateX(calc(100vw)) translateY(0); /* Final do movimento, volta à posição inicial */
147 | }
148 | }
149 |
150 | .alien4 {
151 | position: absolute;
152 | top: 0;
153 | left: -5%;
154 | animation: moverAlien4 5s linear infinite;
155 | width: 100px;
156 | height: 100px;
157 | user-select: none;
158 | }
159 |
160 | .alien3 {
161 | position: absolute;
162 | top: 0;
163 | left: -5%;
164 | animation: moverAlien3 10s linear infinite;
165 | width: 100px;
166 | height: 100px;
167 | user-select: none;
168 | }
169 |
170 | @keyframes moverAlien3 {
171 | 0% {
172 | transform: translateX(0);
173 | }
174 | 20% {
175 | transform: translateX(calc(80vw + 10px));
176 | }
177 | 30% {
178 | transform: translateX(calc(40vw + 10px));
179 | }
180 | 90% {
181 | transform: translateX(calc(100vw + 10px));
182 | }
183 | 100% {
184 | transform: translateX(0);
185 | }
186 | }
187 |
188 | .alien5 {
189 | position: absolute;
190 | top: 0;
191 | left: -5%;
192 | animation: moverAlien5 20s linear infinite;
193 | width: 350px;
194 | height: 250px;
195 | user-select: none;
196 | }
197 |
198 | @keyframes moverAlien5 {
199 | 0% {
200 | transform: translateX(0);
201 | }
202 | 50% {
203 | transform: translateX(calc(2vw));
204 | }
205 | 100% {
206 | transform: translateX(0);
207 | }
208 | }
209 |
210 | @keyframes moverAlien {
211 | 0% {
212 | transform: translateX(0);
213 | }
214 | 50% {
215 | transform: translateX(calc(100vw + 10px));
216 | }
217 | 100% {
218 | transform: translateX(0);
219 | }
220 | }
221 |
222 | /* Estilo geral da página */
223 | .container {
224 | text-align: center;
225 | padding-top: 40px;
226 | z-index: 1;
227 | position: relative;
228 | overflow-y: auto;
229 | overflow-x: hidden;
230 | padding-bottom: 80px;
231 | }
232 |
233 | .title {
234 | user-select: none;
235 | margin-bottom: 0;
236 | font-size: 2em;
237 | color: #FFD700;
238 | text-shadow:
239 | 4px 4px 0 #FF0066,
240 | 8px 8px 0 #000;
241 | }
242 |
243 | input[type="text"] {
244 | width: 60%;
245 | margin-top: 20px;
246 | padding: 8px;
247 | font-size: 0.9em;
248 | text-align: center;
249 | border: 2px solid #FFD700;
250 | background-color: black;
251 | color: #00FF00;
252 | border-radius: 5px;
253 | outline: none;
254 | }
255 |
256 | input[type="text"]::placeholder {
257 | color: #9d8c2f;
258 | font-size: 0.9rem;
259 | user-select: none;
260 | }
261 |
262 | .results {
263 | margin-top: 30px;
264 | display: grid;
265 | grid-template-columns: repeat(4, 1fr);
266 | gap: 15px;
267 | padding: 0 10px;
268 | overflow: hidden;
269 | }
270 |
271 | .sn-wrapper {
272 | display: flex;
273 | align-items: center;
274 | justify-content: center;
275 | background-color: transparent; /* Permite que o fundo fique visível */
276 | padding: 10px;
277 | cursor: pointer;
278 | }
279 |
280 | .sn-wrapper:hover {
281 | transform: scale(1.05);
282 | }
283 |
284 | .sn-ear {
285 | background-color: #3f3f3f;
286 | border: 2px solid #333;
287 | width: 10%; /* Largura menor para as orelhas */
288 | height: 200px; /* Altura ajustada */
289 | box-shadow: 6px 6px 0 #212121, 0 0 10px rgba(0, 0, 0, 0.5);
290 | position: relative;
291 | }
292 |
293 | .left-ear {
294 | border-radius: 7px 0 0 7px;
295 | z-index: 0;
296 | }
297 |
298 | .right-ear {
299 | border-radius: 0 7px 7px 0;
300 | z-index: 1;
301 | }
302 |
303 | .sn-center {
304 | background-color: #555;
305 | border: 2px solid #333;
306 | height: 200px; /* Altura ajustada */
307 | width: 70%; /* Largura maior para o centro */
308 | display: flex;
309 | flex-direction: column;
310 | justify-content: center;
311 | align-items: center;
312 | border-radius: 10px;
313 | padding: 10px;
314 | box-shadow: 6px 6px 0 #212121, 0 0 10px rgba(0, 0, 0, 0.5);
315 | position: relative;
316 | }
317 |
318 | .sn-image {
319 | background-color: #333;
320 | padding: 5px;
321 | border-radius: 10px;
322 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
323 | margin-bottom: 10px;
324 | width: 100%;
325 | max-height: 100px;
326 | }
327 |
328 | .sn-image img {
329 | width: 100%;
330 | height: auto;
331 | max-height: 100px;
332 | border-radius: 8px;
333 | object-fit: cover;
334 | }
335 |
336 | .sn-label {
337 | background-color: #444;
338 | padding: 10px;
339 | border-radius: 10px;
340 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
341 | width: 100%;
342 | box-sizing: border-box;
343 | }
344 |
345 | .sn-label h3 {
346 | margin: 0;
347 | font-size: 0.7em;
348 | color: #FFD700;
349 | }
350 |
351 | .sn-label p {
352 | font-size: 0.5em;
353 | color: #FFF;
354 | margin: 5px 0 0;
355 | text-align: center;
356 | }
357 |
358 | /* Estilo do botão de reiniciar */
359 | .restart-button {
360 | position: absolute;
361 | top: 20px;
362 | right: 50px;
363 | width: 90px;
364 | height: 65px;
365 | cursor: pointer;
366 | z-index: 1000;
367 | display: none;
368 | user-select: none;
369 | transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
370 | }
371 |
372 | .restart-button:hover {
373 | transform: translateY(5px);
374 | box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
375 | }
376 |
377 | .footer{
378 | position: fixed;
379 | bottom: 40px;
380 | left: 0;
381 | padding: 10px;
382 | font-size: 0.2em;
383 | user-select: none;
384 | }
385 |
386 | #github-link{
387 | color: #3fe0ff;
388 | text-decoration: none;
389 | text-wrap: nowrap;
390 | display: inline;
391 | }
392 |
393 | .filters{
394 | margin-top: 0;
395 | display: flex;
396 | justify-content: center;
397 | gap: 10px;
398 | }
399 |
400 | .filter-btn {
401 | margin-top: 7px;
402 | padding: 5px 10px;
403 | font-size: 0.6rem;
404 | background-color: #FFD700;
405 | color: black;
406 | border: none;
407 | border-radius: 5px;
408 | cursor: pointer;
409 | display: block;
410 | font-family: 'Press Start 2P', cursive;
411 | transition: background-color 0.3s ease;
412 | user-select: none;
413 | }
414 |
415 | .filter-btn:hover {
416 | background-color: #FFA500;
417 | }
418 |
419 | .game-link{
420 | text-decoration: none;
421 | user-select: none;
422 | }
423 |
424 | .timer {
425 | position: absolute;
426 | top: 20px;
427 | left: 20px;
428 | font-size: 18px;
429 | color: #FFD700;
430 | font-family: 'Press Start 2P', cursive;
431 | z-index: 1000;
432 | user-select: none;
433 | }
434 |
435 | .death-star {
436 | position: fixed;
437 | bottom: -30px;
438 | left: 40%;
439 | width: 100%;
440 | height: 960px;
441 | background-image: url('assets/clouds.png');
442 | background-repeat: no-repeat;
443 | background-position: bottom;
444 | z-index: -1;
445 | }
--------------------------------------------------------------------------------