Leuva/basic-encryption-decryption

1*{2margin:0;3padding:0;4box-sizing:border-box;5font-family:'Segoe UI',sans-serif;6}7 8body{9min-height:100vh;10display:flex;11justify-content:center;12align-items:center;13padding:20px;14background:#0F172A;15 16background-image:17linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),18linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);19 20background-size:30px 30px;21}22 23.container{24width:100%;25max-width:750px;26background:#111827;27padding:30px;28border-radius:20px;29border:1px solid #3B82F6;30box-shadow:0 0 25px rgba(59,130,246,0.20);31}32 33h1{34text-align:center;35color:#3B82F6;36margin-bottom:10px;37font-size:32px;38font-weight:700;39letter-spacing:1px;40}41 42.subtitle{43text-align:center;44color:#94A3B8;45margin-bottom:25px;46font-size:15px;47}48 49textarea{50width:100%;51height:150px;52padding:15px;53background:#1E293B;54border:1px solid #3B82F6;55border-radius:12px;56color:white;57font-size:16px;58resize:none;59outline:none;60transition:.3s;61}62 63input{64width:100%;65padding:14px;66margin-top:15px;67background:#1E293B;68border:1px solid #3B82F6;69border-radius:12px;70color:white;71font-size:16px;72outline:none;73transition:.3s;74}75 76textarea:focus,77input:focus{78border-color:#60A5FA;79box-shadow:0 0 10px rgba(59,130,246,.25);80}81 82.buttons{83display:flex;84gap:10px;85margin-top:20px;86}87 88button{89flex:1;90padding:14px;91border:none;92border-radius:12px;93font-size:16px;94font-weight:600;95cursor:pointer;96transition:.3s;97}98 99button:hover{100transform:translateY(-3px);101}102 103/* Encrypt Button - Blue */104.encrypt-btn{105background:#2563EB;106color:white;107}108 109.encrypt-btn:hover{110background:#1D4ED8;111}112 113/* Decrypt Button - Neon Green */114.decrypt-btn{115background:#00FF99;116color:black;117font-weight:700;118box-shadow:0 0 15px rgba(0,255,153,0.4);119}120 121.decrypt-btn:hover{122background:#00E68A;123box-shadow:0 0 25px rgba(0,255,153,0.6);124}125 126/* Clear Button - Red */127.clear-btn{128background:#DC2626;129color:white;130}131 132.clear-btn:hover{133background:#B91C1C;134}135 136.output-box{137margin-top:20px;138background:#1E293B;139padding:15px;140border-radius:12px;141border-left:5px solid #3B82F6;142}143 144.output-box h3{145color:#60A5FA;146margin-bottom:10px;147font-size:18px;148font-weight:600;149}150 151.output-box p{152color:#F8FAFC;153word-wrap:break-word;154line-height:1.6;155}156 157@media(max-width:600px){158 159.container{160padding:20px;161}162 163.buttons{164flex-direction:column;165}166 167h1{168font-size:24px;169}170 171textarea{172height:120px;173}174 175}