@media screen {

    .page .content form {

        margin:             0 0 5vh;

    }

    .page .content form button {

        background:         #1d1f21;
        color:              #ffffff;
        padding:            1vh 1vw;

    }

    .page .content form input {

        background:         #ffffff;
        border:             thin solid #c5c8c6;
        box-sizing:         border-box;
        margin:             0 0 2.5vh;
        padding:            0.5vh 0.5vw;
        width:              100%;

    }

    .page .content form input:invalid:placeholder-shown {

        background:         #fff5f5 !important;
        border-color:       #ff4d4d !important;
        box-shadow:         0 0 0 3px rgba(255, 77, 77, 0.4) !important;

    }

    .page .content form input:invalid:not(:placeholder-shown) {

        background:         #fff5f5 !important;
        border-color:       #ff4d4d !important;
        box-shadow:         0 0 0 3px rgba(255, 77, 77, 0.4) !important;

    }

    .page .content form input:valid:not(:placeholder-shown) {

        background:         #f0fbf9 !important;
        border-color:       #2ec4b6 !important;
        box-shadow:         0 0 0 3px rgba(46, 196, 182, 0.3) !important;
        color:              #0f6257 !important;

    }

    .page .content form textarea:invalid:placeholder-shown {

        background:         #fff5f5 !important;
        border-color:       #ff4d4d !important;
        box-shadow:         0 0 0 3px rgba(255, 77, 77, 0.4) !important;

    }

    .page .content form textarea:invalid:not(:placeholder-shown) {

        background:         #fff5f5 !important;
        border-color:       #ff4d4d !important;
        box-shadow:         0 0 0 3px rgba(255, 77, 77, 0.4) !important;

    }

    .page .content form textarea:valid:not(:placeholder-shown) {

        background:         #f0fbf9 !important;
        border-color:       #2ec4b6 !important;
        box-shadow:         0 0 0 3px rgba(46, 196, 182, 0.3) !important;
        color:              #0f6257 !important;

    }

    .page .content form input::placeholder {

        color:              #707880;

    }

    .page .content form input[type="email"] {

        box-shadow:         none;
        transition:         all 0.2s ease-in-out;

    }

    .page .content form input[type="email"]:invalid:not(:placeholder-shown) {

        background:         #fff5f5 !important;
        border-color:       #ff4d4d !important;
        box-shadow:         0 0 0 2px rgba(255, 77, 77, 0.4) !important;
        color:              #cc0000 !important;

    }

    .page .content form input[type="email"]:valid:not(:placeholder-shown) {

        background:         #f0fbf9 !important;
        border-color:       #2ec4b6 !important;
        box-shadow:         0 0 0 2px rgba(46, 196, 182, 0.3) !important;
        color:              #0f6257 !important;

    }

    .page .content form label {

        display:            block;
        font-family:        "Noto Serif Bold", serif;
        margin:             0 0 0.5vh;
        text-align:         left;
        width:              100%;

    }

    .page .content form select {

        background:         #ffffff;
        border:             thin solid #c5c8c6;
        font-size:          0.90em;
        margin:             0 0 2.5vh;
        padding:            1vh 1vw;
        width:              100%;

    }

    .page .content form textarea {

        background:         #ffffff;
        border:             thin solid #c5c8c6;
        box-sizing:         border-box;
        height:             15vh;
        margin:             0 0 2.5vh;
        padding:            0.5vh 0.5vw;
        resize:             none;
        width:              100%;

    }

    .page .content form textarea::placeholder {

        color:              #707880;

    }

}