*{
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;

color:white;

font-size:48px;
font-weight:200;

cursor:pointer;

opacity:0.45;
transition:0.3s;

padding:20px;
}

.nav:hover{
opacity:1;
}

.prev{
left:2%;
}

.next{
right:2%;
}

/* MOBILE */

@media(max-width:600px){

.nav{
font-size:36px;
}

}