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

 .video-cont{
     height: 100vh;
     width: 100vw;
     background-color: black;
 }

 video{
     width: 100%;
     height: 100%;
     border-radius: 40%;
 }

 .action-cont{
     height: 12rem;
     width: 5rem;
     /* background-color: aquamarine; */
        position: absolute;
    top: calc((100vh - 12rem) / 2);
    left:calc(100vw - 10rem);
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
    z-index: 2;
 }

 .record-btn{
     background-color: red;
     height: 3rem;
     width: 3rem;
    border-radius: 50%;
 }

 .action-cont>*{
     width: 100%;
     height: 5rem;
     border-radius: 50%;
     border: 5px solid white;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .capture-btn{
     background-color: white;
     height: 3rem;
     width: 3rem;
    border-radius: 50%;
 }

 .timer-cont{
     position: absolute;
    bottom: 10rem;
    color: white;
    /* font-size: 1rem; */
    left: 3rem;
    z-index: 2;
 }

 .timer{
     display: none;
 }


 .filter-cont{
     position:absolute;
    background-color: lightgray;
    height: 16rem;
    width: 5rem;
    top: calc((100vh - 16rem)/2);
    left:3rem;
    z-index: 2;
 }

 .filter{
     height:4rem;
     background-image: url(https://picsum.photos/seed/picsum/200/300);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: color-burn;
 }


 .orange{
     background-color: #ffa50052;
 }
 .brown{
     background-color:#a52a2a59 ;
 }
 .pink{
     background-color:#ffc0cb57 ;
 }
 .transparent{
     background-color: transparent;
 }

 .filter-layer{
     height: 100vh;
     width: 100vw;
     z-index: 1;
     /* background-color: #ffc0cb57; */
     position: absolute;
     top: 0;
     left: 0;
 }


/* animation */
 .scale-capture{
     animation-name :scale-capture;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
 }

 .scale-record{
     animation-name :scale-record;
    animation-iteration-count: infinite;
    animation-duration: 1s;
 }

 @keyframes scale-capture{
     0%{
         transform: scale(0.8);
     }
 
     100%{
         transform: scale(1.1);
     }
 }

 @keyframes scale-record{
     0%{
         transform: scale(0.8);
     }

     100%{
         transform: scale(1.1);
     }
 }
/* / */


 .material-icons{
     color:white;
     font-size: 3rem;
 }

 .gallery{
     position: absolute;
     bottom: 10rem;
    right: 6rem;
    z-index: 2;

 }
 .gallery:hover{
     cursor: pointer;
 }