body{
	
    background-image: url("../img/background/turtle_mobile.png");
	 background-repeat: repeat;
}
.screen footer button {
    margin-left : 0.25em;
    margin-right : 0.25em;
    padding : 0 0.75em;
    font-family : blackPearl, sans-serif;
    font-size : 0.6em;
    color : rgba(255,217,2,0.8);
    background : rgb(10,20,0);
    border: 0.05em solid rgb(200,51,39);
    border-radius : 0.2em;
	position:relative;
margin-top:35%;
}

/* use a smaller base size for small screens */
@media (max-device-width: 480px) and (orientation: portrait),
@media (max-device-width: 640px) and (orientation: landscape) {
	#game {
	font-size: 12px;
	position : absolute;
    left : 0;
    top : 0;
    width : 7em;
    height : 9em;
    font-family : blackPearl;
    color: rgb(20,20,20);   
	background-image: none;
	background: transparent;    
	}
	
	#game-screen .game-board {
    position: relative;
    width: 8em;
    height: 8em;

    perspective: 16em;
    /*-webkit-perspective: 16em;
    -moz-perspective: 16em;
    -ms-perspective: 16em;*/
	}
	
	h1.logo {
    font-family: blackPearl, sans-serif;
    line-height: 0.2em;    
    margin: 0;
    text-align: center;
    color: rgb(70,120,20);     
	}

	span.blue {
    font-size: 0.50em;
    color: rgb(0,20,250);
     text-shadow: 0.01em  0.01em  0.01em rgb(128,71,54),
                 -0.03em -0.03em  0.03em rgb(128,71,54),
                  0.10em  0.15em  0.15em rgb(0,0,0);
    margin-left:2px;
    margin-right:13px;
    display:inline-block;
    padding: 0px;
    transform: rotate(5deg);
    transform: translate(0,-15px);
	}
	span.gems {
    font-size: 0.4em;
    color: rgb(200,51,39);
     text-shadow: 0.01em  0.01em  0.01em rgb(128,71,54),
                 -0.03em -0.03em  0.03em rgb(128,71,54),
                  0.10em  0.15em  0.15em rgb(0,0,0);
    margin-left:2px;
    margin-right:13px;
    display:inline-block;

    transform: rotate(5deg);
    transform: translate(0,-15px);
}
} /* ending of phone sizes */


/* use a bigger base size for ipad and tablets */
@media (max-device-width: 720px) and (orientation: portrait),
@media (max-device-width: 1024px) and (orientation: landscape) {
	#game {
		font-size : 40px;
	}
} /* ending of ipad and tablet sizes */


/* smartphones landscape */

@media (orientation: landscape) {
    #splash-screen,
    #main-menu {
        font-size: 1.0em;
        padding-top: 0.75em;
    }
    ul.menu li {
        display: inline-block;
        margin: 0;
    }
    ul.menu li button {
        margin: 0.5em;
        font-size: 0.5em;
    }
} /* end of orientation: landscape */

/* small screens landscape */
@media (orientation: landscape) and (max-device-width : 480px) {
    ul.menu li button {
        font-size: 0.4em;
    }    
} /* end of 480px */

/* tablets landscape */
@media (orientation: landscape) and (min-device-width : 768px) {
    #splash-screen,
    #main-menu {
        padding-top : 1.5em;
    }
} /* end of 768px */


@media (orientation: landscape) {
    #game-screen .game-board {
        float: left;
    }
    
    #game-screen .game-info {
        width: auto;
        height: 2em;
        white-space : nowrap;
    }

    #game-screen .game-info label {
        font-size: 0.5em;
    }

    #game-screen .game-info .score {
        float: left;
        clear: both;
    }


     #game-screen .time {
        margin: 0;
        position: absolute;
        top: 2.0em;
        left: 8.7em;
        width: 5em;
      
        /* standard transform */
        transform: rotate(-90deg) translate(-2.5em, -2.5em);
    }

    #game-screen footer button.exit {
		position:relative;
		margin-top:100%;
        float: right;
    }
} /* end of orientation: landscape */