
@font-face {
    font-family: 'press_start_2pregular';
    src: url('fonts/pressstart2p-regular-webfont.woff2') format('woff2'),
         url('fonts/pressstart2p-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body { 
    width:100%; height:100%; margin:0; padding:0; 
    font-size:10px;
    font-family: 'press_start_2pregular', Helvetica, Arial, sans-serif;
    overflow:hidden;
    background:#000;
}
* {
    margin:0; padding:0;
    box-sizing:border-box;
    list-style:none;    
    outline:none;
    /*font-family: Helvetica, Arial, sans-serif;*/
    /*font-weight:normal; color:#000;*/

}
* {
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:-webkit-crisp-edges;
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:pixelated;
}
*, *:before, *:after {
  box-sizing: border-box;
}
ul, li { list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,p { margin-bottom:1rem; font-size:1rem; line-height:1.3rem; }

a { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; }
strong *, strong { font-weight:bold; }

.hidden { display:none; } .clear { clear:both; }
.abs { position:absolute; left:0; top:0; } .rel { position: relative; }
.pointer { cursor:pointer; } .f-left { float: left; } .f-right { float: right; }
.upper, .upper * { text-transform: uppercase; } .nopper, .nopper * { text-transform:  none; } 
.t-center { text-align: center; } .t-right { text-align: right; }
.through { pointer-events: none; }
* { 
    -webkit-user-select:none;      
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;  }

/* 340x255 200x150 */

main { /* le conteneur principal */
	position: relative;
	background: #0000ff;
	width:133.33vh; height:100vh;
	margin:0 auto;
	overflow:hidden;
	cursor:pointer;
  opacity:0;
}
section, section img, aside, aside img { /* = screen = level */ 
	position: absolute; width:100%; height:100%; left:0; top:0;
}
section, aside { display:none; }
/*section#home { display:block; }*/
section { transform-origin: 50% 66%; }
section#mamie2 { transform-origin: 76% 100%; }

#playtime {}
#playtime .jauge { width:4%; height:50%; display:none; 
	position: absolute; left:25%; top:25%;
	background:red; }
#playtime .barre { 
	position: absolute; left:0; bottom:0;
	width:100%; height:100%; background:white; }

#shame { background:black; }

/*#score {  display:block;  }*/
#score p { font-size:6vh; line-height:6vh; color:#0ff;
	text-transform: uppercase; text-align: center;
	text-decoration: blink; width:100%;
	position: absolute; right:1.5vh; bottom:5vh;
}
#score span { font-size:2em; }
#score p.shadow { color:#00f; right:.9vh; bottom:4.4vh; }

@-webkit-keyframes blinker {
  from { transform:scale(0.8); }
  to { transform:scale(1); }
}

#score p {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);*/
  -webkit-animation-duration: 1s;
}

.gif { position: absolute; width:100%; height:100%; } /* fakegif container */
/*.gif img { position: absolute; }*/