*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-transform:capitalize;
    font-family:big john;
}


.btn{
    text-decoration:none;
    padding:15px 20px;
    background-color:rgb(63, 6, 68);
    color:#fff;
    border-radius:10px;
    font-family:big john;
}


.video-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    background-color:rgba(250,120,0,0.1);
    display:flex;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:all 0.3s;
}
.video-container .close{
    position:absolute;
    top:10%;
    right:25px;
    font-size:10px;
    cursor:pointer;
}
.video-container video{
    width:60%;
    max-width:600px;
    transform:scale(0);
    box-shadow:0 20px 20px rgba(0,0,0,0.2);
    outline:none;
    transition: all 0.3s;
}

.video-container.show{
    pointer-events:all;
    opacity:1;
}

.video-container.show video{
    transform:scale(1);
}



/*
.container{
    position:relative;
    min-height:100vh;
    background:plum;
}
.container .video-container{
    display:flex;
    flex-wrap:wrap;

}
.container .video-container .video{
    height:250px;
    width:350px;
    border:5px solid #fff;
    border-radius:5px;
    box-shadow:0 5px 15px rgba(0,0,0,.7);
    cursor:pointer;
    overflow:hidden;
}


.container .video-container .video video{
    height:50%;
    width:50%;
    object-fit:cover;
    transition:.2s linear;
}

.container .popup-video{
    position:fixed;
    top:0;left:0;
    z-index:100;
    background:rgba(0,0,0,.8);
}
video{
    position:absolute;
    top:50%; left: 50%;
    transform:translate(-50%,-50%);
    width:750px;
    border-radius:5px;
    border:3px solid #fff;
    object-fit:cover;
}
*/