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

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

.action-cont {
    height: 12rem;
    width: 5rem;
    /* background-color: lightblue; */
    position: absolute;
    top: calc( ( 100vh - 12rem ) / 2 );
    right: 5rem;
    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 white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.record-btn {
    background-color: red;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}
.capture-btn {
    background-color: white;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

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

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

.timer-cont {
    position: absolute;
    bottom: 10rem;
    left: 5rem;
    color: aqua;
    font-size: 0.8rem;
}
.timer {
    display: none;
}

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

.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;
}

.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;
    z-index: 1;
}

.material-icons {
    color: white;
    font-size: 3rem;
}
.gallery {
    position: absolute;
    right: 6rem;
    bottom: 7rem;
    z-index: 2;
}
.gallery:hover {
    cursor: pointer;
}