.video-cont{
    height: 100vh;
    width: 100vw;
    background-color: black;
}
video{
    width: 100%;
    height: 99%;
}
.action-cont{
    height: 13rem;
    width: 5rem;
    position: absolute;
    top: calc( ( 100vh - 13rem ) / 2 );
    right: 4rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}
.action-cont > * { 
    width:100%;
    height: 5rem;
    border-radius: 50%;
    border: 5px solid ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.record-btn{
    background-color:white;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    cursor: pointer;
}
.capture-btn {
    background-color: white;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    cursor: pointer;
}
.action-cont i{
    height: 4rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}
.scale-record{
    animation-name: scale-record;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}
@keyframes scale-record{
    0%{
       transform: scale(0.8);
    }
    100%{
       transform: scale(1.1);
    }
}
.scale-capture{
    animation-name: scale-capture;
    animation-iteration-count:1;
    animation-duration: 1s;
}
@keyframes scale-capture{
    0%{
       transform: scale(0.8);
    }
    100%{
       transform: scale(1.1);
    }
}
.timer-cont{
    position: absolute;
    bottom: 7rem;
    left:5rem;
    color: rgb(123, 159, 159);
    font-size: 0.7rem;
}
.timer{
    display: none;
}
.filter-cont{
    position: absolute;
    top: calc((100vh - 16rem ) / 2);
    left: 3rem;
    height: 16rem;
    width: 5rem;
    z-index: 5;
}
.filter{
    height: 4rem;
    background-image: url("https://picsum.photos/seed/picsum/200/300");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    cursor: pointer;
    
}
.orange{
    background-color: #ffa50052;   
}
.brown{
    background-color: #a52a2a59;
}
.pink{
    background-color: #ffc0cb57;
}
.transparent{
    background-color: transparent;
}
.filter-layer{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    /* background-color: #ffc0cb57; */
    z-index: 1;
}
.material-icons{
    color: white;
    font-size: 3rem;
}
.gallery{
    position: absolute;
    right: 5.5rem;
    bottom: 4rem;
    z-index: 2;
    cursor: pointer;
}

/* .btn{
    font-size: 1.3rem;
    color: white;
    position: absolute;
    top: 7rem;
    right: 6rem;
    cursor: pointer;
}

.toast{
    color: white;
    font-size: 1.5rem;
    position: fixed;
    top: 6.7rem;
    right: 10rem;
    display: none;
} */


  /* @media only screen and (max-width: 426px) {
    .action-cont{      
        width: 4.5rem;
        position: absolute;
        top: calc( ( 100vh - 5rem ) );
        right: 10rem;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 3rem;
        z-index: 2;
    }
} */