@font-face {
    font-family: 'doodle';
    src: url('fonts/DoodleJump.ttf') format('truetype');
}

* {
    margin:0;
    padding:0;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
    position:relative;
    font-size:inherit;
    line-height:inherit;
    font-family:inherit;
    font-weight:inherit;
    text-align:inherit;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -ms-user-callout: none;

    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -ms-touch-callout: none;
    touch-callout: none;

    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;

    -ms-touch-action: none;
    -ms-content-zooming: none;  
    -ms-text-size-adjust:none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

html, body {
  width:100vw;
  height:100%;
  overflow-x:hidden; /* disables bouncy scroll / overscroll in iOS */
  touch-action:pan-y; /* disable zoom, only allow scroll */
}

html {
    font-family: 'doodle';

    color:white;
    
    background-color:black;
    background-image:url('/graphics/bck.png');
    background-size:cover;
}

body {
    text-align:center;
    position:relative;
        
    line-height:1;
    font-size:0;
    font-weight:normal;

    /* background-image:url('../graphics/reference.png');
    background-size:100%; */
}

img.tilt {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:40vmin;
    display:none;

    animation:spin 2s ease-in-out infinite;
}

@keyframes spin {
    0%, 100% { transform: translate(-50%, -50%) rotate(-60deg); }
    50% { transform: translate(-50%, -50%) rotate(-30deg); }
}