.main {
      width: 600px;
      height: 600px;
	  background-color: #F2F7F2;
      border-color: #EEE;
      border-radius: 10px;
      border-width: 2px;

      display: grid;
      justify-content: center;
	  margin: auto;
      align-content: center;
    }

    .main > * {
      grid-column: 1;
      grid-row: 1;
    }

    .theCenterBox {
      width: 150px;
      height: 150px;
    }

    .item {
      animation: circleAround 15s linear infinite;
    }

    .main > * > img {
     /*animation: rotate 5s linear infinite;*/
    }

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

	@keyframes circleAround {
		0% {
			transform: rotate(0deg)
				translateX(170px) rotate(360deg);
		}

		100% {
			transform: rotate(360deg)
				translateX(170px) rotate(0deg);
		}
	}