body{
margin:0;
}

.video-slider{
position:relative;
width:100%;
height:99vh;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:opacity 0.8s ease;
}

.slide.active{
opacity:1;
}

.slide video{
width:100%;
height:100%;
object-fit:cover;
}

/* navigation buttons */

button{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
background:rgba(0,0,0,0.4);
color:white;
border:none;
padding:10px 20px;
cursor:pointer;
z-index:10;
}

.prev{
left:20px;
}

.next{
right:20px;
}

.nav-btn{

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

width:28px;
height:28px;

border-radius:50%;

border:1px solid rgba(255,255,255,0.6);

background:transparent;

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

cursor:pointer;

padding:0;

}

/* arrow icon */

.nav-btn svg{

width:12px;
height:12px;

stroke:white;
stroke-width:2;

fill:none;

}

/* positions */

.prev{
left:20px;
}

.next{
right:20px;
}

/* hover */

.nav-btn:hover{
background:rgba(255,255,255,0.15);
}