
.contForm{
    position: relative;
    margin-top: 7%;
    transition: box-shadow 0.1s, transform 0.1s;
    width:100%;
    text-align: center;
    height: 25em;
}

.contForm p {
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    color: whitesmoke;
    border: none;
    font-size: 20px;
}

.contForm input{
    font-family: 'Noto Sans', sans-serif;
    border-radius: 2px;
    background-color: rgba(100, 100, 100, 1);
    outline: none;
    border: none;
    margin-left: 1em;
    margin-right: 3em;
    height: 3em;
    font-size: 15px;
    width: 15%;
}

.contForm textarea {
    font-family: 'Noto Sans', sans-serif;
    resize: vertical;
    max-height: 400px;
    min-height: 200px;
    width: 50%;
    height: 15em;
    border-radius: 20px;
    outline: none;
    background-color: rgba(100, 100, 100, 1);
    font-size: 15px;
}
/* Email */
.contForm input:focus:nth-child(1){
    box-shadow: 0px 0px 30px rgba(242,86,77, 1);
}
/* Object */
.contForm input:focus:nth-child(2){
    box-shadow: 0px 0px 30px rgba(44,134,197, 1);
}
/* Text Area */
.contForm textarea:focus {
    box-shadow: 0px 0px 30px rgba(99,42,145, 1);
}

/* Buttons */
.contForm button {
    display: inline-block;
    font-family: 'Noto Sans', sans-serif;
    color: white;
    background-color: #3b3b3b;
    position: relative;
    height: 2em;
    width: 8em;
    margin-left: 1em;
    margin-top: 1em;
    font-size: 2em;
    /*cursor: none;*/
    text-align: center;
    outline: none;
    box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
    border: none;
}
#reset:hover{
    box-shadow: 0px 0px 30px red;
    transition: 0.3s;
    color: white
}

#send:hover{
    box-shadow: 0px 0px 30px limegreen;
    transition: 0.3s;
    color: white;
}

.sugg {
    margin-top: 10%;
    position: absolute;
    width: 20%;
    left: 3%;
    font-family: 'Roboto Mono', monospace;
    color:#777;
    font-size: 150%;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .contForm{
        position: relative;
        margin-top: 7%;
        transition: box-shadow 0.1s, transform 0.1s;
        width:100%;
        text-align: center;
        height: auto;
    }

    .contForm p {
        text-align: center;
        font-family: 'Noto Sans', sans-serif;
        color: whitesmoke;
        border: none;
        font-size: 1.2em;
    }

    .contForm input{
        font-family: 'Noto Sans', sans-serif;
        border-radius: 2px;
        background-color: rgba(100, 100, 100, 1);
        outline: none;
        border: none;
        margin-left: 5%;
        margin-right: 5%;
        height: 3em;
        width: 90%;
        font-size: 1em;
    }

    .contForm textarea {
        width: 90%;
        font-size: 15px;
    }

    /* Buttons */
    .contForm button {
        height: 1.5em;
        width: 4.5em;
        margin-left: 1em;
        margin-top: 1em;
        font-size: 1.5em;
    }

    .sugg {
        display: none;
        visibility: hidden;
    }
}




