body {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

form {
    background:#fff;
    padding:40px;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    text-align: center;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
}

#logo{
    height: 250px;
    display: block;
    margin: auto;
}

h1 {
    margin:0 0 16px;
    font-size: xx-large;
    text-align: center;
}

input {
    width:90%;
    padding:10px;
    margin:8px 0;
    border:1px solid #ccc;
    border-radius:8px;
    font-size: x-large;
}

.Button{
    margin:10px 0;
    border:none;
    font-weight:bold;
    cursor:pointer;
    width: 90%;
    max-width: 250px;
}

.err {
    color:#dc3232;
    font-size: large;
}

/*mini screen*/
@media (min-width:0px) and (max-width: 300px) {
    form {
        padding:5px;
    }
    #logo{
        height: 200px;
    }

    h1 {
        font-size: x-large;
    }

    input {
        padding:6px;
        font-size: large;
    }
   
    .Button{
        padding: 5px;
        width: 90%;
    }
}

/*phone*/
@media (min-width:301px) and (max-width: 576px) {
    form {
        padding:10px;
    }

     .Button{
        width: 50%;
    }
}

/*tablet*/
@media  (min-width:576px) and (max-width: 768px) {
    form {
        padding:15px;
    }
}