├── Imagenes
    ├── alura.jpg
    ├── fondo.jpg
    ├── nino.jpg
    ├── one2.jpg
    ├── logone.jpg
    └── onetendo2.jpg
├── Copiar.js
├── Desencriptador.js
├── Encriptador.js
├── index.html
└── Design.css


/Imagenes/alura.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/alura.jpg


--------------------------------------------------------------------------------
/Imagenes/fondo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/fondo.jpg


--------------------------------------------------------------------------------
/Imagenes/nino.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/nino.jpg


--------------------------------------------------------------------------------
/Imagenes/one2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/one2.jpg


--------------------------------------------------------------------------------
/Imagenes/logone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/logone.jpg


--------------------------------------------------------------------------------
/Imagenes/onetendo2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielJuda7/Solucion_Challenge/HEAD/Imagenes/onetendo2.jpg


--------------------------------------------------------------------------------
/Copiar.js:
--------------------------------------------------------------------------------
 1 | document.querySelector(".btncopiar").addEventListener("click", function () {
 2 |   let copyText = document.querySelector(".texto2").value;
 3 |   navigator.clipboard.writeText(copyText).then(() => {
 4 |     document.querySelector(".mensajecopiado").classList.add("show");
 5 |     setTimeout(() => {
 6 |       document.querySelector(".mensajecopiado").classList.remove("show");
 7 |     }, 1300);
 8 |   });
 9 | });
10 | 
11 | document.querySelector(".instrucciones").addEventListener("click", function () {
12 |   alert(
13 |     "Instrucciones: \n  Este programa permite encriptar y desencriptar un texto \n  El único REQUISITO es ingresar letras minúsculas\n  NO admite números ni caracteres especiales "
14 |   );
15 | });
16 | 


--------------------------------------------------------------------------------
/Desencriptador.js:
--------------------------------------------------------------------------------
 1 | var vocales = ["a", "e", "i", "o", "u"];
 2 | var intercambio = ["ai", "enter", "imes", "ober", "ufat"];
 3 | var verificar = false;
 4 | var text = "";
 5 | var cnt = 0;
 6 | const canvas = document.getElementById("lienzo");
 7 | const ctx = canvas.getContext("2d");
 8 | const w = canvas.width;
 9 | const h = canvas.height;
10 | 
11 | ctx.fillStyle = "#F4D53C";
12 | ctx.fillRect(0, 0, w, h);
13 | 
14 | const cols = Math.floor(w / 20) + 1;
15 | const posicion_y = Array(cols).fill(0);
16 | 
17 | function desencriptar() {
18 |   let input = document.getElementById("mensajeaEncriptar");
19 |   texto = input.value;
20 |   verificarMinusculas(texto);
21 |   if (verificar) {
22 |     for (let i = 0; i < intercambio.length; i++) {
23 |       texto = texto.replaceAll(intercambio[i], vocales[i]);
24 |     }
25 |     function matrix() {
26 |       ctx.fillStyle = "#0001";
27 |       ctx.fillRect(0, 0, w, h);
28 |       ctx.fillStyle = "#EBC922";
29 |       ctx.font = "15pt monospace";
30 | 
31 |       posicion_y.forEach((y, ind) => {
32 |         const text = String.fromCharCode(Math.random() * 128);
33 |         const x = ind * 20;
34 |         ctx.fillText(text, x, y);
35 |         if (y > 100 + Math.random() * 1000) {
36 |           posicion_y[ind] = 0;
37 |         } else posicion_y[ind] = y + 20;
38 |       });
39 | 
40 |       cnt++;
41 |       if (cnt == 60) {
42 |         clearInterval(intervalo);
43 |         ctx.fillStyle = "#F4D53C";
44 |         ctx.fillRect(0, 0, w, h);
45 |         cnt = 0;
46 |         resultado.innerText = texto;
47 |       }
48 |     }
49 | 
50 |     var intervalo = setInterval(matrix, Math.random() * 50);
51 |     //matrix();
52 |   } else {
53 |     alert("Ingrese solo minúsculas");
54 |   }
55 | }
56 | 
57 | function verificarMinusculas(texto) {
58 |   let mayusculas = /^[a-z\s]+$/g;
59 |   verificar = mayusculas.test(texto);
60 |   console.log(verificar);
61 |   return verificar;
62 | }
63 | 


