.App{max-width:1000px;margin:0 auto;padding:20px;font-family:lucida handwriting;font-size:30px;font-weight:700;text-align:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1}.App-nav{text-align:center;font-family:Arial,sans-serif;color:#000;max-width:1000px;justify-content:center;margin-left:auto;margin-right:auto;z-index:1;margin-top:10px;background-color:cream;border-radius:10px}.App-nav nav{display:flex;border:5px solid #ccc;padding:10px;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 5px #0000004d;text-align:center}.App-nav nav ul{list-style:none;padding:0;margin:0 0 10px;justify-content:center;font-size:35px;text-align:center;background-color:#ccc;border-radius:5px}.App-nav nav ul li{display:inline-block;margin:0 10px}.App-nav nav ul li a{display:inline-block;text-decoration:underline;color:#007bff;font-size:25px;padding:10px 10px 5px;border:2px solid transparent;transition:background-color .3s ease,border-color .3s ease;text-align:center;margin:5px auto;border-radius:5px}.App-nav nav ul li a:hover{color:#007bff;box-shadow:0 2px 5px #06089e4d;text-align:center;margin:5px auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.App-nav nav ul li p{font-size:20px;color:#000;max-width:800px;text-align:left;margin:10px auto;padding:10px;border:2px solid #ccc;border-radius:5px;background-color:#fff;box-shadow:0 2px 5px #0000004d;text-align:center}.App-nav .monoalphabetic-container,.App-nav .polyalphabetic-container,.App-nav .playfair-container,.App-nav .hillcipher-container,.App-nav .caesarcipher-container{background-color:#fff;border-radius:8px;border:2px solid #ccc;box-shadow:0 4px 8px #0000001a;max-width:600px;margin:0 auto;padding:20px;text-align:center}.App input{width:100%;padding:10px;margin-bottom:15px;font-size:16px;border:2px solid #ccc;border-radius:5px}.navbar{background-color:#333;padding:10px 20px;position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px #0003}.navbar .App{margin-right:auto}.navbar .App h1{font-family:Lucida Handwriting,cursive;font-size:28px;margin:0;justify-content:flex-start;align-items:left;color:#fff}.navbar nav{flex-grow:1}.navbar nav ul{list-style:none;display:flex;justify-content:flex-end;align-items:center;margin:0;padding:0}.navbar nav ul li{margin:0 15px}.navbar nav ul li a{text-decoration:none;color:#fff;font-size:18px;font-family:Arial,sans-serif;padding:10px 15px;border-radius:5px;transition:background-color .3s ease,color .3s ease}.navbar nav ul li a:hover{background-color:#007bff;color:#fff}@media (max-width: 768px){.App h1{font-size:32px;margin-bottom:20px}.App-nav nav ul{font-size:28px}.App-nav nav ul li a{font-size:20px;padding:8px}.App-nav nav ul li p{font-size:18px;margin-top:8px}.App-nav .monoalphabetic-container,.App-nav .polyalphabetic-container,.App-nav .playfair-container,.App-nav .hillcipher-container,.App-nav .caesarcipher-container{max-width:500px}}@media (max-width: 480px){.App{max-width:100%;padding:10px}.App h1{font-size:24px;margin-bottom:15px}.App-nav nav ul{font-size:20px}.App-nav nav ul li{display:block;margin:5px 0}.App-nav nav ul li a{font-size:18px;padding:5px}.App-nav nav ul li p{font-size:16px;margin-top:5px}.App-nav .monoalphabetic-container,.App-nav .polyalphabetic-container,.App-nav .playfair-container,.App-nav .hillcipher-container,.App-nav .caesarcipher-container{max-width:100%;padding:15px}.App input{font-size:14px}}.playfaircipher-container{max-width:600px;margin:0 auto;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#f9f9f9;display:block}.playfair-button{flex:1;padding:10px;margin:5px;border:2px solid black;border-radius:4px;background-color:transparent;color:#000;font-size:25px;cursor:pointer;transition:background-color .3s}.hill-cipher-container{max-width:600px;margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#f9f9f9}h2{text-align:center;color:#333;font-size:xx-large}.input-field{width:100%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:px;font-size:16px}input.input-field{width:100%;padding:5px;margin:10px 0;border:1px solid #ccc;border-radius:4px;font-size:16px}.cipher-button{flex:1;padding:10px;margin:5px;border:none;border-radius:4px;background-color:#007bff;color:#fff;font-size:16px;cursor:pointer;transition:background-color .3s}.result div{margin:5px 0;font-size:16px;color:#555}.caesar-cipher-container{max-width:600px;margin:0 auto;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#f9f9f9;display:block}.cipher-button{flex:1;padding:10px;margin:5px;border:2px solid black;border-radius:4px;background-color:transparent;color:#000;font-size:25px;cursor:pointer;transition:background-color .3s}.monoalphabetic-cipher-container{max-width:600px;margin:0 auto;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#f9f9f9;display:block}.monoalphabetic-button{flex:1;padding:10px;margin:5px;border:2px solid black;border-radius:4px;background-color:transparent;color:#000;font-size:25px;cursor:pointer;transition:background-color .3s}.polyalphabetic-cipher-container{max-width:600px;margin:0 auto;padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;background-color:#f9f9f9;display:block}.h2{text-align:center;color:#333;font-size:xx-large}.input-field{width:100%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:px;font-size:16px;height:40px;background-color:#ccc}input.input-field{width:100%;padding:5px;margin:10px 0;border:1px solid #ccc;border-radius:4px;font-size:16px;color:#000}.button-group{display:flex;justify-content:space-between}.polyalphabetic-button{flex:1;padding:10px;margin:5px;border:2px solid black;border-radius:4px;background-color:transparent;color:#000;font-size:25px;cursor:pointer;transition:background-color .3s}.cipher-button:hover{background-color:#0056b3}.result{margin-top:20px;padding:10px;border-top:1px solid #ccc}.result div{margin:5px 0;font-size:16px;color:#000}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background:linear-gradient(#0f0c29,#312d64,#494477,#312d64,#0f0c29);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}