:root {
	--size : 600px;
	--center : calc(var(--size)/2);
	--tDur : 3s; /*transitions duration*/
	--pageWidth : 60%;
	--closePageSize : calc(var(--size)/2);
	--closePageCenter : calc(var(--closePageSize)/2);
	
}
html body {
	background-color : black;
	
	font-family: Consolas,monaco,monospace;
	font-size : .8em;
	text-align: justify;
    text-justify: inter-word;
    margin : 0;
    
	overflow : hidden;
    background-image: url('images/yojunVisuel_rescaled.gif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: var(--size);
    
    will-change : background-position, background-size;
    
    -webkit-transition : background-position var(--tDur) ease-in-out, background-size var(--tDur) ease-in-out;
    transition : background-position var(--tDur) ease-in-out, background-size var(--tDur) ease-in-out;
	
}
a:any-link {
	color: white;
  }
.wrapper {
    position: relative;
    text-align: center;
    width: var(--size);
    height:92%;
	left: calc(50% - var(--center));
}

.wrapper:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.mainsquare {
  	position: absolute;
  	width: 100%;
  	height:var(--size);
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; 
}
.square{
	float: left;
	margin:0;
	width:50%;
	height:50%;
	opacity: 1;
	cursor : hand;
	
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    
	transition:opacity 1s ease-in-out;
}
.square:hover {
	/*opacity : 1;*/
}
.menuhidden {
	background-image: none !important;
}
.circlemovedBR {
	/* infos */
	--cursize : calc(var(--size)*2.2);
	--curCenter : calc(var(--cursize) / 2);
	
	background-size : var(--cursize);
	background-position: left calc(100vw - var(--curCenter)) top calc(100vh - var(--curCenter));
}
.stampedBR{
	/* infos */
	--cursize :  calc(var(--closePageSize)*2.2);
	--curCenter : calc(var(--cursize) / 2);
	
	width : var(--cursize) !important;
	height: var(--cursize) !important;
	left : calc(100vw - var(--curCenter));
	top : calc(100vh - var(--curCenter));
}
.circlemovedBL {
	/* trailer */
	
	--cursize : calc(var(--size)*0.25);
	--curCenter : calc(var(--cursize) / 2);
	
	background-size : var(--cursize);
	background-position: left calc(50vw - var(--curCenter)) top calc(75vh - var(--curCenter));
}
.stampedBL{
	/* trailer */
	--cursize :  calc(var(--closePageSize)*0.25);
	--curCenter : calc(var(--cursize) / 2);
	width : var(--cursize) !important;
	height: var(--cursize) !important;
	left : calc(50vw - var(--curCenter));
	top : calc(75vh - var(--curCenter));
}
.circlemovedBC {
	/* contact */
	--cursize : calc(var(--size)*1.2);
	--curCenter : calc(var(--cursize) / 2);
	background-position: left calc(50vw - var(--curCenter)) top calc(70vh - var(--curCenter));
	background-size : var(--cursize);
	
}
.stampmovedBC {
	/* contact */
	--cursize : calc(var(--closePageSize)*1.2);
	--curCenter : calc(var(--cursize) / 2);
	width : var(--cursize) !important;
	height: var(--cursize) !important;
	left : calc(50vw - var(--curCenter)) !important;
	top : calc(70vh - var(--curCenter)) !important;
}
#a, #b, #c, #d {
	width : 50%;
	height: 50%;
	margin : 0;
}
@keyframes play_in {
   from { background-position:    0px; }
     to { background-position: -5000px; }
}
@keyframes play_out {
   from { background-position: -5000px; }
     to { background-position: -7200px; }
}
.hiddensquare {
	opacity : 0;
}
#infos_sprite {
	position : absolute;
	left : 0px;
	top: 0px;
	width : 200px;
	height : 200px;
	background-image: url('images/infos_sprite2.png');
		
}
#trailer_sprite {
	position : absolute;
	right : 0px;
	top: 0px;
	width : 200px;
	height : 200px;
	background-image: url('images/trailer_sprite.png');
		
}
#presskit_sprite {
	position : absolute;
	left : 0px;
	bottom : 0px;
	width : 200px;
	height : 200px;
	background-image: url('images/presskit_sprite.png');
		
}
#contact_sprite {
	position : absolute;
	right : 0px;
	bottom : 0px;
	width : 200px;
	height : 200px;
	background-image: url('images/contact_sprite.png');
		
}
#infos_sprite:hover, #trailer_sprite:hover, #contact_sprite:hover, #presskit_sprite:hover {
    -webkit-animation: play_in 2s steps(25) both;
       -moz-animation: play_in 2s steps(25) both;
        -ms-animation: play_in 2s steps(25) both;
         -o-animation: play_in 2s steps(25) both;
            animation: play_in 2s steps(25) both;
	
}

#infos_sprite:not(:hover), #trailer_sprite:not(:hover), #contact_sprite:not(:hover), #presskit_sprite:not(:hover) {
    -webkit-animation: play_out 1s steps(11) both;
       -moz-animation: play_out 1s steps(11) both;
        -ms-animation: play_out 1s steps(11) both;
         -o-animation: play_out 1s steps(11) both;
            animation: play_out 1s steps(11) both;
	
}

/**/
#content {
	position : absolute;
	top:0;
	left:0;
	width : 100%;
	height : 100%;
	color:white;
	transition : opacity var(--tDur) ease-in-out;
	
	overflow : auto;
	background-color : rgba(0,0,0,0.6);
	
}
#ptext {
	position : relative;
	margin : auto;
	width: var(--pageWidth);
	height: 90%;
	/*padding : .5em;*/
}
#pText:after {
	display:block;
	content:"";
	padding-bottom : 2vh;
}
.hidden {
	height : 0% !important;
  	opacity: 0;
}
h1 {
	border-style: none none dotted none;
	border-color:white;
	border-size:4em;
}
#diffsList{
	list-style-type:circle
}
#games_list{
	border : 0;
	color: white;
	font-size : 1em;
	text-align: justify;
    text-justify: inter-word;
}
.gameThumb{
	width : 60px;
	height:auto;
	margin-right : 10px;
	margin-bottom : 10px;
	border : .5px solid grey;
	padding : 5px;
}
.gameDesc {
	vertical-align: top;
}
#closePage{
	position : absolute;
	width : var(--closePageSize);
	height : var(--closePageSize);
	opacity:0;
	background-color: black;
}
#closePage:hover {
	cursor:  	Pointer;
}
#images {
	border : 2;
	border-color:red;
	width:100%;
}
.tdphoto{
	width : 50%;
}
.photo{
	display:block;
	width:100%;
	height:auto;
}
#videoPlayer1 {
	position : relative;
	margin : auto;
	width: var(--pageWidth);
	height: 80%;
	padding : .5em;
	text-align : center;
}
video[poster]
{
	opacity : 1;
}
#trailer {
	margin:auto;
	margin-top : 10vh;
	width: 60vw;
	height : auto;
}
#socials {
	height : 0% !important;
	position : absolute;
	bottom:100px;
	left:40px;
	z-index : 10;
	transition : opacity var(--tDur) ease-in-out;
}
#fblogo {
	width:20px;
	height:20px;
	margin-right:3px;
}
.social {
	margin:5px;
}
#thankyou {
	margin-top :30vh;
}