Encriptador uptades detective

index.html

@@ -37,7 +37,11 @@ <h1><img class="candado" src="imagenes/candado.svg">
                     <button class="button-dos" onclick="decryptText();">Desencriptar!</button>
                 </div>
             </div>
-            <div class="output"><textarea id="result" rows="18" cols="32" class="campotransparente-dos"></textarea><br>
+                <div class="output">
+                    <div class="detective">
+                        <img src="imagenes/detective.svg">
+                    </div>
+                    <textarea id="result" rows="18" cols="32" class="campotransparente-dos" placeholder=""></textarea><br>
                 <div style="text-align: center;">
                     <button class="button-tres" onclick="copyText();">Copiar</button>
                 </div>

styles.css

@@ -89,6 +89,17 @@ body {
     display: none;
 }
 
+.detective {
+    display: flex;
+    opacity: 75%;
+    width: 240px;
+    height: 240px;
+    filter: invert(12%) sepia(92%) saturate(2487%) hue-rotate(242deg) brightness(84%) contrast(138%);
+    position: absolute;
+    margin-left: 7% ;
+    margin-top: 5%;
+}
+
 p {
     font-size: 16px;
     font-family: 'Montserrat', sans-serif;
@@ -123,7 +134,7 @@ p {
 }
 
 .button-uno:hover {
-    background-color: rgb(207, 66, 0); /* Puedes utilizar cualquier color deseado */
+    background-color: rgb(207, 66, 0);
 }
 
 .button-dos {
@@ -236,4 +247,8 @@ p {
             box-sizing: border-box;
     }
 
+    .detective {
+        margin: 10% 13%;
+    }
+
 }