@font-face {
    font-family: "ep-body";
    src: url(/static/fonts/wotfard-medium-webfont.woff2);
}

* {
    box-sizing: border-box;
}

html, body {
    font-family: "ep-body", "Trebuchet MS", sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 100%;
}

button {
    height: 40px;
    padding: 0 0 3px;
    line-height: 0;
    border-radius: 7px;
    min-width: 180px;
    background: linear-gradient(
        0deg,
        rgba(96,155,185,1) 0%,
        rgba(192,214,224,1) 100%
    );
    background-repeat: no-repeat;
    border: none;
    border-top: 2px solid #fff;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    color: #fff;
    font-size: 20px;
    /*-webkit-text-stroke: 5px rgb(86, 121, 139);*/
    /*paint-order: stroke fill;*/
    text-shadow:
        -1px -1px 2px rgb(86, 121, 139),
        -1px  1px 2px rgb(86, 121, 139),
         1px -1px 2px rgb(86, 121, 139),
         1px  1px 2px rgb(86, 121, 139),
        -1px  0px 2px rgb(86, 121, 139),
         1px  0px 2px rgb(86, 121, 139),
         0px -1px 2px rgb(86, 121, 139),
         0px  1px 2px rgb(86, 121, 139);
    ;
}
button:hover {
    background: linear-gradient(
        0deg,
        rgb(106,165,195) 0%,
        rgb(202,224,234) 100%
    );
    background-repeat: no-repeat;
}
button:focus {
    outline: none;
    box-shadow: 0px 0px 10px rgba(255,255,255,0.3);
    border-bottom-color: rgba(0,0,0,0.1);
}
button:active {
    border-top:none;
    border-bottom-color: #fff;
    background: linear-gradient(
        180deg,
        rgb(106,165,195) 0%,
        rgb(202,224,234) 100%
    );
    background-repeat: no-repeat;
}
button.disabled, button:disabled, .disabled button {
    background: rgba(0,0,0,0.2);
    color: #eee;
    border: none;
    -webkit-text-stroke: 0;
    text-shadow: none;
    pointer-events: none;
}


/* -- LOBBY -- */

.header { display: flex; flex-direction: row; margin-top: 10px; }
.header .title { flex-grow: 1; padding: 10px; }
.header .user { flex-grow: 0; text-align: right; line-height: 60px;padding-right: 60px;}
.header, .main {
    margin: 0 10px;
}
.breadcrumbs { margin: 10px }


/* -- REG -- */

.reg {
    background: url(/static/images/tile.png) center -15px;
}