body {
        font-family: Roboto;
        background-color:  #e76f51;
        display: flex;
        align-items: center;
        justify-content: center;
}

.login {
        background-color: darkblue;
        width: 400px;
        color:white;
        padding: 50px;
        box-shadow: 10px 10px 20px black;
        text-align: center;
    }

    .login input {
        display: block;
        margin: 20px auto;
        text-align: center;
        background: none;
        padding: 12px;
        font-size: 15px;
        border-radius: 22px;
        outline: none;
        color: yellow;

    }

    .login input[type="text"], .login input[type="password"] {
        border: 2px solid yellow;
        width: 220px;

    }

    .login input[type="submit"]{
        width: 150px;
        border: 2px solid yellow;
        cursor: pointer;
    }

    .login input[type="text"]:focus, .login input[type="password"]:focus {
        border-color: Blue;
          width: 300px;
        transition: 0.5s;
        
    }

.login input[type="submit"]:hover {
        background-color: green;
        transition: 0.5s;

}