:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--lightBlue);
}
.cradle {
  display: flex;
  border-top: 10px solid white;
}
.cradle span {
  display: block;
  width: 3px;
  height: 300px;
  background-color: white;
  margin: 0 29px;
  position: relative;
  transform-origin: top;
}
.cradle span:before {
  content: '';
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  background-color: white;
  transform: translateX(-50%);
}
.cradle span:first-child {
  animation: left-arm 2s ease 2
}
@keyframes left-arm {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(60deg);}
  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
.cradle span:last-child {
  animation: right-arm 2s ease 2;
  animation-delay: 1s;
}
@keyframes right-arm {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(-60deg);}
  50% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}