diff --git a/app.js b/app.js
index 5ae7ed2..b5056de 100644
--- a/app.js
+++ b/app.js
@@ -1,7 +1,7 @@
 let btnCopiar = document.querySelector(".copiar");
-let cuadroMensajes = document.querySelector(".form__outbox--msg");
-let imagen = document.querySelector(".msg--img");
-let cuadroResultado = document.querySelector(".form__outbox--result");
+let cuadroMensajes = document.querySelector(".container__message");
+let imagen = document.querySelector(".search-img");
+let cuadroResultado = document.querySelector(".container__result");
 let textoDesencriptado = document.querySelector("#result");
 
 
@@ -13,12 +13,20 @@ function limpiarTextArea(){
 }
 
 
+function clearDefaultText() {
+    let textoEntrada = document.querySelector("#entrada");
+    //console.log("click por fuera")
+    if (textoEntrada.value === " ") {      
+        textoEntrada.value = "Ingrese el texto aquí:"
+    }     
+}
+
 
 function validarEntrada(){   
     btnCopiar.classList.remove("ocultar");
     let textoEntrada = document.querySelector("#entrada").value;
-    let contenido = textoEntrada.trim(); //quito espacios y tabulaciones
-    if (contenido === '') {
+    let contenido = textoEntrada.trim(); //quito espacios y tabulaciones    
+    if (contenido === '' || contenido === 'Ingrese el texto aquí:') {
         //alert('El texto no puede estar en blanco.'); 
         textoEntrada.focus(); // Con esto espero por el text area de nuevo     
         validarEntrada();       
@@ -54,14 +62,16 @@ function mostrarResultado(resultado){
     ocultarElemento(imagen);
     ocultarElemento(cuadroMensajes);
     cuadroResultado.style.display = 'block';
+    
     textoDesencriptado.innerHTML = resultado;    
 }
 
 function copiarElemento(){
     let texto = document.querySelector("#result");
     let contenidoTexto = texto.innerHTML;
-    navigator.clipboard.writeText(contenidoTexto);  
+    navigator.clipboard.writeText(contenidoTexto);      
     btnCopiar.classList.toggle("ocultar");
+    //btnCopiar.setAttribute("hidden",true);
     //alert("Copiado con exito");
     
 }
@@ -105,8 +115,8 @@ function procesoDesencriptar(texto){
 
 
 function menuHamburguesa(){
-    let menuHamburguesa = document.querySelector('.hamburguer-menu');
-    let contenido = document.querySelector('.menu--info-proyect');   
+    let menuHamburguesa = document.querySelector('.hamburguer');
+    let contenido = document.querySelector('.links');   
     menuHamburguesa.classList.toggle('menu-abierto');
     contenido.classList.toggle('menu-abierto');
 
@@ -116,8 +126,8 @@ function menuHamburguesa(){
 // Agrega un evento de clic al documento
 
 document.addEventListener('click', function(event) {
-    let menuHamburguesa = document.querySelector('.hamburguer-menu');
-    let contenido = document.querySelector('.menu--info-proyect');   
+    let menuHamburguesa = document.querySelector('.hamburguer');
+    let contenido = document.querySelector('.links');   
     const estaDentroDelMenu = menuHamburguesa.contains(event.target);
     
     
@@ -131,11 +141,12 @@ document.addEventListener('click', function(event) {
 
 
 
-let btnToogle = document.querySelector("#toogle-button");
-let img= document.querySelector("#img-toogle-buttton");
+// utilizo un interruptor para los modos de luz
+
+let btnToogle = document.querySelector("#toogle-btn");
+let img= document.querySelector("#toogle-btn--img");
     
 btnToogle.addEventListener("click",function(){
-
     let body = document.querySelector("body");
     if (body.classList.contains("dark-mode")){
         body.classList.remove("dark-mode");
@@ -143,10 +154,5 @@ btnToogle.addEventListener("click",function(){
     }else{
         body.classList.add("dark-mode");
         img.setAttribute("src", "./icons/sun.png");
-    }});
-
-
-
-
-    
+}});
 
diff --git a/css/pc.css b/css/pc.css
index 8e973cc..c01b396 100644
--- a/css/pc.css
+++ b/css/pc.css
@@ -1,77 +1,51 @@
-body{
-    max-width: 1680px;
-    margin: 0 auto;
+.nav{
+    height: 60px;
 }
 
 
-main{
+.main{
     display: flex;
     align-items: center;
-    padding-bottom: 3em;
-    margin-bottom: 1em;
+    align-content: center;
+    margin-top: 2em;
+    margin-bottom: 1em;    
 }
 
-.form__box{    
-    width: 45%;   
+
+.main__form,.main__output{    
+    width: 45%;       
     margin: 0 auto;
-}
+    padding-top: 0;
 
-.form__inbox textarea {
-    padding-left:0 ;
-    padding-right: 0;
 }
 
-.form__buttons{
-    width: 100%;
-    margin-top: 0.5em;   
+.input__textarea{  
+    min-height: 380px;
+    margin-top: 0;
 }
-
-.btn{
-    width: 70%;
-    padding: 0.6em; 
-} 
-
-.outbox-container{
+.buttons__btn{ 
     width: 40%;
-    margin: 0 auto; 
 }
-.form__outbox{      
-    border-radius: 20px;
-    padding-bottom: 0;
+
+.container__result{
+    min-height: 520px;
 }
-.form__outbox--img{
+
+.container__img{
     display: block;
     background-image: url(./icons/Loupe.png);
-    margin-top: 2em;
-}
-
-.form__outbox--img img {
-    width: 90%;
 }
 
-.form__outbox--result h1 {
-    margin-top: 1.5em;
-    margin-bottom: 1em;
-
-}
-.form__outbox--result textarea{ 
-    min-height: 380px;
-    
-    margin-bottom: 1em;
-    padding-bottom: 1em;
+.hero{
+    display: none;
 }
 
-.form__outbox--btncopiar{
-    margin: 0 auto;    
+.footer{
+    padding-top: 2em  ;
 }
 
-.hero__img{
-    display: none;
-    margin-bottom: 1em;
+.footer__socials{
+    width: 60%;
 }
 
-footer section{
-    padding-bottom: 0;
-    padding-top: 0;
-}
 
diff --git a/css/tablet.css b/css/tablet.css
index 570dad5..1b016f1 100644
--- a/css/tablet.css
+++ b/css/tablet.css
@@ -1,53 +1,63 @@
-.hamburguer-menu, .menu--info-proyect{
+.hamburguer, .links{
     visibility: hidden;
 }
 
-.menu--info-project--desplegado ul{
-    visibility:visible;
+.links-deployed{
+    display: flex;    
+    justify-content: space-between; 
+    visibility: visible; 
+    list-style: none;
 }
 
-.menu--info-project--desplegado ul li a{
-    font-size: 1.8rem;
+.links_deployed .links_item{
+    font-size: 1.8rem;   
+    color: var(--text-color);
 }
 
-.form__inbox textarea{   
-    font-size: 1.8rem;
-    min-height: 400px;
+.main__form{
+    width: 100%;  
 
 }
-.form__buttons{
-    display: flex;    
+.input__textarea{   
+    font-size: 1.8rem;
+    min-height: 300px;
+}
+
 
+.buttons{
+    display: flex;    
+    justify-content: space-around;
+    align-content: center;
+    margin-top: 2em;
 }
-.btn{
-    width: 50%;
-    margin: 0 0.5em;
+
+
+.buttons__btn{ 
+    width: 40%;
+    margin: 0 auto;   
     font-size: 2.4rem;
 }
 
-.form__outbox--msg h5 {
-    padding: 1.4em;
-    font-size: 1.6rem;
+.main__output{
+    width: 100%;
 }
+.container__message h5 {
 
-.form__outbox--result textarea{ 
-    max-height: 400px;
-    font-size: 1.8rem;
-    margin-bottom: 2em;
+    font-size: 1.6rem;
 }
 
-.hero__img{    
+
+.hero{    
     min-width: 768px; 
     min-height: 400px; 
     max-width: 980px;
-    margin: 10px auto;     
+    margin: 1em auto;     
     background-size:cover;
 }
 
-footer .left ul li a{    
-    font-size: 1.8rem;
+.footer__socials{
+    width: 50%;
 }
-
-.right a{     
+.social-link{    
     font-size: 1.8rem;
 }
\ No newline at end of file
diff --git a/icons/git.png b/icons/git.png
new file mode 100644
index 0000000..0e5d7d6
Binary files /dev/null and b/icons/git.png differ
diff --git a/icons/linkedin_2.png b/icons/linkedin_2.png
new file mode 100644
index 0000000..f6dc8bf
Binary files /dev/null and b/icons/linkedin_2.png differ
diff --git a/img/imagen_pc.jpg b/img/imagen_pc.jpg
deleted file mode 100644
index 91a1a21..0000000
Binary files a/img/imagen_pc.jpg and /dev/null differ
diff --git a/index.html b/index.html
index d981501..8dc3d80 100644
--- a/index.html
+++ b/index.html
@@ -8,75 +8,58 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
-
     <link rel="stylesheet" href="style.css"> 
     <link rel="stylesheet" href="/css/tablet.css" media="(min-width:768px)">
     <link rel="stylesheet" href="/css/pc.css" media="(min-width:1280px)">
 </head>
 
-<body class="light-mode">
-
-    <header>
+<body>
         <nav class="nav">
             <section class="nav__menu">
-                <img onclick="menuHamburguesa();" class="hamburguer-menu" src="./icons/blueburguer.png" alt="icono menu hamburguesa">                 
-                <div class="menu--info-proyect" > 
-                    <ul> 
-                        <li><a href="https://trello.com/b/inCeeXJB/desarrollo-de-challenge-alura">Trello del proyecto</a></li>
-                        <li><a href="https://www.aluracursos.com/challenges/challenge-one-logica/sprint01-construye-un-encriptador-texto-con-javascript">Info Challenge</a></li>               
-                        <li><a href="https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica?type=design&node-id=0-1&mode=design&t=FcJnCewsMXJHnbQP-0">Figma</a></li>
-                     </ul>
-                 </div>       
-                 <div class="menu--info-project--desplegado" >
-                    <ul>
-                        <li><a href="https://trello.com/b/inCeeXJB/desarrollo-de-challenge-alura">Trello</a></li>
-                        <li><a href="https://www.aluracursos.com/challenges/challenge-one-logica/sprint01-construye-un-encriptador-texto-con-javascript">Info Challenge</a></li>               
-                        <li><a href="https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica?type=design&node-id=0-1&mode=design&t=FcJnCewsMXJHnbQP-0">Figma</a></li>
-                     </ul>
-                    
-                 </div>           
-                              
+                <img class="hamburguer" onclick="menuHamburguesa();" src="./icons/blueburguer.png" alt="imagen de menu hamburguesa">                 
+                    <ul class="links"> 
+                        <li class="links_item"><a class="social-link" href="https://trello.com/b/inCeeXJB/desarrollo-de-challenge-alura">Trello del proyecto</a></li>
+                        <li class="links_item"><a class="social-link" href="https://www.aluracursos.com/challenges/challenge-one-logica/sprint01-construye-un-encriptador-texto-con-javascript">Info Challenge</a></li>               
+                        <li class="links_item"><a class="social-link" href="https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica?type=design&node-id=0-1&mode=design&t=FcJnCewsMXJHnbQP-0">Figma</a></li>
+                     </ul>    
+                    <ul class="links-deployed">
+                        <li class="links_item"><a  class="social-link" href="https://trello.com/b/inCeeXJB/desarrollo-de-challenge-alura">Trello</a></li>
+                        <li class="links_item"><a class="social-link"  href="https://www.aluracursos.com/challenges/challenge-one-logica/sprint01-construye-un-encriptador-texto-con-javascript">Info Challenge</a></li>               
+                        <li class="links_item"><a class="social-link" href="https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica?type=design&node-id=0-1&mode=design&t=FcJnCewsMXJHnbQP-0">Figma</a></li>
+                     </ul> 
             </section>
-
             <section class="nav__icons" >    
-                <a id= "toogle-button" href="#"><img id="img-toogle-buttton" src="./icons/moon.png" alt=""></a>
+                <a id="toogle-btn" href="#"><img id="toogle-btn--img" class="switche" src="./icons/moon.png" alt=""></a>
             </section>
-        </nav> 
-       
-    </header>  
-    
-
-
-    <main>
-        <form class="form__box">
-            <section class="form__inbox">
-                <textarea  required  onclick="limpiarTextArea();"   oninput="validarEntrada();" id="entrada" placeholder="Ingrese el texto aqui:"></textarea>   
-                <p> ⚠️ Solo letras minuscula y sin acentos</p>
+        </nav>      
+  
+    <main class="main">
+        <form class="main__form">
+            <section class="input">
+                <textarea id="entrada" class="input__textarea" onclick="limpiarTextArea();"  onblur="clearDefaultText();"  oninput="validarEntrada();" >Ingrese el texto aquí: </textarea>   
+                <p class="input__alert" > ⚠️ Solo letras minuscula y sin acentos</p>
             </section>
               
-            <section class="form__buttons">   
-                <input onclick="encriptarEntrada();" class="btn encriptar" type="button" value="Encriptar">
-                <input onclick="desencriptarEntrada();"  class="btn desencriptar" type="button" value="Desencriptar">
+            <section class="buttons">   
+                <input class="buttons__btn encriptar" onclick="encriptarEntrada();" type="button" value="Encriptar">
+                <input class="buttons__btn desencriptar" onclick="desencriptarEntrada();" type="button" value="Desencriptar">
             </section>
-        </form> 
-        
+        </form>        
 
-        <section class="outbox-container" >
-            <section class="form__outbox">
-                <div class="form__outbox--img" > 
-                    <img src="./icons/Loupe.png" class="msg--img">
-                </div>
-    
-                <section class="form__outbox--msg">
+        <section class="main__output" >
+            <section class="container">
+                <div class="container__img" > 
+                    <img class="search-img" src="./icons/Loupe.png" >
+                </div>    
+                <section class="container__message">
                     <h4>Ningun mensaje fue encontrado</h4>
                     <h5>Ingrese en el cuadro el texto de que desea encriptar o desencriptar</h5>
-                </section>
-    
-                <section class="form__outbox--result"> 
-                    <h1>Su texto procesado: </h1>                    
-                    <textarea id="result" readonly ></textarea>  
-                    <div class="form__outbox--btncopiar">
-                        <input  onclick="copiarElemento();" type="button" class="btn copiar" value="Copiar">
+                </section>    
+                <section class="container__result"> 
+                                
+                    <textarea id="result" class="input__textarea" readonly ></textarea>  
+                    <div class="button">
+                        <input class="buttons__btn copiar" onclick="copiarElemento();" type="button"  value="Copiar">
                     </div> 
                 </section>                                  
             </section>
@@ -84,22 +67,24 @@ <h1>Su texto procesado: </h1>
 
     </main>
 
-    <section class="hero__img">
+    <section class="hero">
 
     </section>
 
-    <footer>
-        <section class="left">
-            <ul>      
-                <li><a href="https://www.linkedin.com/in/andrea-campo-585bb31a/">Linkedin</a></li>
-                <li><a href="https://github.com/andreacampog">Github</a></li>
-            </ul>
-        </section>
+    <footer class="footer" > 
+        <div class="footer__socials">
+            <img class="social-image" src="./icons/insta_log.webp" alt="">
+            <a class="social-link" href="https://www.instagram.com/andrea_campog?igsh=MWNvNzBjcWQ2dXNnYw%3D%3D&utm_source=qr">Instagram</a>
+        </div>
 
-        <section class="right">
-            <img src="./icons/insta_log.webp" alt="">
-            <a href="https://www.instagram.com/andrea_campog?igsh=MWNvNzBjcWQ2dXNnYw%3D%3D&utm_source=qr">Instagram</a>
-        </section>      
+        <div class="footer__socials">
+            <img class="social-image" src="./icons/linkedin_2.png" alt="">
+            <a class="social-link" href="https://www.linkedin.com/in/andrea-campo-585bb31a/">Linkedin</a>
+        </div>
+        <div class="footer__socials">
+            <img class="social-image" src="./icons/git.png" alt="">
+            <a class="social-link" href="https://github.com/andreacampog">Github</a>            
+        </div>      
     </footer>
 
     <script src="./app.js" ></script>
diff --git a/reset.css b/reset.css
deleted file mode 100644
index af94440..0000000
--- a/reset.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index a352b00..df52ea2 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,17 @@
+/*Valores por defecto del modo claro*/
+
 :root{
-    --background-color:white;
+    --background-color:linear-gradient(61deg, rgba(255,255,255,1) 0%, rgba(202,233,240,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 80%, rgba(202,233,240,1) 100%, rgba(255,255,255,1) 100%);
     --text-color:#0A3871;
-    --text-color-hover:red ; 
+    --text-color-hover:#FFA100; 
     --background-button: #052051;
     --text-color-button: white;
     --box-shadow: 10px 14px 12px -10px rgba(0,0,0,0.33);
+    --box-shadow-buttons: 15px 16px 12px -2px rgba(124,161,207,0.48);
     --box-shadow-header:  0px 20px 21px -17px rgba(0,0,0,1);
 }    
+
+
   
 *{  
     margin: 0;
@@ -22,20 +27,20 @@ html{
 
 body{
     color: var(--text-color);
-    background-color: var(--background-color);     
+    background:var(--background-color);
+    max-height: 1vh;
+    max-width: 1680px;    
+    margin: 0 auto;   
 }
 
-header{
+nav{   
     width: 100%;
-    min-width: 320px;
-   
-}
-nav{
+    min-width: 375px;
     display: flex;  
     justify-content: space-around;
     align-items: center;   
     height: 80px;
-    box-shadow: var(--box-shadow-header);
+    border-bottom: solid;
 }
 
 .nav__menu{ 
@@ -45,72 +50,42 @@ nav{
     justify-content: flex-start;    
 }
 
-.hamburguer-menu{
+.hamburguer{
     width: 30px;
     height: 30px;
     margin: 2em; 
     cursor: pointer;    
-    transition: 0.5s;
 }
 
-
-.hamburguer-menu:hover{
+.hamburguer:hover{
     transform: scale(1.2);
 }
 
-.menu--info-proyect{    
+.links{        
+    display: none; 
+    z-index: 1000;         
     position: absolute;
-    z-index: 1000;
-    display: none;
-    width: 200px;      
     top: 80px;
+    width: 200px;  
+    padding-left: 1.5em;   
+    color: var(--text-color);   
     background:var(--background-color);     
     border-radius: 0 0 20px 0;
-    box-shadow: var(--box-shadow)
-}  
-
-.menu--info-project--desplegado ul{
-    visibility: hidden;
-    display: flex;    
-    justify-content: space-between;  
-}
-
-.menu--info-project--desplegado ul li{
-    margin: 0.5em;      
-}
-
-.menu--info-project--desplegado ul li a , .menu--info-proyect ul li a{ 
-    font-size: 1.6rem;   
-    color: var(--text-color);
-    text-decoration: none;   
-}
+    box-shadow: var(--box-shadow-buttons);
+    list-style: none;
 
-.menu--info-project--desplegado ul li a:hover{    
-    color:var(--text-color-hover);
-    border-radius: 5px;     
 }
 
-.menu--info-proyect ul li a:hover{    
-    color:var(--text-color-hover);
-}
-
-.menu--info-proyect ul{
-    display: flex;
-    flex-direction: column;    
-    padding-left: 1.5em;
-    color: var(--text-color);
-  
+.menu-abierto{
+    display:block;
 }
 
-.menu--info-proyect ul li{
-    margin: 0.5em;
-    padding: 1em;
-}
 
-.menu-abierto{
-    display:block;
+.links-deployed{
+    visibility: hidden; 
 }
    
+
 .nav__menu p{
     visibility: hidden; /*Decido esto para que respete el espacio despues del menu hamburguesa*/
     font-size: 1.6rem;
@@ -130,74 +105,75 @@ nav{
     
 }
 
-.nav__icons img{
-    width: 70%;
+.switche{
+    width: 60%;
     margin: 0.5em auto;         
     transition: 0.5s;  
     border-radius: 50px;
 
 }
 
-.nav__icons img:hover{
-    transform: scale(1.1);
+.main{
+    width: 90%;
+    min-width: 375px;
+    margin: 0 auto;
 
 }
 
-main{
-    width: 100%;
-    min-width: 320px;      
-}
-
-.form__box{
-    width: 100%;
-    min-width: 320px;
+.main__form{
+    width: 90%;  
     margin: 0 auto;
     text-align: center;  
-
 }
 
-.form__inbox{    
-    width: 100%;       
-    min-width: 320px;        
-    margin: 0 auto;  
-    margin-top: 2em;
-    padding: 0.5em; 
-    border-radius: 20px;
+.input{    
+    width: 100%;   
 
 }
 
-.form__inbox textarea{
-    width: 80%;  
+.input__textarea{
+    width: 100%;  
     min-height: 300px;    
-    margin: 0 auto; 
+    margin-top: 40px;
     padding: 1em;    
     font-size: 1.6rem;  
     color: var(--text-color);
     text-align: center;      
     background: var(--background-color);  
-    border: none;
+    border: solid;
+    border-radius: 1em;
     resize: none;     
 }
 
-.form__buttons{
-    width: 70%; 
-    margin: 0 auto;
-    padding: 1em;
-}
-
-.form__inbox p{    
-    max-width: 70%;
-    padding-left: 3em;
-    padding-top: 1em;
+.input__alert{    
+    max-width: 100%;
+    padding: 0.5em;
     font-size: 1.2rem;
     text-align: left;  
     font-style: italic;
-    color: red;
+    color:var(--text-color);
 }
 
-.btn{
+.buttons{
+    width: 100%; 
+    margin: 0 auto;
+}
+
+.button{
     width: 100%;
-    margin: 1em auto;
+    margin: 0 auto;
+    padding-top: 4.8em;
+}
+
+
+.copiar{
+    display: block;
+    width: 50%;  
+ }
+
+.buttons__btn{
+    width: 70%;
+    margin: 0.5em auto;
     min-height: 50px;
     padding: 1em;  
     font-size: 2.2rem;   
@@ -205,70 +181,63 @@ main{
     border-radius: 20px;
     cursor: pointer;
     border: var(--dark-blue-300) solid #000;
-    transition: 1s background;
-    box-shadow: var(--box-shadow)
-}
-
-.btn:hover{    
-    transform: scale(1.1);
-}
-
-.encriptar{
+    transition: 1s background;;
     background: var(--background-button);
+    box-shadow: var(--box-shadow-buttons);
     color: var(--text-color-button);
-
 }
-.desencriptar{
-    background: var(--background-button);
-    color: var(--text-color-button);   
+
+.buttons__btn:hover{    
+    transform: scale(1.1);
 }
 
-.outbox-container{
+.main__output{
     width: 90%;
-    min-width: 320px;
-    margin: 0 auto; 
+    margin: 0 auto;     
     border-radius: 20px;
+
 }
 
-.form__outbox{    
+.container{    
     width: 100%;  
     margin: 0 auto;
     margin-top: 1em;
-    padding-bottom: 2em;
     background: var(--white);
     border-radius: 20px;
+
    /* height: 50hv;*/
 }
 
-.form__outbox--img{
+.container__img{
     display: none;
     width: 70%;    
     margin: 0 auto;       
+    
 }
 
-.form__outbox--img img{
-    width: 100%;
+.search-img{
+    width: 80%;    
     margin:0 auto;
 }
 
-.form__outbox--msg{
+.container__message{
     width: 100%;
     min-width: 250px;
     max-width: 600px;
-    min-height: 100px;
+    min-height: 200px;
     margin: 0 auto;
     color: var(--text-color);
     text-align: center;
     line-height: 2rem;
 }
 
-.form__outbox--msg h4{
+.container__message h4{
     padding: 2em;
     font-size: 1.8rem;
     font-weight: 600;
 }
 
-.form__outbox--msg h5{
+.container__message h5{
     padding: 1em;
     font-size: 1.2rem;
 }
@@ -277,56 +246,25 @@ main{
     display:none;
 }
 
-.form__outbox--result{
+.container__result{
     display: none; 
     width: 100%; 
-    margin: 0 auto; 
+    min-height: 500px;
     text-align: center;
-    border-radius: 20px; 
-   
+    border-radius: 20px;    
 }
 
-.form__outbox--result h1{
+.tittle{
     margin: 0 auto;
-    margin-top: 1em;
-    margin-bottom: 1em;
     font-size: 2rem;
     font-weight: 600;
     color: var(--text-color);
 }
 
-.form__outbox--result textarea{
-    width: 90%;
-    min-height: 200px;
-    margin: 0 auto;    
-    margin-bottom: 2em;
-    padding-bottom: 1em;
-    font-size: 1.6rem;
-    text-align: center;
-    color: var(--text-color);
-    background-color: var(--background-color);     
-    border: none;    
-    resize: none;  
-}
-
-.form__outbox--btncopiar{
-    display: block;
-    width: 70%;   
-    height: 80px;
-    margin: 0 auto;    
-}
-
-.copiar{
-    margin: 0 auto;  
-    background: var(--background-button);
-    color: var(--text-color-button);
-}
 
-
-
-.hero__img{
-    width: 90%;    
-    min-width: 300px; 
+.hero{
+    width: 100%;    
+    min-width: 375px; 
     max-width: 450px;
     min-height: 200px; 
     margin: 10px auto;     
@@ -339,75 +277,46 @@ main{
 
 }
 
-footer{
+.footer{
     display: flex;  
+    justify-content: center;
+    align-content: center;
     width: 100%;
-    min-width: 320px;   
-}
-
-footer section{
-    display:flex;
-    width: 50%;
-    margin: 0 auto; 
-    list-style: none;    
-    padding: 2em;
-}
-
-footer .left ul{    
-    font-size: 1.6rem; 
-    list-style: none;      
-    padding: 1em;
-}
-
-footer .left ul:first-child{
-    color: purple;
-}
-
-.left li{
-    padding: 0.5em;
+    min-width: 375px;   
+    padding: 20px;
+    border-top: solid;
 }
 
-.left a{
-    text-decoration: none;  
-    color: var(--text-color);
-    font-size: 1.6rem;
-}
-
-.left a:hover{
-    text-decoration: none;
-    color:var(--text-color-hover);
-}
-
-.right{
-    flex-direction: column;
-    align-items:flex-end;
-    justify-content: flex-start;
-      
+.footer__socials{
+    width: 30%;
+    margin: 0 auto;
+    text-align: center;
 }
 
-.right img{
-    display: block;
+.social-image{
     width: 50px;
     height: 50px;   
-    margin: 0.5em;
+    margin: 0.5em; 
 }
 
-.right a{     
+.social-link{     
     display: block;
+    padding: 0.5em;
     font-size: 1.6rem;
     color: var(--text-color);
     text-decoration: none;    
-
 }
-.right a:hover{
-    color:var(--text-color-hover);
+
+.social-link:hover{
+    color: var(--text-color-hover);
 }
 
+
 .dark-mode{
-    --background-color:black;
+    --background-color:linear-gradient(317deg, rgba(46,122,138,1) 0%, rgba(35,92,104,1) 4%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(35,92,104,1) 96%, rgba(46,122,138,1) 100%);    
     --text-color:white; 
-    --background-button:white;
-    --text-color-button:#0A3871;    
+    --text-color-button:white;    
     --box-shadow: 12px 7px 5px 0px rgba(88,102,130,0.49);
     --box-shadow-header:0px 20px 21px -17px rgba(255,255,255,0.5);       
 }
+