*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
.video-container {
    height: 100vh;
    width: 100vw;
    background: rgb(211, 211, 255);
    /* background-color: blue; */
    display: flex;
    position: fixed;
    border: 10px solid black;
}
video {
    height: 100%;
    width: 100%;
    /* background-color: black; */
    /* background-color: white; */
}
.controls {
    position: absolute;
    top: 28vh;
    right: 5vw;
    height: 302px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 154px;
    z-index: 3;
    align-items: center;
    padding: 0px;
    margin: 0px;
}
.controls>div {
    width: 50%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#record {
    border: 5px solid black;
    border-radius: 50%;
}
.inner-record {
    height: 70%;
    width: 70%;
    background: red;
    border-radius: 50%;
    cursor: pointer;
}
#capture {
    border: 5px solid black;
    border-radius: 50%;
}
.inner-capture {
    height: 70%;
    width: 70%;
    background: black;
    border-radius: 50%;
    cursor: pointer;
}
.animate-record{
    animation-name: scaleInScaleOut;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.animate-capture{
    animation-name: scaleInScaleOut;
    animation-duration: 300ms;
    animation-iteration-count: 1;
}
.filters{
    position: absolute;
    top: 10vh;
    border: 2px solid black;
    left: 10vh;
    z-index: 3;
}
.filter{
    height: 14vh;
    width: 7vw;
    border: 2px solid black;
    background-image: url("https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-size: cover;
    background-blend-mode: soft-light;
}
.filter-div {
    position: absolute;
    top: 0px;
    height: 100vh;
    width: 100vw;
}
.zoom {
    flex-direction: column;
    /* border: 1px solid white; */
}

.zoom div {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: black; */
    width: 100%;
    
}

.fas {
    font-size: 2rem;
    color: black;

}
.gallery-btn{
    position: fixed;
    background: black;
    color: white;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;
    top: 80vh;
    left: 91vw;
    border: 6px solid green;
    cursor: pointer;
    z-index: 3;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.gallery-btn:hover{
    transform: scale(1.2);
    transition: 500ms;
}
.zoom div :hover {
    transform: scale(1.2);
}
@keyframes scaleInScaleOut{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}