:root{--dark-900: #050816;--dark-800: #0B0F2A;--dark-700: #121736;--dark-600: #1B1F45;--violet-500: #7B5CFF;--violet-400: #9B6DFF;--violet-300: #C084FC;--indigo-500: #5C6CFF;--indigo-400: #7FA0FF;--grey-200: #B8BEDA;--grey-100: #F5F7FF;--green-300: #15b515;--primary-font: "Roboto", sans-serif}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet-500),var(--indigo-500));border-radius:20px}.app{height:100vh;display:flex}aside{background-color:var(--dark-900);width:300px;padding:15px;gap:.8rem;overflow-y:auto}aside h1{font-size:20px;margin:1rem 0rem;font-weight:800;color:var(--grey-100);text-transform:capitalize}aside .header-aside{display:flex;align-items:center;justify-content:space-between}.header-aside svg{width:20px;display:block;fill:var(--grey-100)}.header-aside button{border-radius:50%;background-color:var(--dark-700);padding:5px;display:flex;align-items:center;border:none}.header-aside button:hover{background-color:var(--violet-300);cursor:pointer}.header-aside a{border-radius:50%;background-color:var(--dark-700);padding:5px;display:flex;align-items:center;transition:all .2s}.header-aside a:hover{background-color:var(--violet-300)}.user-profile{display:flex;align-items:center;gap:.5rem}.user-profile img{width:35px;height:35px;border-radius:50%}aside input{display:block;width:100%;background-color:var(--dark-600);padding:7px;border-radius:10px;border:1px solid var(--dark-600);margin-bottom:1.5rem;color:var(--grey-100)}aside input:focus{outline:1.5px solid var(--violet-500)}aside hr{margin-bottom:.3rem;background-color:var(--grey-200);height:2px}.contact-not-found{font-size:15px;text-align:center;color:var(--grey-200);margin-top:3rem}aside ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}aside ul li{display:flex;align-items:center;border-radius:10px;padding:10px 5px;text-transform:capitalize;font-weight:500;color:var(--grey-100);transition:all .2s}aside ul li small{font-weight:300;margin-top:3px}aside ul li img{border-radius:50%;width:50px;height:50px;margin-right:10px}aside ul li:hover{cursor:pointer;background:linear-gradient(135deg,var(--violet-500),var(--indigo-400))}li small{display:block}.chat{display:flex;flex-direction:column;flex:1;background-color:var(--dark-800)}.chat header{display:flex;align-items:center;gap:1.3rem;background-color:var(--dark-900);color:var(--grey-100);padding:10px 10px 10px 20px}.chat header img{width:50px;height:50px;border-radius:50%}.chat header h2{font-size:25px}.chat header p{font-weight:300;color:var(--grey-200)}.chat header p.online-chat{color:var(--green-300)}.empty-chat-cont{display:flex;align-items:center;justify-content:center;flex:1;background-color:var(--dark-800)}.empty-chat{color:var(--grey-200);text-align:center}.chat-body{display:flex;flex-direction:column;flex:1;font-size:17px;gap:1rem;padding:10px;overflow:auto}.message{width:50%;padding:10px;border-radius:10px;box-shadow:4px 1px 36px -5px #00000040;overflow-wrap:break-word}.message.me{background:linear-gradient(135deg,var(--violet-500),var(--indigo-400));color:var(--grey-100);align-self:end}.message.received{background-color:var(--dark-600);color:var(--grey-100)}.timestamp{font-size:12px;margin-top:5px;text-align:end}.chat-input{padding:10px;display:flex;gap:.3rem;background-color:var(--dark-600)}.chat-input input{flex:1;padding:7px;border-radius:10px;background-color:var(--dark-800);color:var(--grey-100);border:1px solid var(--dark-800)}.chat-input input:focus{outline:2px solid var(--violet-300)}.chat-input button{width:35px;padding:7px;border-radius:50%;background-color:var(--violet-500);border:1px solid var(--violet-500);transition:all .1s ease-in}.chat-input button svg{width:100%}.chat-input button:hover{transform:scale(1.1);cursor:pointer}.footer-chat-mobile{display:none}@media(max-width:600px){aside{display:none}.show{display:flex;width:100%;flex-direction:column;position:absolute}.chat{width:100%}.footer-chat-mobile{display:flex;align-items:center;justify-content:space-around;background-color:var(--dark-600)}.footer-chat-mobile button{width:30px;border:none;background-color:var(--dark-800);border-radius:10px;padding:5px}.footer-chat-mobile svg{width:100%}.footer-chat-mobile a{width:30px;background-color:var(--dark-800);padding:5px;border-radius:10px}}.not-found{background:linear-gradient(100deg,var(--dark-600),var(--dark-800));height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.not-found h1{color:var(--grey-100);font-weight:800;font-size:40px;margin-bottom:10px}.not-found h4{color:var(--grey-200);font-weight:600;font-size:30px;margin-bottom:30px}.next-option{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4rem}.next-option a{padding:20px;border-radius:16px;display:flex;align-items:center;justify-content:center;background-color:var(--dark-900);font-weight:500;color:var(--grey-200);font-size:17px;gap:.7rem;text-decoration:none;transition:all .2s ease}.next-option a:hover{cursor:pointer;transform:translateY(-2px);box-shadow:0 -1px 65px -26px #c084fce6}.next-option svg{width:30px}@media(max-width:600px){.not-found h4{margin-bottom:3.5rem}.next-option{display:flex;flex-direction:column;gap:2rem}}.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(45deg,var(--violet-500),var(--dark-900));padding:30px}.login-container{width:360px;background-color:var(--dark-800);padding:20px;border-radius:16px;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 30px #0006}.login h3{color:var(--grey-100);font-size:35px;margin-bottom:1rem}.login p{color:var(--grey-200);font-size:17px;margin-bottom:2.5rem}.login form{width:100%;display:flex;flex-direction:column;gap:1rem}.login label{color:var(--grey-200);font-weight:600;font-size:15px}.login input{padding:10px;border-radius:10px;border:2px solid var(--dark-800);background-color:var(--dark-600);color:var(--grey-200);font-size:15px;outline:none}.login input:focus{outline:1.5px solid var(--violet-300)}.login button{margin-top:15px;padding:10px;border-radius:10px;border:none;background:linear-gradient(var(--indigo-400),var(--indigo-500));font-size:15px;font-weight:600;cursor:pointer;color:var(--grey-100);transition:all .2s}.login button:hover{transform:translateY(-1px);box-shadow:0 6px 20px #9a3ae466}.login .error-font{text-align:center;color:var(--red-100);margin:20px 0}.login form a{margin-top:15px;text-decoration:none;color:var(--grey-100);font-size:15px;font-weight:600;display:flex;align-items:center;gap:.5rem;background-color:var(--dark-600);padding:5px;border-radius:10px;width:200px}.login form svg{width:25px}@media(max-width:600px){.login{padding:15px}.login-container{width:350px}}.add-contact{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--dark-600),var(--violet-500));padding:30px}.add-contact-cont{width:430px;background-color:var(--dark-900);padding:40px;border-radius:16px;display:flex;flex-direction:column;align-items:center}.add-contact form{width:100%;display:flex;flex-direction:column;gap:1rem;margin-top:2rem;box-shadow:0 10px 30px #0006}.add-contact h1{color:var(--grey-100);font-size:35px;margin-bottom:1.5rem}.add-contact h4{color:var(--grey-200);font-weight:400;margin-top:10px}.add-contact label{color:var(--grey-200);font-weight:600;font-size:15px;margin-top:1rem}.add-contact input{padding:10px;border-radius:10px;border:2px solid var(--dark-800);background-color:var(--dark-600);color:var(--grey-200);font-size:15px;outline:none}.add-contact input:focus{outline:1.5px solid var(--violet-400)}.add-contact button{margin-top:15px;padding:10px;border-radius:10px;border:none;background:linear-gradient(var(--indigo-400),var(--indigo-500));font-size:15px;font-weight:600;cursor:pointer;color:var(--grey-100);transition:all .2s ease}.add-contact button:hover{transform:translateY(-1px);box-shadow:0 6px 20px #9a3ae466}@media(max-width:800px){.add-contact-cont{width:350px}.add-contact h1{font-size:28px;margin-bottom:1rem}}:root{--red-100: #cc0000}.register{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--dark-600),var(--violet-500));padding:30px}.register-container{width:450px;background-color:var(--dark-800);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px;color:var(--grey-200);padding:40px;box-shadow:0 10px 30px #0006}.register-container h2{font-size:40px;font-weight:700;color:var(--grey-100);margin-bottom:1.5rem}.register-container p{font-size:17px;margin-bottom:3rem}.register-container form{display:flex;flex-direction:column;width:100%;gap:.7rem}.register-container label{font-weight:600;font-size:15px}.register-container input{background-color:var(--dark-900);border:2px solid var(--dark-700);outline:none;border-radius:10px;font-size:15px;padding:12px;color:var(--grey-200)}.register-container input:focus{outline:1.5px solid var(--violet-300)}.register-container .error-font{color:var(--red-100);font-size:15px}.register-container button{padding:10px;background:linear-gradient(90deg,var(--indigo-400),var(--indigo-500));border-radius:10px;border:1px solid var(--indigo-400);font-weight:600;font-size:15px;color:var(--grey-100);margin-top:2rem;transition:all .2s}.register-container button:hover{cursor:pointer;transform:translateY(-1px);box-shadow:0 6px 20px #9a3ae466}@media(max-width:600px){.register{padding:15px}.register-container{width:350px}.register-container h2{font-size:35px}.register-container p{font-size:18px;margin-bottom:2rem}}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--primary-font)}:root{--violet-300-rgb: 192, 132, 252;--indigo-500-rgb: 92, 108, 255;--dark-600-rgb: 27, 31, 69}.about{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,var(--dark-600),var(--dark-900));color:var(--grey-100);padding:0rem 5rem;align-items:center;overflow:hidden}.main-container{display:flex;flex-direction:column;gap:2.5rem;align-items:center;justify-content:center;height:100vh;padding:0rem 7rem;margin-bottom:7rem}.main-container p{font-size:20px;line-height:1.6;text-align:center;color:var(--grey-200);word-wrap:break-word}.main-container .logo-app{display:flex;align-items:center;gap:1rem}.main-container .logo-app img{width:60px}.main-container .logo-app h2{font-weight:700;font-size:85px}.about-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;padding:4rem 6rem}.tecnic-desc{background:linear-gradient(135deg,rgba(var(--violet-300-rgb),.25),rgba(var(--indigo-500-rgb),.2));padding:1.5rem;border-radius:15px;transition:all .2s ease-in}.tecnic-desc:hover{transform:translateY(-10px);box-shadow:0 8px 14px #c084fc4d}.tecnic-desc h4{margin-bottom:1.7rem;font-size:30px;font-weight:700}.tecnic-desc p{font-size:17px;line-height:33px;text-align:justify;color:var(--grey-200);word-wrap:break-word}.tecnic-desc .tecnic-header{display:flex;gap:.7rem}.tecnic-desc .tecnic-header svg{width:35px;height:35px;border-radius:50%;padding:7px;background-color:var(--dark-600)}.tecnic-desc ul{list-style:none}.tecnic-desc ul li{font-size:17px;display:flex;align-items:center;gap:1rem;margin:0rem 0rem 1.7rem 2rem;color:var(--grey-200);line-height:20px}.tecnic-desc ul li svg{width:20px;height:20px}.tecnic-desc.right-containers{transform:translateY(-100px);transition:all .2s ease-in}.tecnic-desc.right-containers:hover{transform:translateY(-110px);box-shadow:0 8px 14px #c084fc4d}.about-footer{width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;gap:5rem;background-color:var(--dark-900);padding:0rem 3.5rem;overflow:hidden}.about-footer a{text-decoration:none;color:var(--grey-100);font-weight:550;padding:10px;border-radius:10px;transition:all .2s}.about-footer a:hover{background-color:var(--dark-700)}@media(max-width:800px){.about{padding:0rem 2rem}.main-container{padding:0rem;margin-bottom:1rem}.main-container p{font-size:17px;line-height:1.7}.main-container .logo-app{flex-direction:column}.main-container .logo-app h2{font-size:60px}.about-info-grid{display:flex;flex-direction:column;align-items:center;justify-content:center}.tecnic-desc.right-containers{transform:translateY(0)}.about-footer{justify-content:center;gap:1rem;border-top:2px solid var(--dark-600);padding:0rem}.tecnic-desc.right-containers:hover,.tecnic-desc:hover{transform:translateY(0)}}