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

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

/* VIEWER */

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

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

padding:2rem;
}

/* VIDEO */

#mainVideo{
max-width:100%;
max-height:100%;

object-fit:contain;
}

/* CLOSE */

.closeButton{
position:fixed;

top:4%;
right:3%;

z-index:100;
}

.closeButton img{
width:28px;

opacity:0.75;
cursor:pointer;

transition:
opacity 0.3s ease,
transform 0.3s ease;
}

.closeButton img:hover{
opacity:1;
transform:translateY(-1px);
}

/* SETAS */

.arrow{
position:fixed;

top:50%;
transform:translateY(-50%);

width:42px;

cursor:pointer;

opacity:0.75;

transition:
opacity 0.3s ease,
transform 0.3s ease;

z-index:100;
}

.arrow:hover{
opacity:1;
}

.arrow.left{
left:2%;
}

.arrow.right{
right:3%;
}

/* TABLET */

@media(max-width:900px){

.closeButton img{
width:26px;
}

}

/* MOBILE */

@media(max-width:600px){

.viewer{
padding:1rem;
}

.closeButton img{
width:24px;
}

.arrow{
width:30px;
}

}