* {
    font-family: 'Roboto', sans-serif;
}
canvas {
    z-index: auto;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #000000;
}
img {
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
button {
    border-radius: 6px;
}
@-o-viewport{
    orientation: landscape;
}

h1, h2, em {
    font-family: 'Flamenco', 'Script MT', cursive;
}
h3, h4, p, button {
    font-family: 'Roboto', sans-serif;
}
em {
    font-weight: bold;
    color: #7f0000;
}

div.ui_characterSelect {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    width: 100%;
    height: 100%;
}
table.character_list {
    position: absolute;
    overflow: hidden;
    table-layout: auto;
    left: 5%;
    right: 35%;
    max-width: 100vmin;
    max-height: 100%;
    margin: auto;
    background: none;
    display: inline-block;
    text-align: center;
}
div.portrait_container {
    margin: 5%;
    width: 90%;
    height: 90%;
    text-align: center;
    background: none;
}
div.portrait_container:hover {
    background-color: rgba(42, 255, 255, 0.5);
    border-radius: 5%;
}
img.portrait {
    z-index: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}


div.ui_title {
    text-align: center;
    text-anchor: top;
    font-family: 'Flamenco', cursive;
    font-size: 3.6vmax;
    color: #ffffff;
    background: none;
    width: 100%;
    height: 10%;
    position: absolute;
    top: -8%;
}
div.center {
    display: flex;
    justify-content: center;
    align-items: center;
}