/* style for main layout * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body {
    margin: 0 auto;
    font-family: 'Press Start 2P', cursive;
    background-color: #353;
    overflow-x: hidden;
    width: 100%;
}

.row {
    text-align: center;
    margin-top: 10px;
}

#content-screen canvas {
    margin: 0 auto;
}

#content-screen {
    text-align: center;
}

.hidden {
    display: none;
}



.title {
    display: inline-block;
    box-shadow: 2px 2px 4px #353;
    padding: 5px 10px;
    vertical-align: middle;
}

.title > div {
    display: inline-block;
}

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.d-ib { display: inline-block; }
.clearfix { clear: both; }

/* animation that happens when youu get hit */
@keyframes borderFlash {
    0% { border-color: #000; }
    10% { border-color: #F00; }
    100% { border-color: #000; }
}

.borderFlash {
    animation-name: borderFlash;
    animation-duration: 600ms;
}

/* @media screen and (orientation:landscape) {
    body {
        -ms-transform: rotate(90deg); /* IE 9 * /
        -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera * /
        transform: rotate(90deg);
    }
} */

/* menu specific styling * * * * * * * * * * * * * * * * * * * * * * * * * * */
#menu-container > div /*.menu-layer*/ {
    z-index: 3;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font: 14px 'Press Start 2P', cursive;
    overflow-y: scroll;
    color: #ffa;
    text-align: left;
    padding: 15px;
    text-shadow: #222 3px 3px 2px;
    background-color: #345;
}

html {
    touch-action: manipulation;
}
#battle-log {
    pointer-events: none;
    position: fixed;
    left: 8px;
    top: 8px;
    right: 8px;
    bottom: 300px;
    font-size: 10px;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 0 6px black, 0 0 6px black, 0 0 6px black, 0 0 6px black;
    z-index: 4;
    color: #ddd;
}

#battle-log > div > div {
    margin: 5px 0;
}