body{margin:0;padding:0; min-height:100vh;
  display:grid; place-content:center; color:white; background-color:#0c322c}

svg{height:100vh; width:100vw;}

svg * { transform-box: fill-box;}


#climbing-geeko{
  transform-origin:bottom right;
  animation: branch-sway 5s infinite
}

@keyframes branch-sway{
  0%,100%{transform: rotate(-1deg)}
  50%{  transform: rotate(1deg)}
}

#gc-leaves-1{transform-origin:top right;}
#gc-leaves-2{transform-origin:50% 100%;}
#gc-leaves-1,
#gc-leaves-2{ animation: sway 6s infinite;}
@keyframes sway{50%{transform:rotate(10deg)}}



#gc-eyelids{animation: blink 2s infinite}
@keyframes blink{
  0%,25%{stroke-width: 0}
  50%{stroke-width: 120}
  75%,100%{stroke-width: 0}
}

#gc-pupil{animation: look 4s infinite}

@keyframes look{
    0%{transform:translate(-5%, -5%)}
    50%{transform:translate(10%, 85%)}
    100%{transform:translate(-5%, -5%)}
}