How to Enhance Gravity Forms with CSS Code

Gravity Forms before CSS Styling
Here’s a screenshot of a form created with Gravity Forms in WordPress. The CSS includes with Gravity Forms has been disabled to avoid conflicts with the WordPress theme.

This is the same form after adding custom CCS styling.

#gform_2 ul {
padding:0
}

#gform_2 ul li {
padding:0;
margin:0 0 1em !important;
}

#gform_2 h3.gform_title {
color:rgba(0, 0, 0, 0.5)!important;
font-weight:100;
font-size:2rem;
}

#gform_2 input, #gform_2 textarea {
width:100%;
border:1px solid #ccc;
padding:0.5em;
font-weight:100;
font-size:1.2em;
letter-spacing:1px;
max-height:15vw;
border-radius:4px;
-moz-transition:ease 500ms;
-webkit-transition:ease 500ms;
-o-transition:ease 500ms;
transition:ease 500ms;
}

#gform_2 .gfield_required {
color:red;
margin:0 0.2em
}

#gform_2 input:hover, #gform_2 textarea:hover {
border: 1px solid #999;
}

#gform_2 input:focus, #gform_2 textarea:focus {
border: 1px solid #c1d82f;
}

#gform_2 .gform_footer {
display:flex;
justify-content:flex-end;
}

#gform_2 .button {
width:auto;
padding:0.5em 1em;
-moz-transition:ease 500ms;
-webkit-transition:ease 500ms;
-o-transition:ease 500ms;
transition:ease 500ms;
}

#gform_2 .button:hover {
transform:scale(1.1);
}