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

html{
   font-size: 62.5%;
}

.container .heading{
   font-size: 3rem;
   margin: 2rem 0;
   text-transform: capitalize;
   color: var(purple);
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   letter-spacing: .2rem;
   text-align: center;
   text-shadow: 0 .3rem .5rem rgba(red, green, blue, alpha);


}


.video-container{

   display: flex;
   justify-content: center;
   flex-wrap: wrap;

}

.video-container .video{
   height: 15rem;
   width: 25rem;
   margin: 2rem;
   box-shadow: 0 .5rem 1rem rgba(red, green, blue, alpha);
   border-radius: 1rem;


}

.video-container .video video{
   height: 100%;
   width: 100%;
   object-fit: cover;
   outline: none;
   border: none;
   cursor: pointer;
}

.video-container .video video:hover{
   transition: .2s linear;
   transform: scale(1.3);
}

.video-container .video .active{
   position: fixed;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   height: auto;
   width: auto;
   box-shadow: 0 0 0 100vh rgba(red, green, blue, alpha);
   z-index: 1;



}

.video-container .video .active:hover{

   transition: none;
   transform: translate(-50%, -50%) scale(1);

}


.btn4{
   display: inline-block;
   background-color: white;
   text-decoration: none;
   padding: 10px 20px;
   font-size: 20px;
   color:black;
   border-radius: 20px;
   text-decoration: none;
   margin-bottom: 10px;
   
}


.btn5 {

   display: inline-block;
   background-color: white;
   text-decoration: none;
   padding: 10px 20px;
   font-size: 20px;
   color:black;
   border-radius: 20px;
   text-decoration: none;
   margin-bottom: 10px;
   
} 

.btn6{

   display: inline-block;
   background-color:white;
   text-decoration: none;
   padding: 10px 20px;
   font-size: 20px;
   color:black;
   border-radius: 20px;
   text-decoration: none;
   margin-bottom: 10px;
   
   
}