*,:after,:before{box-sizing:border-box}html{background-color:#222}body{margin:0;padding:0;font-family:sans-serif}h1,h2,h3,h4,h5,h6{margin:0}.navbar{display:flex;justify-content:center;gap:2rem;padding:2rem}@media(max-width:480px){.navbar{padding:2rem 1.125rem;gap:.75rem}}@media(max-width:320px){.navbar{padding:2rem .25rem;gap:.125rem}}.navbar .custom_link{margin:0;background:transparent;padding:0;border:none;letter-spacing:3px;text-decoration:none;font-size:1.5em;font-family:Arial;position:relative;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.7490196078)}@media(max-width:768px){.navbar .custom_link{font-size:1.25rem}}@media(max-width:480px){.navbar .custom_link{font-size:1rem}}.navbar .custom_link:hover .hover-text,.navbar .custom_link.active .hover-text{width:100%;filter:drop-shadow(0 0 10px #ffa822)}.navbar .custom_link .hover-text{position:absolute;box-sizing:border-box;content:attr(data-text);color:#ffa822;width:0%;top:0;right:0;bottom:0;left:0;border-right:6px solid #ffa822;overflow:hidden;transition:.5s;-webkit-text-stroke:1px #ffa822}.animated_input{position:relative;margin:20px 0 40px}.animated_input textArea{width:40vw}.animated_input input,.animated_input textArea{background-color:transparent;border:0;border-bottom:2px #fff solid;display:block;padding:15px 0;font-size:1.5rem;color:#fff}.animated_input input:valid,.animated_input input:focus,.animated_input textArea:valid,.animated_input textArea:focus{outline:0;border-bottom-color:#ffa822}.animated_input input:valid+label span,.animated_input input:focus+label span,.animated_input textArea:valid+label span,.animated_input textArea:focus+label span{color:#ffa822;filter:drop-shadow(0 0 5px #ffa822);transform:translateY(-50px)}.animated_input label{position:absolute;top:15px;left:0;pointer-events:none}.animated_input label span{display:inline-block;min-width:5px;color:#fff;transition:.3s cubic-bezier(.68,-.55,.265,1.55)}.animated_input label span:nth-child(1){text-transform:capitalize}.custom_animated-btn{cursor:pointer;text-transform:capitalize;margin:auto;font-family:inherit;font-size:20px;background:#ffa822;color:#000;padding:.7em 1em .7em .9em;display:flex;align-items:center;border:none;border-radius:16px;overflow:hidden;transition:all .2s}.custom_animated-btn span{display:block;margin-left:.3em;transition:all .3s ease-in-out}.custom_animated-btn svg{display:block;transform-origin:center center;transition:transform .3s ease-in-out}.custom_animated-btn:hover .svg-wrapper{animation:fly-1 .6s ease-in-out infinite alternate}.custom_animated-btn:hover .svg-wrapper svg{animation:rollover 1.5s ease-in-out infinite alternate}.custom_animated-btn:hover span{transform:translate(5.125em)}.custom_animated-btn:active{transform:scale(.95)}@keyframes fly-1{0%{transform:translateY(.1em)}to{transform:translateY(-.1em)}}@keyframes rollover{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cards-container{position:relative;top:-60px;display:flex;gap:5rem;justify-content:center;padding:1rem}@media(max-width:480px){.cards-container{top:-40px}}@media(max-width:1024px){.cards-container{gap:3rem;flex-wrap:wrap;row-gap:2rem}}.cards-container .feature_card{display:flex;flex-direction:column;box-shadow:0 8px 32px #1f26875e;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1803921569);padding:3rem 2rem 2rem;width:380px;height:254px;background:#134e6f;position:relative;place-content:center;place-items:center;overflow:hidden;border-radius:20px}@media(max-width:480px){.cards-container .feature_card{width:275px}}.cards-container .feature_card:before{content:"";position:absolute;width:100px;background-image:linear-gradient(180deg,#ffa822,#ffa822);height:200%;animation:rotBGimg 3s linear infinite;transition:all .2s linear}.cards-container .feature_card:after{content:"";position:absolute;background:#07182e;top:5px;right:5px;bottom:5px;left:5px;border-radius:15px}.cards-container .feature_card h2{color:#ffa822;filter:drop-shadow(2px 2px 5px #ffa822);z-index:1}.cards-container .feature_card .card_link{color:#ffa822;text-decoration:none;text-transform:capitalize;margin-top:auto;border:none;display:block;position:relative;padding:.7em 2.4em;font-size:18px;background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;z-index:1;font-family:inherit;font-weight:500;border-radius:10px}.cards-container .feature_card .card_link:active span:before{background:#ffa822}.cards-container .feature_card .card_link:hover{color:#fff}.cards-container .feature_card .card_link:hover span:before{transform:translate(-50%,-50%) rotate(-90deg);width:100%;background:#ffa822}.cards-container .feature_card .card_link span{position:absolute;left:0;top:0;width:100%;height:100%;background:transparent;z-index:-1;border:4px solid #ffa822}.cards-container .feature_card .card_link span:before{content:"";display:block;position:absolute;width:8%;height:500%;background:#07182e;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-60deg);transition:all .3s}@keyframes rotBGimg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.App{text-align:center;background-color:#222;color:#fff}.App .App-header{display:flex;align-items:center;justify-content:center;color:#000;padding:20px;border-radius:30px 200px;margin:auto;background:#fceabb;background:-webkit-linear-gradient(to right,#ffa822,#fceabb);background:linear-gradient(to right,#ffa822,#fceabb)}.App .main_container{display:flex;flex-direction:column;align-items:center;padding:1rem}@media(max-width:768px){.App .main_container>svg{width:73vw;height:66vw;min-width:420px;min-height:380px}}@media(max-width:480px){.App .main_container>svg{width:65vw;height:58vw;min-width:unset;min-height:unset}}.App .feature_container{display:flex;flex:1;gap:1rem;flex-direction:column}.App .caesar-cipher{display:flex;flex-wrap:wrap;column-gap:40px;row-gap:40px;padding:1rem 1.5rem}.App .password_length-container,.App .cipher_encryption-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:1rem;gap:.75rem}.App .password_length-container .cipher-input,.App .cipher_encryption-container .cipher-input{display:flex;flex-direction:column}.App .password_length-container label,.App .cipher_encryption-container label{font-size:1.5rem}.App .password_length-container textarea,.App .cipher_encryption-container textarea{resize:vertical}.App .password_length-container input,.App .cipher_encryption-container input{width:100px;text-align:center}.App .password_length-container input::-webkit-outer-spin-button,.App .password_length-container input::-webkit-inner-spin-button,.App .cipher_encryption-container input::-webkit-outer-spin-button,.App .cipher_encryption-container input::-webkit-inner-spin-button{margin:0}.App .password_length-container{flex-direction:column}.App .output-container{display:flex;flex-direction:column;align-items:center;margin:1rem 0;position:relative}.App .output-container h3{font-size:1.5rem;font-weight:700;letter-spacing:.25rem;word-spacing:.5rem;text-transform:uppercase;filter:drop-shadow(2px 2px 15px black);z-index:2}.App .output-container .lock_icon{width:10rem;height:10rem;position:absolute;color:#ffa822;top:-25px}.App .output-container .output-box{padding:1rem;padding-inline-end:50px;position:relative;top:20px;font-size:1.5rem;font-weight:700;min-height:70px;min-width:250px;max-width:85vw;background:#ffffff40;box-shadow:0 4px 16px #1f26875e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;border:1px solid rgba(255,255,255,.1803921569);letter-spacing:.125rem;filter:drop-shadow(2px 4px 6px black)}.App .output-container .output-box.--password{letter-spacing:1rem}.App .output-container .output-box.--cipher{max-width:40vw}.App .output-container .output-box .copy_button{background:none;border:0;color:#fff;filter:drop-shadow(2px 4px 6px black);font-size:1.5rem;position:absolute;inset-inline-end:10px;inset-block-start:10px;cursor:pointer}.App .output-container .output-box span.copy_text{font-size:1rem;letter-spacing:.125rem;background:#ffffff80;padding:1rem;border-radius:8px;position:absolute;inset-inline-end:-100px;top:-50px;display:none;transition:all 1s;-webkit-animation:slide-up .1s cubic-bezier(.25,.46,.45,.94) reverse both;animation:slide-up .1s cubic-bezier(.25,.46,.45,.94) reverse both}.App .output-container .output-box span.copy_text.--show{display:inline-block;-webkit-animation:slide-up .15s cubic-bezier(.51,.92,.265,1.55) both;animation:slide-up .15s cubic-bezier(.51,.92,.265,1.55) both}.App .output-container .output-box span.copy_text.--show:after{content:"";position:absolute;top:98%;left:15%;margin-left:-8px;width:0;height:0;border-top:28px solid #919191;border-right:8px solid transparent;border-left:8px solid transparent}@keyframes slide-up{0%{-webkit-transform:translateY(0) scale(.8);transform:translateY(0) scale(.8);opacity:0}to{-webkit-transform:translateY(-35px) scale(1);transform:translateY(-35px) scale(1);opacity:1}}