body {
    font-family: "Roboto", sans-serif;
    color: black;
    padding: 50px;
}

input:focus {
    outline: none;
}

/* desktop viewport */
@media screen and (min-width: 1024px) {

    /* .cancel-link {

    } */

    .cancel-link a {
        text-decoration: none;

    }

    .reset {
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }

    form {
        padding: 20px;
    }

    .reset h3{
        font-weight: bold;
    }

    input[type="email"]{
        background-color: rgb(235, 235, 235);
        border: 1px solid white;
        width: 96%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    input[type="password"]{
        background-color: rgb(235, 235, 235);
        border: 1px solid white;
        width: 96%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    .submit {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit button {
        width: 100%;
        border-style: none;
        background-color: #30AE69;
        color: white;
        font-weight: bold;
        height: 50px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .submit small {
        text-align: center;
        display: block;
    }

}

/* mobile view port */

@media screen and (max-width:767px) {
    .cancel-link a {
        text-decoration: none;

    }

    .reset {
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }


    .reset h3{
        font-weight: bold;
    }

    input[type="email"]{
        background-color: rgb(235, 235, 235);
        border: none;
        width: 100%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    input[type="password"]{
        background-color: rgb(235, 235, 235);
        border: none;
        width: 96%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    .submit {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit button {
        width: 100%;
        border-style: none;
        background-color: #30AE69;
        color: white;
        font-weight: bold;
        height: 50px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .submit small {
        text-align: center;
        display: block;
    }
}

/* tablet view */

@media screen and (min-width:767px) and (max-width:1023px) {
    .cancel-link a {
        text-decoration: none;

    }

    .reset {
        display: flex;
        justify-content: center;
        margin-top: 100px;
    }


    .reset h3{
        font-weight: bold;
    }

    input[type="email"]{
        background-color: rgb(235, 235, 235);
        border: none;
        width: 100%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    input[type="password"]{
        background-color: rgb(235, 235, 235);
        border: none;
        width: 96%;
        border-radius: 5px;
        margin-bottom: 20px;
        height: 50px;
        padding-left: 15px;
        color: grey;
        box-shadow:  0 0 1px rgb(212, 212, 212) ;
    }

    .submit {
        width: 100%;
        margin-bottom: 10px;
    }

    .submit button {
        width: 100%;
        border-style: none;
        background-color: #30AE69;
        color: white;
        font-weight: bold;
        height: 50px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .submit small {
        text-align: center;
        display: block;
    }
}