style.css

body{
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:#d4ecf9;
    
    font-family: monospace,sans-serif;
    color:#05233e;
}


.container{
    background:#e3e8eb5c ;
    backdrop-filter: blur(140px);
    padding:20px;
    box-shadow:0 4px 10px rgba(0, 4, 13, 0.674);
    border-radius: 24px;
    width:70%;
    max-width: 450;
    min-width:350px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.cf{
    width:100%;
    padding:15px;
    font-weight:bold;
    font-size:22px;
}


input{
    width: 290px;
    font-family: monospace;
    float:right;
    padding: 5px;
    outline: none;
    background:#b5d5e7;
    box-shadow: #05233e;
    border-color: #d3e8f3;
    border-radius: 6px;
    color:rgb(3, 30, 58) ;
    font-size: 20px;
}