html, body {
    height: 100%;
}

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    height: 100%;
}

@-ms-viewport {
    width: device-width;
    height: device-height;
}

a[href], button {
    /*-ms-touch-action: none;*/
    /* IE10 */
    /*touch-action: none;*/
    /* IE11 */
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #ffffff;
}
a[target="_system"]:after {
    /* content:" 🔗"; */
}
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
    background-image: url('../assets/wood.jpg');
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /* Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.  */
    xfont-size: 62.5%;
    /* resets the page font size */
    line-height: normal;
}

fontSizesPXtoEM {
    font-size: 0.8em;
    /* equals 8px */
    font-size: 1.0em;
    /* equals 10px */
    font-size: 1.6em;
    /* equals 16px */
    font-size: 2.0em;
    /* equals 20px */
}

body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    /* user-select: none; */
    -webkit-highlight: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.wrapper {
    padding: 0 10px 0 10px;
    max-width: 350px;
    margin: 0 auto;
}
.wrapperMedium {
    padding: 0 10px 0 10px;
    max-width: 480px;
    margin: 0 auto;
}


.gameDiv {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.gamePageWrapper{
    display: flex;  flex-direction: column;  height: 100%;
}

@media (orientation: landscape) { 
    .gamePageWrapper {
        display: flex;  flex-direction: row;  height: 100%;
    }
}
.page {
    animation: none;
    display: none;
}

.page.activePage {
    animation: flipInY 0.5s;
    /*  https://animate.style/#usage fadeIn  bounceIn*/
    display: block;
}

.page.activePage.noAnimate {
    animation: none;
}

.page#Game {
    display: block;
    overflow: hidden;
    height: 1px;
    width: 1px;
}

.page.activePage#Game {
    animation: none;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.pageTitle {
    padding: 5px 0 5px 0;
}

.pageTitle h1 {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0px;
}

.pageTitle img {
    text-align: center;
    width: 100%;
    padding: 10px 0px 10px 0px;
    max-width: 350px;
    min-width: 240px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
}

.pageContent {
    margin: 0px auto;
    max-width: 350px;
}




/* buttons */

.backButton {
    width: 48px;
    height: 48px;
    margin: 3px 30px 3px 0px;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(images/BackButton.png);
    vertical-align: text-bottom;
    vertical-align: middle;
}

.text-center{
    text-align: center;
}