/* ============================= */
/* GLOBAL SITE STYLE */
/* ============================= */

body{
	
background:#000;
color:white;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin:0;
padding:0;
}

h1{
margin-top:40px;
font-size:48px;
}

h2{
margin-top:10px;
}


/* ============================= */
/* HOME BUTTON */
/* ============================= */

.home-button{
position:fixed;
bottom:25px;
left:25px;
z-index:1000;
}

.home-button img{
width:80px;
height:auto;
cursor:pointer;
transition:0.2s;
}

.home-button img:hover{
transform:scale(1.1);
}


/* ============================= */
/* FULLSCREEN BUTTON */
/* ============================= */

.fullscreen-button{
position:fixed;
bottom:25px;
right:25px;
z-index:1000;
background:none;
border:none;
cursor:pointer;
}

.fullscreen-button img{
width:80px;
height:auto;
transition:0.2s;
}

.fullscreen-button img:hover{
transform:scale(1.1);
}

/* FULLSCREEN MODE */

.game-container:fullscreen .game-frame{
width:90vw;
height:auto;
}

.game-container:fullscreen canvas{
width:100%;
height:100%;
}


/* ============================= */
/* HOMEPAGE GAME GRID */
/* ============================= */

.games{
display:flex;
justify-content:center;
gap:40px;
margin-top:40px;
flex-wrap:wrap;
}

.game{
background:#111;
padding:20px;
border-radius:12px;
width:260px;
text-decoration:none;
color:white;
transition:0.2s;
}

.game:hover{
transform:scale(1.05);
background:#222;
}

.game img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}


/* ============================= */
/* GAME CONTAINER */
/* ============================= */

.game-container{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin-top:40px;
}


/* ============================= */
/* GAME FRAME (3;2 ASPECT RATIO) */
/* ============================= */

.game-frame{

width:900px;          /* MAX GAME WIDTH */
aspect-ratio:3/2;     /* Keeps 900x600 ratio */

background:#000;

display:flex;
justify-content:center;
align-items:center;

margin:auto;

}

/* ============================= */
/* SQUARE GAME FRAME (COOLGAME) */
/* ============================= */

.game-frame-square{

width:800px;
aspect-ratio:1/1;

background:#000;

display:flex;
justify-content:center;
align-items:center;

margin:auto;

}

.game-frame-square canvas{
width:100%;
height:100%;
display:block;
}

/* FULLSCREEN SQUARE GAME */

.game-container:fullscreen .game-frame-square{

width:min(90vh, 90vw);
aspect-ratio:1/1;

}


/* ============================= */
/* CANVAS */
/* ============================= */

.game-frame canvas{

width:100%;
height:100%;

display:block;

}


/* ============================= */
/* MOBILE SUPPORT */
/* ============================= */

@media (max-width:900px){

.games{
flex-direction:column;
align-items:center;
}

.game{
width:90%;
max-width:350px;
}

.home-button img{
width:60px;
}

.fullscreen-button img{
width:60px;
}

.game-frame{
width:90vw;
}

}