@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
}

.wrap{
  width: 100%;
  height: 100vh;
  background-color: #009;
  position: relative;
}

#cam{
  width: 300px;
  height: 200px;
  background-color: #ee0099;
  border-radius: 150px / 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
}

#shaft-A{
  width: 50px;
  height: 200px;
  background-color: #d7f836;
  border-radius: 25px / 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  transform: translate(0px, -200px);
}

#shaft-B{
  width: 200px;
  height: 50px;
  background-color: #d7f836;
  border-radius: 50px / 25px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  transform: translate(250px, 0px);
}

#shaft-C{
  width: 50px;
  height: 200px;
  background-color: #d7f836;
  border-radius: 25px / 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  transform: translate(0px, 200px);
}

#shaft-D{
  width: 200px;
  height: 50px;
  background-color: #d7f836;
  border-radius: 50px / 25px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
  transform: translate(-250px, 0px);
}

#axis-X{
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50vh;
  z-index: 0;
  transform: translate(0px, -1px);
}

#axis-Y{
  width: 2px;
  height: 100vh;
  background-color: #fff;
  margin: 0 auto;
  z-index: 0;
  transform: translate(-1px, 0px);
}