body{
margin:0;
background:#111;
/*overflow:hidden;*/
font-family:Arial, Helvetica, sans-serif;
}

/* scalable stage */

#stage{
position:relative;
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

/* gallery container */

#gallery{
position:relative;
width:90vw;
height:90vh;
}

/* start card */

#startCard{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

background:white;

padding:40px 60px;

font-size:28px;

text-align:center;

cursor:pointer;

border-radius:6px;

box-shadow:0 20px 40px rgba(0,0,0,.6);

z-index:2000;

}

#startCard span{
font-size:16px;
opacity:.6;
}

/* polaroid */

.polaroid{
background:white;
padding:10px 10px 40px 10px;
box-shadow:0 10px 25px rgba(0,0,0,.6);
}

.caption{
text-align:center;
font-size:12px;
margin-top:8px;
color:#333;
}

/* media items */

.media{
position:absolute;
top:50%;
left:50%;
transform-origin:center;
cursor:pointer;
will-change:transform;
display:none; /* hidden until start */
}

.media img,
.media video{
width:350px;
max-width:100%;
display:block;
pointer-events:none;
}

/* focused */

.media.focused{
z-index:1000;
}

.media.focused img,
.media.focused video{
max-width:75vw;
max-height:75vh;
width:auto;
height:auto;
}

/* APPH EFFECT */

#focusOverlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.6);

opacity:0;
pointer-events:none;

transition:opacity .4s;

z-index:500;
}

/* blur background */

.galleryBlur .media{
filter:blur(6px) brightness(.6);
}

.galleryBlur .media.focused{
filter:none;
}