* {
  margin: 0;
  padding: 0;
}

html {
  background-color: blue;
  
}


div {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  animation: myfirst 2s ;
  animation-iteration-count: infinite;
}

main {
  width: 1270px;
  height: 1080px;
}


@keyframes myfirst {
  0%   {left: 0px; top: 0px;}
  25%  {left: 200px; top: 0px;}
  50%  {left: 200px; top: 200px;}
  75%  {left: 0px; top: 200px;}
  100% {left: 0px; top: 0px;}
}

.one {
  margin-left: 0vw;
}

.two {
  margin-left: 20vw;
}

.three {
  margin-left: 40vw;
}

.four {
  margin-left: 60vw;
}

.five {
  margin-left: 80vw;
}

.onee {
  margin-left: 0vw;
  margin-top: 15vh;
}

.twoo {
  margin-left: 20vw;
  margin-top: 15vh;
}

.threee {
  margin-left: 40vw;
  margin-top: 15vh;
}

.fourr {
  margin-left: 60vw;
  margin-top: 15vh;
}

.fivee {
  margin-left: 80vw;
  margin-top: 15vh;
}

.oneee {
  margin-left: 0vw;
  margin-top: 30vh;
}

.twooo {
  margin-left: 20vw;
  margin-top: 30vh;
}

.threeee {
  margin-left: 40vw;
  margin-top: 30vh;
}

.fourrr {
  margin-left: 60vw;
  margin-top: 30vh;
}

.fiveee {
  margin-left: 80vw;
  margin-top: 30vh;
}

.oneeee {
  margin-left: 0vw;
  margin-top: 45vh;
}

.twoooo {
  margin-left: 20vw;
  margin-top: 45vh;
}

.threeeee {
  margin-left: 40vw;
  margin-top: 45vh;
}

.fourrrr {
  margin-left: 60vw;
  margin-top: 45vh;
}

.fiveeee {
  margin-left: 80vw;
  margin-top: 45vh;
}

.oneeeee {
  margin-left: 0vw;
  margin-top: 60vh;
}

.twooooo {
  margin-left: 20vw;
  margin-top: 60vh;
}

.threeeeee {
  margin-left: 40vw;
  margin-top: 60vh;
}

.fourrrrr {
  margin-left: 60vw;
  margin-top: 60vh;
}

.fiveeeee {
  margin-left: 80vw;
  margin-top: 60vh;
}

.oneeeeee {
  margin-left: 0vw;
  margin-top: 75vh;
}

.twoooooo {
  margin-left: 20vw;
  margin-top: 75vh;
}

.threeeeeee {
  margin-left: 40vw;
  margin-top: 75vh;
}

.fourrrrrr {
  margin-left: 60vw;
  margin-top: 75vh;
}

.fiveeeeee {
  margin-left: 80vw;
  margin-top: 75vh;
}