html, body {
 font-family: Verdana, sans-serif;
 font-size: 16px;
 text-align: center;
 background-color: yellow;
 color: black;
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* primary */
.primary { color: rgba(3,169,244 ,1); }

/* secondary darker */
.secondary { color: rgba(1,87,155 ,1); }

/* accent */
.accent { color: rgba(255,214,0 ,1); }

.hidden { display: none !important; }
.show { display: block !important; }


div:hover i {
    transition: color 0.5s ease-in 0.3s, transform 0.5s ease 0.3s;
    color: rgba(255,214,0 ,1);
    transform: rotate(360deg);
}
i {
    transition: color 2s linear 0.9s;
}

.h1 {
 font-size: 4rem;
 font-weight: 700;
 color: deeppink;
 text-align: center;
}

input {
padding:1.4rem;
margin: 1.4rem;
background-color: aliceblue;
color: dodgerblue;
font-size: 1.4rem;
}

button {
 padding: 1.4rem;
 margin: 1.4rem;
 background-color: deeppink;
 color: white;
 font-size: 1.4rem;
 font-weight: 700;
}