@import url('https://fonts.googleapis.com/css?family=Baloo&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
@import url('https://fonts.googleapis.com/css?family=Russo+One');

html {
    min-height: 100%;
    padding: 5%;
    background: #40C4FF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top, #1565C0, #40C4FF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #1565C0, #40C4FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #1565C0, #40C4FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #1565C0, #40C4FF); /* Standard syntax (must be last) */
}



.titolo {
    font-family: 'Russo One', sans-serif;
    color: #f7f7f7;
    font-size: 2.5em;
    text-align: center;
    position: relative;

    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.sottotitolo {
    font-family: 'Roboto', sans-serif;
    color: #f7f7f7;
    font-size: 1.5em;
    text-align: center;
    position: relative;
    top: .5em;

    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4),
    0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}

.paragrafo {
    font-family: 'Roboto', sans-serif;
    color: #212121;
    font-size: 1em;
    line-height: 1.25em;
    text-align: center;
    position: relative;
    top: 2em;
}

a {
    text-decoration: none!important;
}

.btn {
    position: relative;
    top: 2em;

    display: block;
    margin: 30px auto;
    padding: 0;

    overflow: hidden;

    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

    background-color: rgb(3,169,244);
    color: #ecf0f1;

    transition: background-color .3s;


}

.btn:hover, .btn:focus {
    background-color: rgb(0,169,255);
}

.btn > * {
    position: relative;
}

.btn span {
    display: block;
    padding: 12px 24px;
}

.btn:before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    display: block;
    width: 0;
    padding-top: 0;

    border-radius: 100%;

    background-color: rgba(236, 240, 241, .3);

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.btn:active:before {
    width: 120%;
    padding-top: 120%;

    transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Styles, not important */
*, *:before, *:after {
    box-sizing: border-box;
}