#game {
    width : 100%;
    height : 100%;
}


/* use a smaller base size for small screens */
@media (max-device-width: 480px) {
    #game {
        font-size : 32px;
    }
    .item-size {
        font-size : 32px;
    }
}

/* use a bigger base size for tablets */
@media (min-device-width: 480px) and (max-device-width: 768px) {
    #game {
        font-size : 40px;
    }
    .item-size {
        font-size : 40px;
    }
}

/* use a bigger base size for tablets */
@media (min-device-width: 768px) {
    #game {
        font-size : 64px;
    }
    #game-screen .game-board {
        margin : 0.75em;
    }
    .item-size {
        font-size : 64px;
    }
}

/* 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;
    }
    .item-size {
        font-size : 32px;
    }
}

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

/* tablets landscape */
@media (orientation: landscape) and (min-device-width : 768px) {
    #splash-screen,
    #main-menu,
    #settings {
        padding-top : 1.5em;
    }
    #game-screen .game-board,
    #game-screen .alert-overlay {
        margin : 0.25em;
    }
    .item-size {
        font-size : 64px;
    }
}


@media (orientation: landscape) {
    #game-screen .game-board {
        float : left;
    }

    #game-screen .game-info {
        width : auto;
        height : 2em;
        margin-top: 1em;
        white-space : nowrap;
    }

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

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

    #game-screen .game-info .score span{
        display: block;
    }

    #game-screen .time {
        font-size : 0.5em;
        margin : 1em 0 0 0;
        float : left;
        width : 6.5em;
        /* vendor specific transforms */
        -webkit-transform : rotate(-90deg)
        translate(-3em, -1.75em);
        -moz-transform : rotate(-90deg)
        translate(-3em, -1.75em);
        -ms-transform : rotate(-90deg)
        translate(-3em, -1.75em);
        /* standard transform */
        transform : rotate(-90deg)
        translate(-3em, -1.75em);
    }
    #game-screen footer {
        position: static;
        float: left;
        width: 6em;
        margin-top: 4em;
    }
}