@font-face {
    font-family: "KiteDisplay";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/kite-display/light.eot?#iefix") format("eot"),
    url("../fonts/kite-display/light.woff2") format("woff2"),
    url("../fonts/kite-display/light.woff") format("woff"),
    url("../fonts/kite-display/light.ttf") format("truetype"),
    url("../fonts/kite-display/light.svg#light") format("svg");
}

@font-face {
    font-family: "KiteDisplay";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/kite-display/bold.eot?#iefix") format("eot"),
    url("../fonts/kite-display/bold.woff2") format("woff2"),
    url("../fonts/kite-display/bold.woff") format("woff"),
    url("../fonts/kite-display/bold.ttf") format("truetype"),
    url("../fonts/kite-display/bold.svg#bold") format("svg");
}

html, body {
    font-family: 'KiteDisplay', 'Helvetica', 'Arial', sans-serif;
    font-size: 1em;
    height: 100%;
}

/*
 * Typography
 */

h1 {
    margin-bottom: 1.5rem;
    padding-bottom: .25rem;
}

h2 {
    margin-bottom: 1.0rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid #eee;
}

body {
    overflow-y: scroll;
    line-height: 1.4;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom,#fff 10%,#999 100%);
}

.button-bu,
.button-bu:visited {
    display: block;
    border: 1px solid #666;
    padding: 2.25rem 2.75rem;
    margin-top: 0.5rem;
    /*background: #e93591;*/
    background: linear-gradient(to bottom right,#df3490 0%,#691f6a 100%);
    border-radius: 100px;
    font-size: 3.25em;
    color: #eeeeee;
    text-shadow: 2px 2px 3px #333;
}

.button-bu .domain {
    font-size: 0.5em;
}

.button-bu:hover,
.button-bu:active {
    color: #fff;
    text-decoration: none;
    background: #df3490;
}

.background_magenta {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(45deg,#591b68 0,#ea3694 100%);
}