body{
margin:0;
font-family:Arial;
background:#1a0000;
color:white;
overflow:hidden;
}

/* ZAVJESE */
#curtainLeft,#curtainRight{
position:fixed;
top:0;
width:50%;
height:100%;
background:linear-gradient(#aa0000,#400000);
z-index:10;
transition:1s;
}

#curtainLeft{ left:0; }
#curtainRight{ right:0; }

.openLeft{ transform:translateX(-100%); }
.openRight{ transform:translateX(100%); }

/* MENU */
#menu{
position:absolute;
top:40%;
width:100%;
text-align:center;
z-index:20;
}

button{
padding:14px 24px;
font-size:18px;
border:none;
border-radius:12px;
background:red;
color:white;
}

/* HUD */
#hud{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
padding:10px;
font-size:20px;
z-index:5;
}

/* GAME AREA */
#gameArea{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* META */
.character{
position:absolute;
width:90px;
height:90px;
border-radius:50%;
background-size:cover;
box-shadow:0 0 20px rgba(255,255,255,0.5);
}

/* GAME OVER */
#gameOver{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#200000;
text-align:center;
padding-top:100px;
z-index:30;
}