--------------------------------------------------------------------------------
/Encriptador.js:
--------------------------------------------------------------------------------
 1 | //var texto="";
 2 | 
 3 | var caja = [];
 4 | var vocales = ["a", "e", "i", "o", "u"];
 5 | var intercambio = ["ai", "enter", "imes", "ober", "ufat"];
 6 | var verificar = false;
 7 | var texto = "";
 8 | var cnt = 0;
 9 | const canva = document.getElementById("lienzo2");
10 | const ct = canva.getContext("2d");
11 | const wi = canva.width;
12 | const he = canva.height;
13 | 
14 | ctx.fillRect(0, 0, wi, he);
15 | 
16 | const col = Math.floor(wi / 20) + 1;
17 | const position_y = Array(col).fill(0);
18 | 
19 | function encriptar() {
20 |   var input = document.getElementById("mensajeaEncriptar");
21 |   texto = input.value;
22 |   verificarMinusculas(texto);
23 |   if (verificar) {
24 |     for (let i = 0; i < texto.length; i++) {
25 |       caja.push(texto[i]);
26 | 
27 |       for (let j = 0; j < vocales.length; j++) {
28 |         if (caja[i] == vocales[j]) {
29 |           caja[i] = intercambio[j];
30 |         }
31 |       }
32 |     }
33 |     function matrix() {
34 |       ct.fillStyle = "#0001";
35 |       ct.fillRect(0, 0, wi, he);
36 |       ct.fillStyle = "#78C3D7";
37 |       ct.font = "15pt monospace";
38 | 
39 |       position_y.forEach((y, ind) => {
40 |         const text = String.fromCharCode(Math.random() * 128);
41 |         const x = ind * 20;
42 |         ct.fillText(text, x, y);
43 |         if (y > 100 + Math.random() * 1000) {
44 |           position_y[ind] = 0;
45 |         } else position_y[ind] = y + 20;
46 |       });
47 | 
48 |       cnt++;
49 |       if (cnt == 60) {
50 |         clearInterval(intervalo);
51 |         ct.fillStyle = "#77C4D6";
52 |         ct.fillRect(0, 0, wi, he);
53 |         cnt = 0;
54 |         juntar();
55 |       }
56 |     }
57 |     var intervalo = setInterval(matrix, Math.random() * 50);
58 |   } else {
59 |     alert("Ingrese solo minúsculas");
60 |   }
61 | }
62 | 
63 | function verificarMinusculas(texto) {
64 |   let mayusculas = /^[a-z\s]+$/g;
65 |   verificar = mayusculas.test(texto);
66 |   console.log(verificar);
67 |   return verificar;
68 | }
69 | 
70 | function juntar() {
71 |   let nueva = "";
72 | 
73 |   for (let k = 0; k < caja.length; k++) {
74 |     nueva = nueva.concat(caja[k]);
75 |   }
76 | 
77 |   resultado.innerText = nueva;
78 |   reiniciarValores();
79 | }
80 | 
81 | function reiniciarValores() {
82 |   caja = [];
83 |   texto = "";
84 |   nueva = "";
85 | }
86 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 |   <head>
  5 |     <meta charset="UTF-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8 |     <script src="./Desencriptador.js" async refer></script>
  9 |     <script src="./Encriptador.js" async refer></script>
 10 |     <script src="./Copiar.js" async refer></script>
 11 |     <script
 12 |       src="https://kit.fontawesome.com/1003ac90d9.js"
 13 |       crossorigin="anonymous"
 14 |       async
 15 |       refer
 16 |     ></script>
 17 | 
 18 |     <title>Challenge 1</title>
 19 |     <link rel="stylesheet" href="Design.css" />
 20 |   </head>
 21 | 
 22 |   <body>
 23 |     <main>
 24 |       <div class="Pantalla1">
 25 |         <div class="bocinas">
 26 |           <div class="bocina1"></div>
 27 |           <div class="bocina2"></div>
 28 |           <div class="bocina3"></div>
 29 |           <div class="bocina4"></div>
 30 |           <div class="bocina5"></div>
 31 |           <div class="bocina6"></div>
 32 |         </div>
 33 |         <div class="bocinas2">
 34 |           <div class="bocina1"></div>
 35 |           <div class="bocina2"></div>
 36 |           <div class="bocina3"></div>
 37 |           <div class="bocina4"></div>
 38 |           <div class="bocina5"></div>
 39 |           <div class="bocina6"></div>
 40 |         </div>
 41 |         <div class="areatexto">
 42 |           <form action="">
 43 |             <textarea
 44 |               autofocus
 45 |               placeholder="Ingrese su texto aquí"
 46 |               class="texto1"
 47 |               spellcheck="false"
 48 |               id="mensajeaEncriptar"
 49 |             ></textarea>
 50 | 
 51 |             <button class="instrucciones">
 52 |               <i class="fa-solid fa-question"></i>
 53 |             </button>
 54 |           </form>
 55 |         </div>
 56 |       </div>
 57 |       <div class="imagenOne"></div>
 58 |       <div class="imagenalura"></div>
 59 |       <div class="imagenino"></div>
 60 | 
 61 |       <div class="Bisagra">
 62 |         <div class="luzencendido">
 63 |           <div class="luz1"></div>
 64 |           <div class="luz2"></div>
 65 |           <div class="luz3"></div>
 66 |         </div>
 67 |       </div>
 68 |       <section class="Pantalla2">
 69 |         <div class="areatexto2" ;id="cadena">
 70 |           <div class="Botones">
 71 |             <button onclick="encriptar()" class="btn btn-1">Encriptar</button>
 72 |             <button onclick="desencriptar()" class="btn2 btn-2">
 73 |               Desencriptar
 74 |             </button>
 75 |           </div>
 76 |           <div>
 77 |             <form>
 78 |               <textarea readonly class="texto2" id="resultado"></textarea>
 79 |             </form>
 80 |           </div>
 81 |         </div>
 82 |         <div class="cajabtncopiar">
 83 |           <button class="btncopiar">
 84 |             <i class="fa-regular fa-copy"></i>
 85 |           </button>
 86 |           <p class="leyendacopiar">COPIAR</p>
 87 |         </div>
 88 |         <div class="cajaStart">
 89 |           <div class="btnStart"></div>
 90 |           <p class="leyendaStart">START</p>
 91 |         </div>
 92 |         <div class="cajacruz">
 93 |           <div class="cuadroCruz1"></div>
 94 |           <div class="cuadroCruz2"></div>
 95 |           <div class="cuadroCruz3"></div>
 96 |           <div class="cuadroCruz4"></div>
 97 |           <div class="cuadroCruz5"></div>
 98 |         </div>
 99 |         <div class="cajabotones">
