/*
$black: #333;
$blue: #4a80ff;
$orange: #ff641a;
$green: #8fcc27;
$yellow: #ffc94a;

$grey-base: #2b2c30;

$ratio: 1.414;
*/

@font-face {
    src: url('/assets/fonts/ClearSans-Regular.woff');
    font-family: 'clear sans';
    font-weight: 400;
    font-style: normal;
}
@font-face {
    src: url('/assets/fonts/ClearSans-Italic.woff');
    font-family: 'clear sans';
    font-weight: 400;
    font-style: italic;
}
@font-face {
    src: url('/assets/fonts/ClearSans-Bold.woff');
    font-family: 'clear sans';
    font-weight: 700;
    font-style: normal;
}
@font-face {
    src: url('/assets/fonts/ClearSans-BoldItalic.woff');
    font-family: 'clear sans';
    font-weight: 700;
    font-style: italic;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'clear sans', sans-serif;
    font-size: 15px;
    line-height: 1.414;
    color: #FFF;
}

body {
    background: #2B2C30 url('/assets/overlay-black.svg') no-repeat right bottom / 50vw;
    background-attachment: fixed;
}

h1 {
    margin: 1.414rem 0 1.414rem 0;
    font-size: 4em;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color: #4A80FF;
}
a:hover,
a:active {
    text-decoration: underline;
}

main {
    max-width: 40rem;
    margin: 0 auto;
    padding: 5.656rem 1.414rem 1.414rem 1.414rem;
}

main img#logo {
    height: 2rem;
    position: absolute;
    top: 1.414rem;
    left: 1.414rem;
}

main > section {
    margin-top: 5.656rem;
    font-size: .8em;
    color: #CCC;
}
main > section h2 {
    margin: 0;
}


form label {
    margin: 0;
}

form input {
    width: 16em;
    margin: 0 0 1rem 0;
    padding: 1ex 1em;
    border: 1px solid #CCC;
    border-radius: 2px;
    background: rgba(255,255,255,.1);
    color: #FFF;
}
form input:hover,
form input:focus {
    outline: none;
    border-color: #FFF;
    background: rgb(255,255,255,.2);
}


button {
    -webkit-appearance: none;
    position: relative;
    margin: 1.414rem 0 0 0;
    padding: 1ex 1em;
    border: 1px solid #FF641A;
    border-radius: 2px;
    text-align: center;
    line-height: 1;
    background: #FF641A;
    color: #FFF;
    text-shadow: 1px 1px 4px rgba(0,0,0,.2);
    box-shadow: 1px 2px 4px rgba(0,0,0,.2);
    transition: all .2s ease-in-out;
    cursor: pointer;
}
button:hover,
button:active {
    background: #FF854D;
    transition: all .1s ease-in-out;
}
button:active {
    top: 1px;
}
button:disabled {
    background: #808080;
    border-color: #cccccc;
    cursor: not-allowed;
}


[href='https://www.kjerner.com'] {
    position: absolute;
    right: 1.414rem;
    bottom: 1.414rem;
}