/* ---------- GENERAL ---------- */

* {
    box-sizing: border-box;
    margin: 0px auto;
}

*::before, *::after {
    box-sizing: border-box;
}

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

body {

    font: 87.5%/1.5em 'Open Sans', sans-serif;
    margin: 0;
    background: radial-gradient(circle at 0 0,
    rgba(255, 116, 2, 0.8), rgba(255, 116, 2, 0) 70.71%),
    radial-gradient(circle at 0% 80%,
            rgba(0, 173, 229, 0.8), rgba(0, 173, 229, 0) 70.71%),
    radial-gradient(circle at 80% 0%,
            rgba(117, 193, 50, 0.8), rgba(117, 193, 50, 0) 70.71%),
    radial-gradient(circle at 80% 80%,
            rgba(255, 173, 0, 0.8), rgba(255, 173, 0, 0) 70.71%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0264d6', endColorstr='#1c2b5a', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    z-index: 1;

}

.container {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* ---------- FORM ---------- */

input[type="submit"] {
    background-color: rgba(255, 116, 2, 0.8);
    color: #FFFFFF;
    font-weight: bold;
    text-transform: uppercase;
    background-size: 200% 100%;
}

input[type="submit"]:hover {
    background-color: rgba(255, 116, 2, 0.6);
    color: white;

    text-shadow: 2px 2px 4px orangered;
    box-shadow: 2px 2px 4px orangered;
}

a {
    color: #eee;
    text-decoration: none;

    font-weight: bold;
}

a:hover {
    color: rgba(255, 116, 2, 0.8);
    text-decoration: underline;
    text-shadow: 2px 2px 4px #000000;

}