100 |           <div class="botonA">
101 |             <i class="fa-solid fa-a"></i>
102 |           </div>
103 |           <div class="botonB">
104 |             <i class="fa-solid fa-b"></i>
105 |           </div>
106 |           <div class="botonY">
107 |             <i class="fa-solid fa-y"></i>
108 |           </div>
109 |           <div class="botonX">
110 |             <i class="fa-solid fa-x"></i>
111 |           </div>
112 |         </div>
113 |       </section>
114 |       <div class="lugar">
115 |         <canvas id="lienzo" width="240" height="500"></canvas>
116 |       </div>
117 |       <div class="lugar2">
118 |         <canvas id="lienzo2" width="240" height="500"></canvas>
119 |       </div>
120 |       <div class="mensajecopiado"><p>¡Copiado al Portapapeles!</p></div>
121 |     </main>
122 |   </body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/Design.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Kufam&display=swap");
  2 | @keyframes move_vector {
  3 |   0% {
  4 |     transform: translateY(15px);
  5 |   }
  6 |   50% {
  7 |     transform: translateY(0px);
  8 |   }
  9 | 
 10 |   100% {
 11 |     transform: translateY(15px);
 12 |   }
 13 | }
 14 | 
 15 | @keyframes colores {
 16 |   0% {
 17 |     background: #636363;
 18 |   }
 19 |   50% {
 20 |     background: #b7b7b7;
 21 |   }
 22 | 
 23 |   100% {
 24 |     background: #ffffff;
 25 |   }
 26 | }
 27 | @keyframes contornos {
 28 |   0% {
 29 |     color: #636363;
 30 |   }
 31 |   50% {
 32 |     color: #b7b7b7;
 33 |   }
 34 |   100% {
 35 |     color: #ffffff;
 36 |   }
 37 | }
 38 | @keyframes colores1 {
 39 |   0% {
 40 |     background: #636363;
 41 |   }
 42 |   50% {
 43 |     background: #b7b7b7;
 44 |   }
 45 |   90% {
 46 |     background-image: url("Imagenes/onetendo2.jpg");
 47 |   }
 48 |   100% {
 49 |     background: #ffffff;
 50 |   }
 51 | }
 52 | @keyframes colores2 {
 53 |   0% {
 54 |     background: #636363;
 55 |   }
 56 |   50% {
 57 |     background: #b7b7b7;
 58 |   }
 59 |   90% {
 60 |     background-image: url("Imagenes/logone.jpg");
 61 |   }
 62 |   100% {
 63 |     background: #ffffff;
 64 |   }
 65 | }
 66 | @keyframes luz1 {
 67 |   0% {
 68 |     background: #636363;
 69 |   }
 70 |   50% {
 71 |     background: #b7b7b7;
 72 |   }
 73 |   100% {
 74 |     background: green;
 75 |   }
 76 | }
 77 | @keyframes luz2 {
 78 |   0% {
 79 |     background: #636363;
 80 |   }
 81 |   50% {
 82 |     background: #b7b7b7;
 83 |   }
 84 |   100% {
 85 |     background: yellow;
 86 |   }
 87 | }
 88 | @keyframes luz3 {
 89 |   0% {
 90 |     background: #636363;
 91 |   }
 92 |   50% {
 93 |     background: #b7b7b7;
 94 |   }
 95 |   100% {
 96 |     background: #d81212;
 97 |   }
 98 | }
 99 | @keyframes signoint {
100 |   0% {
101 |     visibility: hidden;
102 |   }
103 |   50% {
104 |     visibility: hidden;
105 |   }
106 | 
107 |   100% {
108 |     visibility: hidden;
109 |   }
110 | }
111 | body {
112 |   height: 100%;
113 |   margin: 0;
114 |   background-image: url("Imagenes/fondo.jpg");
115 | }
116 | main {
117 |   background-image: url("Imagenes/fondo.jpg");
118 |   margin: 0 0;
119 |   min-width: 1400px;
120 |   max-width: 1920px;
121 |   min-height: 100vh;
122 | }
123 | 
124 | .Pantalla1 {
125 |   border-style: solid;
126 |   border-color: #000000;
127 |   border-width: 5px;
128 |   width: 600px;
129 |   height: 340px;
130 |   background: #272727;
131 |   position: relative;
132 |   border-radius: 5%;
133 |   left: 287px;
134 |   top: 8px;
135 | }
136 | .imagenOne {
137 |   width: 185px;
138 |   height: 398px;
139 |   position: absolute;
140 |   background-image: url("Imagenes/one2.jpg");
141 |   top: 8px;
142 |   left: 1223px;
143 |   opacity: 0.5;
144 |   animation: move_vector 4s linear infinite;
145 | }
146 | .imagenalura {
147 |   width: 69px;
148 |   height: 107px;
149 |   position: absolute;
150 |   background-image: url("Imagenes/alura.jpg");
151 |   top: 30px;
152 |   left: 50px;
153 | }
154 | .imagenino {
155 |   width: 202px;
156 |   height: 434px;
157 |   position: absolute;
158 |   background-image: url("Imagenes/nino.jpg");
159 |   top: 300px;
160 |   left: 1470px;
161 |   opacity: 0.5;
162 | }
163 | .areatexto {
164 |   position: absolute;
165 |   top: 13%;
166 |   right: 112px;
167 |   border: solid;
168 |   border-width: 20px;
169 |   width: 346px;
170 | }
171 | 
172 | .texto1 {
173 |   resize: none;
174 |   height: 220px;
175 |   width: 340px;
176 |   background: #636363;
177 |   animation-name: colores1;
178 |   animation-duration: 3s;
179 |   background: #ffffff;
180 |   font-family: "Kufam", sans-serif;
181 |   font-size: 20px;
182 |   text-align: center;
183 |   background-image: none;
184 | }
185 | .instrucciones {
186 |   position: absolute;
187 |   right: 4px;
188 |   top: 193px;
189 |   width: 30px;
190 |   height: 30px;
191 |   border-radius: 50%;
192 |   animation-name: signoint;
193 |   animation-duration: 3s;
194 |   border: solid;
195 |   border-color: #901c1e;
196 |   background: #e61e1d;
197 |   cursor: pointer;
198 | }
199 | .fa-question {
200 |   color: #901c1e;
201 | }
202 | .instrucciones:hover {
203 |   width: 35px;
204 |   height: 35px;
205 |   border-width: 4px;
206 | }
207 | .texto2 {
208 |   resize: none;
209 |   border: none;
210 |   height: 180px;
211 |   width: 340px;
212 |   background: #636363;
213 |   animation-name: colores2;
214 |   animation-duration: 3s;
215 |   background: #ffffff;
216 |   font-family: "Kufam", sans-serif;
217 |   font-size: 20px;
218 |   text-align: center;
219 | }
220 | 
221 | .bocinas {
222 |   position: absolute;
223 |   width: 90px;
224 |   height: 60px;
225 |   top: 120px;
226 |   left: 10px;
227 | }
228 | .bocinas2 {
229 |   position: absolute;
230 |   width: 90px;
231 |   height: 60px;
232 |   top: 120px;
233 |   right: 10px;
234 | }
235 | .bocina1 {
236 |   position: absolute;
237 |   width: 10px;
238 |   height: 10px;
239 |   background: #141414;
240 |   border-radius: 50%;
241 |   left: 15px;
242 |   top: 15px;
243 |   margin: 5px;
244 | }
245 | .bocina2 {
246 |   position: absolute;
247 |   width: 10px;
248 |   height: 10px;
249 |   background: #141414;
250 |   border-radius: 50%;
251 |   left: 30px;
252 |   top: 15px;
253 |   margin: 5px;
254 | }
255 | .bocina3 {
256 |   position: absolute;
257 |   width: 10px;
258 |   height: 10px;
259 |   background: #141414;
260 |   border-radius: 50%;
261 |   left: 45px;
262 |   top: 15px;
263 |   margin: 5px;
264 | }
265 | .bocina4 {
266 |   position: absolute;
267 |   width: 10px;
268 |   height: 10px;
269 |   background: #141414;
270 |   border-radius: 50%;
271 |   left: 15px;
272 |   top: 30px;
273 |   margin: 5px;
274 | }
275 | .bocina5 {
276 |   position: absolute;
277 |   width: 10px;
278 |   height: 10px;
279 |   background: #141414;
280 |   border-radius: 50%;
281 |   left: 30px;
282 |   top: 30px;
283 |   margin: 5px;
284 | }
285 | .bocina6 {
286 |   position: absolute;
287 |   width: 10px;
288 |   height: 10px;
289 |   background: #141414;
290 |   border-radius: 50%;
291 |   left: 45px;
292 |   top: 30px;
293 |   margin: 5px;
294 | }
295 | .Bisagra {
296 |   border-style: solid;
297 |   background: #272727;
298 |   border-color: #000000;
299 |   border-width: 3px;
300 |   position: relative;
301 |   width: 500px;
302 |   height: 40px;
303 |   border-radius: 30px;
304 |   left: 332px;
305 |   top: 8px;
306 | }
307 | .luzencendido {
308 |   position: absolute;
309 |   width: 40px;
310 |   height: 21px;
311 |   left: 30px;
312 | }
313 | .luz1 {
314 |   position: absolute;
315 |   left: 0px;
316 |   width: 4px;
317 |   height: 21px;
318 |   border: solid;
319 |   border-width: 2px;
320 |   border-radius: 5px;
321 |   animation-name: luz1;
322 |   animation-duration: 3s;
323 |   background: #3edd36;
324 | }
325 | .luz2 {
326 |   position: absolute;
327 |   left: 10px;
328 |   width: 4px;
329 |   height: 21px;
330 |   border: solid;
331 |   border-width: 2px;
332 |   border-radius: 5px;
333 |   animation-name: luz2;
334 |   animation-duration: 2s;
335 |   background: #636363;
336 | }
337 | .luz3 {
338 |   position: absolute;
339 |   left: 20px;
340 |   width: 4px;
341 |   height: 21px;
342 |   border: solid;
343 |   border-width: 2px;
344 |   border-radius: 5px;
345 |   animation-name: luz3;
346 |   animation-duration: 1s;
347 |   background: #636363;
348 | }
349 | .Pantalla2 {
350 |   border-style: solid;
351 |   border-color: #000000;
352 |   border-width: 5px;
353 |   width: 600px;
354 |   height: 340px;
355 |   background: #272727;
356 |   position: absolute;
357 |   border-radius: 5%;
358 |   left: 287px;
359 |   top: 400px;
360 | }
361 | 
362 | .areatexto2 {
363 |   position: absolute;
364 |   top: 13%;
365 |   border-width: 20px;
366 |   height: 220px;
367 |   width: 346px;
368 |   right: 112px;
369 |   border-style: solid;
370 |   background: #636363;
371 |   border-color: #141414;
372 |   animation-name: colores;
373 |   animation-duration: 3s;
374 |   background: #ffffff;
375 | }
376 | 
377 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
378 | .Botones {
379 |   font-family: "Roboto", sans-serif;
380 |   text-transform: uppercase;
381 |   font-size: 12px;
382 | }
383 | 
384 | .btn {
385 |   animation-name: signoint;
386 |   animation-duration: 3s;
387 |   text-decoration: none;
388 |   padding: 10px 20px;
389 |   position: absolute;
390 |   letter-spacing: 5px;
391 |   text-indent: 10px;
392 |   z-index: 2;
393 |   top: 184px;
394 |   border: none;
395 |   border-radius: 20px;
396 |   color: #fff;
397 |   left: 2px;
398 |   cursor: pointer;
399 | }
400 | .btn2 {
401 |   animation-name: signoint;
402 |   animation-duration: 3s;
403 |   text-decoration: none;
404 |   padding: 10px 20px;
405 |   position: absolute;
406 |   letter-spacing: 5px;
407 |   text-indent: 10px;
408 |   z-index: 2;
409 |   top: 184px;
410 |   right: 0px;
411 |   border: none;
412 |   border-radius: 20px;
413 |   color: #fff;
414 |   right: 2px;
415 |   cursor: pointer;
416 | }
417 | 
418 | .btn-1::after {
419 |   animation-name: colores;
420 |   animation-duration: 3s;
421 |   content: "";
422 |   position: absolute;
423 |   width: 100%;
424 |   height: 100%;
425 |   left: 0;
426 |   top: 0;
427 |   background-image: linear-gradient(
428 |     90deg,
429 |     rgb(255, 30, 143),
430 |     rgb(19, 227, 255),
431 |     rgb(251, 255, 20),
432 |     rgb(255, 15, 15)
433 |   );
434 |   background-size: 300%;
435 |   border-radius: 20px;
436 |   z-index: -1;
437 |   transition: all 0.4s ease;
438 | }
439 | 
440 | .btn-1:hover::after {
441 |   background-position: 100%;
442 |   filter: blur(15px);
443 | }
444 | 
445 | .btn-1::before {
446 |   content: "";
447 |   position: absolute;
448 |   width: 100%;
449 |   height: 100%;
450 |   left: 0;
451 |   top: 0;
452 |   background-image: linear-gradient(
453 |     90deg,
454 |     rgb(255, 30, 143),
455 |     rgb(19, 227, 255),
456 |     rgb(251, 255, 20),
457 |     rgb(255, 15, 15)
458 |   );
459 |   background-size: 300%;
460 |   border-radius: 20px;
461 |   z-index: -1;
462 | }
463 | 
464 | .btn-1:hover::before {
465 |   background-position: 100%;
466 | }
467 | 
468 | .btn-2::after {
469 |   animation-name: colores;
470 |   animation-duration: 3s;
471 |   content: "";
472 |   position: absolute;
473 |   width: 100%;
474 |   height: 100%;
475 |   left: 0;
476 |   top: 0;
477 |   background-image: linear-gradient(
478 |     90deg,
479 |     rgb(19, 227, 255),
480 |     rgb(255, 30, 143),
481 |     rgb(251, 255, 20),
482 |     rgb(255, 15, 15)
483 |   );
484 |   background-size: 300%;
485 |   border-radius: 20px;
486 |   z-index: -1;
487 |   transition: all 0.4s ease;
488 | }
489 | 
490 | .btn-2:hover::after {
491 |   background-position: 100%;
492 |   filter: blur(15px);
493 | }
494 | 
495 | .btn-2::before {
496 |   content: "";
497 |   position: absolute;
498 |   width: 100%;
499 |   height: 100%;
500 |   left: 0;
501 |   top: 0;
502 |   background-image: linear-gradient(
503 |     90deg,
504 |     rgb(255, 30, 143),
505 |     rgb(19, 227, 255),
506 |     rgb(255, 15, 15),
507 |     rgb(251, 255, 20)
508 |   );
509 |   background-size: 300%;
510 |   border-radius: 20px;
511 |   z-index: -1;
512 | }
513 | 
514 | .btn-2:hover::before {
515 |   background-position: 100%;
516 | }
517 | .btn-1:hover {
518 |   font-size: 14px;
519 |   border: solid;
520 |   border-color: red;
521 | }
522 | .btn-2:hover {
523 |   font-size: 14px;
524 |   border: solid;
525 |   border-color: red;
526 | }
527 | 
528 | .cajabtncopiar {
529 |   position: absolute;
530 |   top: 242px;
531 |   right: 10px;
532 |   width: 95px;
533 |   height: 30px;
534 | }
535 | .leyendacopiar {
536 |   position: absolute;
537 |   right: 0px;
538 |   font-family: "Roboto", sans-serif;
539 |   color: #ffffff;
540 | }
541 | .cajaStart {
542 |   position: absolute;
543 |   top: 200px;
544 |   right: 10px;
545 |   width: 95px;
546 |   height: 30px;
547 | }
548 | .leyendaStart {
549 |   position: absolute;
550 |   right: 0px;
551 |   font-family: "Roboto", sans-serif;
552 |   color: #ffffff;
553 |   right: 10px;
554 | }
555 | .mensajecopiado {
556 |   background: rgba(0, 0, 0, 0.7);
557 |   color: #fff;
558 |   position: absolute;
559 |   top: 0;
560 |   left: 0;
561 |   width: 100%;
562 |   height: 100vh;
563 |   display: flex;
564 |   justify-content: center;
565 |   align-items: center;
566 |   font-weight: 900;
567 |   visibility: hidden;
568 |   opacity: 0;
569 |   font-family: "Kufam", sans-serif;
570 | }
571 | 
572 | .show {
573 |   visibility: visible;
574 |   opacity: 1;
575 |   transition: opacity 0.6s;
576 | }
577 | .btncopiar {
578 |   border-radius: 50%;
579 |   width: 25px;
580 |   height: 25px;
581 |   background: #000000;
582 |   position: absolute;
583 |   top: 10px;
584 |   border: solid;
585 |   border-color: #ffffff;
586 |   border-width: 2px;
587 |   cursor: pointer;
588 | }
589 | .btncopiar:hover {
590 |   width: 33px;
591 |   height: 33px;
592 |   border: solid;
593 |   border-color: #ffffff;
594 |   border-width: 3px;
595 | }
596 | .fa-regular {
597 |   color: #ffffff;
598 | }
599 | .btnStart {
600 |   border-radius: 50%;
601 |   width: 21px;
602 |   height: 21px;
603 |   background: #000000;
604 |   position: absolute;
605 |   top: 10px;
606 |   border: solid;
607 |   border-color: #ffffff;
608 |   border-width: 2px;
609 | }
610 | .cajacruz {
611 |   position: absolute;
612 |   top: 20px;
613 |   width: 90px;
614 |   height: 90px;
615 |   top: 80px;
616 |   left: 6px;
617 | }
618 | .cuadroCruz1 {
619 |   position: absolute;
620 |   width: 30px;
621 |   height: 30px;
622 |   left: 30px;
623 |   background: #000000;
624 |   border-top: solid;
625 |   border-right: solid;
626 |   border-left: solid;
627 |   border-bottom: none;
628 |   border-color: #ffffff;
629 |   border-width: 1px;
630 | }
631 | .cuadroCruz2 {
632 |   position: absolute;
633 |   width: 30px;
634 |   height: 30px;
635 |   right: 0px;
636 |   top: 30px;
637 |   background: #000000;
638 |   border-top: solid;
639 |   border-right: solid;
640 |   border-left: none;
641 |   border-bottom: solid;
642 |   border-color: #ffffff;
643 |   border-width: 1px;
644 | }
645 | .cuadroCruz3 {
646 |   position: absolute;
647 |   width: 30px;
648 |   height: 30px;
649 |   left: 30px;
650 |   top: 60px;
651 |   background: #000000;
652 |   border-top: none;
653 |   border-right: solid;
654 |   border-left: solid;
655 |   border-bottom: solid;
656 |   border-color: #ffffff;
657 |   border-width: 1px;
658 | }
659 | .cuadroCruz4 {
660 |   position: absolute;
661 |   width: 30px;
662 |   height: 30px;
663 |   left: 0px;
664 |   top: 30px;
665 |   background: #000000;
666 |   border-top: solid;
667 |   border-right: none;
668 |   border-left: solid;
669 |   border-bottom: solid;
670 |   border-color: #ffffff;
671 |   border-width: 1px;
672 | }
673 | .cuadroCruz5 {
674 |   position: absolute;
675 |   width: 30px;
676 |   height: 30px;
677 |   left: 30px;
678 |   top: 30px;
679 |   background: #000000;
680 | }
681 | .cajabotones {
682 |   position: absolute;
683 |   width: 90px;
684 |   height: 90px;
685 |   top: 80px;
686 |   right: 10px;
687 | }
688 | .botonY {
689 |   position: absolute;
690 |   width: 30px;
691 |   height: 30px;
692 |   left: 30px;
693 |   background: #f19c20;
694 |   border: solid;
695 |   border-color: #fdc91a;
696 |   border-width: 2px;
697 |   border-radius: 50%;
698 | }
699 | .botonB {
700 |   position: absolute;
701 |   width: 30px;
702 |   height: 30px;
703 |   right: 0;
704 |   top: 30px;
705 |   background: #e61e1d;
706 |   border: solid;
707 |   border-color: #bd2325;
708 |   border-width: 2px;
709 |   border-radius: 50%;
710 | }
711 | .botonA {
712 |   position: absolute;
713 |   width: 30px;
714 |   height: 30px;
715 |   left: 30px;
716 |   top: 60px;
717 |   background: #72a53d;
718 |   border: solid;
719 |   border-color: #a9d669;
720 |   border-width: 2px;
721 |   border-radius: 50%;
722 | }
723 | .botonX {
724 |   position: absolute;
725 |   width: 30px;
726 |   height: 30px;
727 |   left: 0px;
728 |   top: 30px;
729 |   background: #0265b6;
730 |   border: solid;
731 |   border-color: #3c92d3;
732 |   border-width: 2px;
733 |   border-radius: 50%;
734 | }
735 | 
736 | .fa-a {
737 |   position: absolute;
738 |   top: 6px;
739 |   left: 7px;
740 |   color: #a9d669;
741 | }
742 | .fa-b {
743 |   position: absolute;
744 |   top: 6px;
745 |   left: 11px;
746 |   color: #bd2325;
747 | }
748 | .fa-y {
749 |   position: absolute;
750 |   top: 6px;
751 |   left: 9px;
752 |   color: #fdc91a;
753 | }
754 | .fa-x {
755 |   position: absolute;
756 |   top: 6px;
757 |   left: 9px;
758 |   color: #3c92d3;
759 | }
760 | .lugar {
761 |   position: absolute;
762 | 
763 |   top: 150px;
764 |   left: 960px;
765 |   width: 240px;
766 |   height: 510px;
767 |   background: #f4d53c;
768 |   border-radius: 15px;
769 | }
770 | .lugar2 {
771 |   position: absolute;
772 | 
773 |   top: 150px;
774 |   left: 0px;
775 |   width: 240px;
776 |   height: 510px;
777 |   background: #74c4d6;
778 |   border-radius: 15px;
779 | }
780 | 
781 | .lienzo {
782 |   position: absolute;
783 | }
784 | 


--------------------------------------------------------------------------------