*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#2b2b2b;
overflow:hidden;
font-family:"Century Gothic", Arial, sans-serif;
}

/* VIEWER */

.viewer{
width:100vw;
height:100vh;

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

position:relative;
}

/* IMAGE */

#mainImage{
max-width:94vw;
max-height:94vh;

object-fit:contain;

transition:opacity 0.4s ease;
}

/* NAVIGATION */

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);

background:none;
border:none;

cursor:pointer;

opacity:0.45;
transition:0.3s;

padding:1rem;

z-index:15;
}

.nav img{
width:42px;
display:block;
}

.nav:hover{
opacity:1;
}

.prev{
left:2%;
}

.next{
right:2%;
}

/* CLOSE BUTTON */

.closeViewer{
position:absolute;

top:2rem;
right:3.5%;

width:22px;

cursor:pointer;

opacity:0.75;
transition:0.3s;

z-index:20;
}

.closeViewer:hover{
opacity:1;
}

/* MOBILE */

@media(max-width:600px){

.nav img{
width:30px;
}

.closeViewer{
top:1.2rem;
right:3%;
width:20px;
}

}