.container{width:100vw;height:100vh;background-color:#708ca5}.container .card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20em;height:30em;border-radius:2em;box-shadow:0 .8em 1.5em #0003;background-color:#fff}.container .card h1{text-align:center;color:#d89fcd;font-weight:800;font-family:Poppins,sans-serif}.container .card .monkey{display:flex;flex-direction:column;align-items:center;margin:2em auto;background-color:#fff;width:8em;height:8em;border-radius:50%;background-image:url(/caesarcipher-reactjs/assets/monkey-2a507413.gif);background-size:90% 85%;background-repeat:no-repeat;background-position:center;box-shadow:0 10px 25px #0003;overflow:hidden}.container .card .monkey img{width:100%;height:auto;transition:1.2s}.container .card .monkey #close-eyes{margin-top:50%;transition:1.2s}.container .card form .form-input{display:flex;justify-content:center;gap:1em}.container .card form .form-input input{color:#fff;background-color:#708ca5;height:3.5vh;border:solid .2em rgb(112,140,165);border-radius:.3em;padding:0 .5em;box-shadow:0 .8em 1.5em #0003}.container .card form .form-input ::placeholder{color:#fff}.container .card form .form-input :nth-child(1){width:15em}.container .card form .form-input :nth-child(2){width:3em}.container .card form .form-btn{display:flex;justify-content:center;gap:1em;margin:1em 0}.container .card form .form-btn button{width:5em;height:2.5em;border:none;border-radius:.3em;font-weight:700;cursor:pointer;box-shadow:0 .8em 1.5em #0003}.container .card form .form-btn :nth-child(1){background-color:#708ca5;color:#fff}.container .card form .form-btn :nth-child(2){background-color:#fff;color:#708ca5;border:solid .2em rgb(112,140,165)}.container .card p{padding:1em auto;text-align:center;font-size:1.5em;color:#d4afcd}:root{padding:0;margin:0;text-decoration:none;list-style:none;box-sizing:border-box;overflow:hidden}body{width:100vw;height:100vh;background-color:#708ca5}
