body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: black;
}

#game{
    position: absolute;
}

#orientation{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background-color:black;
    background-repeat:no-repeat;
    background-position: center center;
    display:none;
}
/* #orientation-image{
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
} */

/* ---------Register font face here--------- */
@font-face {
    font-family: 'roboto';
    src: url('assets/font/roboto-black.ttf'),
         url('assets/font/roboto-black.woff');
    src: local('☺')
        , url('assets/font/roboto-black.woff') format('woff')
        , url('assets/font/roboto-black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lobster';
    src: url('assets/font/lobster.ttf'),
         url('assets/font/lobster.woff');
    src: local('☺')
        , url('assets/font/lobster.woff') format('woff')
        , url('assets/font/lobster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenir';
    src: url('assets/font/avenir.ttf'),
         url('assets/font/avenir.woff');
    src: local('☺')
        , url('assets/font/avenir.woff') format('woff')
        , url('assets/font/avenir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}