@charset "utf-8";

body {
  text-align: center;
}

.flex-row {
  display: flex;
  justify-content: center;
}

#video {
  border: 1px solid black;
  width: 320px;
  height: 240px;
}

#photo {
  border: 1px solid black;
  width: 320px;
  height: 240px;
}

#movie {
  border: 1px solid black;
  width: 320px;
  height: 240px;
}

#shoot,
#recode-start,
#recode-stop,
#change {
  width: 120px;
  margin: 5px auto;
  border: solid 1px skyblue;
  border-radius: 30px;
  background-color: skyblue;
}

#shoot:hover,
#recode-start:hover,
#recode-stop:hover,
#change:hover {
  opacity: 0.7;
}

.hidd {
  display: none;
}

#recode-stop {
  animation: recodding 2s infinite;
}

p.ret-element {
  margin-top: 0;
}

@keyframes recodding {
  0% {
    opacity: 1;
    /* border: solid 1px skyblue;
    background-color: skyblue; */
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@media (width <=1000px) {
  .flex-row {
    display: block;
  }
}