@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes moverotate {
  from {
    transform: rotate(0deg) translateY(40vh);
  }

  to {
    transform: rotate(360deg) translateY(60vh);
  }
}

@keyframes zoomInOut {
  0% {
    transform: scale(0.2);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(0.2);
  }
}

@keyframes move {
  from {
    transform: translateX(0vw);
  }

  to {
    transform: translateX(100vw);
  }
}

#name {
  font-size: 20vw;
  color: red;
  animation: rotate 2s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

#gobul {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: zoomInOut 2s infinite;
  z-index: 2;
}

#anil {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

#onat {
  width: 15%;
  height: 28%;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  animation: move 13s infinite;
  animation-direction: alternate;
}

#mustafa {
  width: 25%;
  height: 35%;
  position: absolute;
  z-index: 6;
  top: 0;
  left: 35%;
  animation: moverotate 3.5s infinite;
}

#spiderman {
  position: absolute;
  z-index: 5;
  width: 50%;
  left: 50%;
  display: none;
}

#button {
  position: absolute;
  z-index: 10;
  font-size: 3em;
  left: 60%;
  top: 20%;
}