text { font-family: sans-serif;}

body{ background-color: #dfbf9f;}

svg {
  display: block;
  margin: 0 auto;
  width: 461px;
}
            
@keyframes mover {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(180deg);}
}

#cv {
  position: relative;
  margin:0 auto;
  width: 0px;
  height: 0px;
}

#ventana {
  visibility: visible;
  box-sizing: border-box;
  position: absolute;
  height: 79px;
  width: 43.5px;
  top: 106px;
  left: -43px;
  border-top-left-radius: 30px;
  background-color: #d3d3d3;
  border: 7px solid #aca7a7;
  padding-top: 21.7px;
  padding-left: 3px;
  transform-origin: top left;
}

#ventana2 {
  visibility: visible;
  box-sizing: border-box;
  position: absolute;
  height: 79px;
  width: 43.5px;
  top: 106px;
  border-top-right-radius: 30px;
  border: 7px solid #aca7a7;
  background-color: #d3d3d3;
  padding-top: 21.7px;
  padding-left: 4px;
  transform: rotateY(0deg);
  transform-origin: top right;

}

.animarV {
  animation-name: mover;
  animation-duration: 0.62s;
  animation-direction: alternate;
  animation-iteration-count: 0;
}

#ventana div, #ventana2 div {
  background-color: #caa78b;
  height: 4px;
  width: 23px;
  margin-bottom: 5px;
}


.animarP {
  animation-name: m;
  animation-duration: 0.62s;
  animation-direction: alternate;
  animation-timing-function: ease-in;
  animation-iteration-count: 0;
}

@keyframes m {
  from {transform:matrix(1.245565, 0, 0, 0.987525, 121.905502, -126.691818);}
  to {transform:matrix(2.58983, 0, 0, 2.028771, 5.137805, -408.002167); }  } 

#click {
  display: block;
  position: absolute;
  top: 300px;
  left: 270px;
  background:rgb(204, 153, 153);
  width: 60px;
  height: 40px;
  font-weight: bold;
  border-width: 5px;
}

#click:hover{
  background: rgb(204, 204, 153);
}