* {
  box-sizing: border-box;
}
body {
  margin: 0;
  /* background-color: black; */
  background-color: yellow;
}

#video-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

video {
  height: 100%;
  width: 100%;
}

#record,
#capture {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  outline: none;
  border: none;
  position: fixed;
  border: 5px solid white;
  background: black;
  z-index: 3;
}
#record {
  top: 30vh;
  right: 20px;
}

#record div {
  height: 37%;
  width: 45%;
  margin: auto;
  margin-top: calc((100vh - 99.9vh) / 2);
  border-radius: 50%;
  background-color: red;
}

#record div:hover {
  height: 44%;
  width: 51%;
  margin: auto;
  margin-top: calc((100vh - 99.9vh) / 2);
  border-radius: 50%;
  background-color: red;
}

#capture {
  top: 45vh;
  right: 20px;
}

#capture div {
  height: 33%;
  width: 40%;
  margin: auto;
  margin-top: calc((100vh - 99.9vh) / 2);
  border-radius: 50%;
  background-color: white;
}

#capture div:hover {
  height: 40%;
  width: 48%;
  margin: auto;
  margin-top: calc((100vh - 99.9vh) / 2);
  border-radius: 50%;
  background-color: white;
}

.record-animation {
  animation: zoom-in-out 0.8s infinite;
}

.capture-animation {
  animation: zoom-in-out 1s;
}

#gallery {
  position: fixed;
  z-index: 3;
  top: 30rem;
  right: 1.5rem;
  height: 4.4rem;
  width: 4.4rem;
  border-radius: 14%;
  color: rgba(255, 255, 255, 0.932);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 4.2rem;
  background-color: red;
}

#gallery:hover {
  color: white;

}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.filter-container {
  z-index: 3;   /*more the z-index more the height of the element*/
  width: 6rem;
  height: 60vh;
  position: fixed;
  top: 20vh;
  left: 20px;
}

.filter {
  width: 100%;
  height: calc(100% / 6);
  border: 1px solid black;
  background-image: url("filter.jpg");
  background-size: cover;
  /* background-color: #eb4d4b; */
  /* background-blend-mode: luminosity;  merge back color and back img, works much better in inline */
}

.filter-div {
  height: 100vh;
  z-index: 0;
  width: 100vw;
  /* background-color: red;  */
  position: fixed;
  top: 0;
}

.zoom-container {
  height: 22vh;
  width: 5rem;
  position: fixed;
  top: 6vh;
  right: 25px;
  border: 4px solid rgb(247, 236, 86);
  border-radius: 15px;
  z-index: 3;
}

.zoom-in:hover,
.zoom-out:hover {
  background-color: rgba(247, 236, 86, 0.849);
}

.zoom-container div {
  height: 50%;
  width: 100%;
  color: white;
  background-color: rgb(247, 236, 86);
  font-size: 4rem;
  text-align: center;
  font-weight: bold;
}

@media (max-width: 1035px) {
  /* big landscape tablets, laptops, and desktops */
  .zoom-container {
    height: 20vh;
    width: 5rem;
    top: 11vh;
  }

  #record {
    top: 35vh;
  }

  #capture{
      top: 50vh;
  }

  #gallery {
    top: 30rem;
    height: 5.4rem;
  }
}

@media (max-width: 801px) {
  .zoom-container {
    height: 18vh;
    width: 4rem;
    top: 19vh;
  }

  #record,
  #capture {
    height: 4rem;
    width: 4rem;
  }

  #record {
    top: 40vh;
  }

  #capture{
      top: 55vh;
  }

  #gallery {
    top: 30rem;
    height: 5.4rem;
    right: 1rem;
  }
  /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (max-width: 600px) {
  /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  .filter-container {
    top: 30vh;
  }
  .filter {
    height: calc(100% / 9);
  }

  .zoom-container {
    top: 24vh;
    right: 1.4rem;
}

#record {
  top: 18rem;
}

  #capture {
    top: 24rem;
  }


  #gallery {
      height: 5rem;
      width: 4rem;
    top: 30rem;
  }
}

@media (max-width: 480px) {
    .filter-container {
        top: 38vh;
        left: 0.2rem;
        width: 3rem;
    }
    .filter {
        height: calc(100% / 15);
      }

      #gallery {
        padding: 0;
        font-size: 1rem;
        height: 4rem;
        width: 4rem;
        top: 33rem;
      }

      #record {
        top: 33rem;
        right: 30%;
    }

    #capture{
        top: 33rem;
        left: 28%;
    }

    .zoom-container {
        height: 18vh;
        width: 3rem;
        top: 33vh;
        right: 0.2rem;
      }

      .zoom-container div {
        font-size: 2.5rem;
      }
  /* smartphones, Android phones, landscape iPhone */
}