@media (prefers-color-scheme: dark) {
    :root {
        --colour: #aaaaaa;
        --colour-h1: #dddddd;
        --colour-h2: #bbbbbb;
        --colour-focus: #777777;
        --colour-bg: #333333;
        --colour-input-bg: #303030;
        --colour-chat-response: #9585b1;
        --colour-chat-response-bg: #222222;
        --colour-button-bg: #aaaaaa;
        --background-image: url('jeremy-bishop-G9i_plbfDgk-unsplash.jpg');
        --background-opacity: 1;
        --background-grayscale: grayscale(80%);
        --logo-filter: invert(28%) sepia(78%) saturate(1898%) hue-rotate(247deg) brightness(88%) contrast(19%);
        --colour-validate: #dd2222;
        --colour-status: #aaaaaa;
        --colour-forgot: #bbbbbb;
        --colour-signup: #bbbbbb;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --colour: #000000;
        --colour-h1: #6633bb;
        --colour-h2: #5a5a5a;
        --colour-focus: #777777;
        --colour-bg: #eeeeee;
        --colour-input-bg: #ffffff;
        --colour-chat-response: #6633bb;
        --colour-chat-response-bg: #f0eeff;
        --colour-button-bg: #777777;
        --background-image: url('eberhard-grossgasteiger-J9NDmBVhN04-unsplash.jpg');
        --background-opacity: 0.35;
        --background-grayscale: grayscale(0%);
        --logo-filter: invert(23%) sepia(78%) saturate(1898%) hue-rotate(247deg) brightness(88%) contrast(99%);
        --colour-validate: #dd7777;
        --colour-status: #444444;
        --colour-forgot: #332244;
        --colour-signup: #332244;
    }
}


@font-face {
  font-family: header;
    src: local("header"), url("Roboto-Thin.ttf");
}

@font-face {
  font-family: body;
    src: local("body"), url("Roboto-Light.ttf");
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: body, sans-serif;
    height: 100%;
    color: var(--colour);
    background-color: var(--colour-bg);
    font-size: 0.9em;
    overflow: hidden;
}

body::before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    content: "";
    background-size: cover;
    background-image: var(--background-image);
    opacity: var(--background-opacity);
    filter: var(--background-grayscale);
}

header {
    font-family: header, sans-serif;
    padding: 2em;
    float: right;
}

h1 {
    color: var(--colour-h1);
    display: table-cell;
    padding-right: 1em;
 }

h2 {
    color: var(--colour-h2);
    display: table-cell;
    vertical-align: middle;
}

input[type=text] {
    font-family: body, sans-serif;
    width: calc(100% - 2em);
    height: 2em;
    background-color: var(--colour-input-bg);
    color: var(--colour);
    border: 0;
    padding: 1em;
    border-radius: .5em;
}

input[type=text]:focus {
  outline-color: var(--colour-focus);
}

::-webkit-scrollbar {
    background: transparent;
}

label {
    display: none;
}

.content {
    margin: auto;
    width: calc(100% - 4em);
    height: calc(100% - 12em);
}

button {
    color: var(--colour-input-bg);
    background-color: var(--colour-button-bg);
    border-radius: .5em;
    text-transform: uppercase;
    padding: .5em;
    float: right;
    width: 5em;
    height: 4em;
    border: 0;
}

@media screen and (max-width: 800px) {
    h2 {
        display: none;
    }
}