:root {
  font-family: 'nickel';
}

.hand {
  position: fixed;
  z-index: 1;
}


.container {
  position: relative; 
  width: 100vw; 
  height: 100vh;
  overflow: hidden;
  transform-origin: center; 
  animation: my-super-slant 2s infinite  ease-in-out;
}



.corner {
  position: absolute;
  font-size: 200px;
  padding: 10px ;
  background-color: #e000ff;
}

.top-left {
  top: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg) translate(100%, 0);
  transform-origin: top right; 

}

.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg) translate(0, 100%);
  transform-origin: bottom left; 
}

.bottom-right {
  bottom: 0;
  right: 0;
}


@keyframes my-super-slant{
  0% {transform: rotateZ(0deg), translateY(0%);  width: 110vw; height: 100vh;}
  50% {  transform: rotateZ(90deg) translateY(-50%) ; width: 50vw; height: 95vh;}
  100% { transform: rotateZ(90deg) translateY(-50%) ; width: 50vw; height: 95vh;}
}