/* 
    Created on : 27.11.2015, 16:21:52
    Author     : Tomasino
*/
@import url("https://fonts.googleapis.com/css?family=Arimo:400,700");

:root {
    --font-family: 'Arimo', sans-serif;
    --font-size: 16px;
    --primary-color: #FFD700;
    --secondary-color: #FFC107;

    --surface-start: #0a0a0a;
    --surface-end: #121212;
    --surface: linear-gradient(to bottom, var(--surface-start), var(--surface-end));
    --on-surface: #F5F5F5;
}

html {
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--on-surface);
    background: var(--surface);
    min-height: 100%;
    display: flex;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

header, section {
    display: flex;
    flex-direction: column;
}

header, section {
    text-align: center;
    align-items: center;
}

header {
    padding-top: 3em;
}

.text--small {
    font-size: 0.8em;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; }

h1 { color: var(--primary-color); font-size: 4em; }

h2 { color: var(--secondary-color); font-size: 2em; }

strong { color: var(--secondary-color); }

.java-bg, .dart-bg {
    opacity: 0.01;
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}


.board-bg {
    opacity: 0.05;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: url("../img/board_3.jpg") no-repeat center center;
    background-size: contain;
}