html {
  	box-sizing: border-box;
}
* {
  	box-sizing: inherit;
}

body {
  	display: flex;
  	flex-direction: column;
  	align-items: center;    
}

#animation-container {
    position: relative;
    font-size: 1vw;
    margin: 5%;
  	width: 13em;
  	height: 13em;
    border-radius: 1.2em;
}

.wrapper {
  	position: absolute;
  	display: flex;
    justify-content: center;
  	width: 100%;
  	height: 100%;
}
.dot-container {
  	display: block;
  	width: 2em;
  	height: 100%;
  	animation-name: jump;
  	animation-iteration-count: infinite;
  	animation-duration: 3.4s;
  	animation-delay: inherit;
}
.dot {
  	display: block;
  	width: 2em;
  	height: 2em;
  	border-radius: 1em;
  	background-color: black;
}

.wrapper:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: 0s;
}
.wrapper:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: 0.15s;
}
.wrapper:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: 0.3s;
}
.wrapper:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: 0.45s;
}
.wrapper:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: 0.6s;
}
.wrapper:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: 0.75s;
}
.wrapper:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: 0.9s;
}
.wrapper:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: 1.05s;
}
.wrapper:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: 1.2s;
}
.wrapper:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: 1.35s;
}
.wrapper:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: 1.5s;
}
.wrapper:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 1.65s;
}

@keyframes jump {
  	0% {
    	transform: translateY(0em);
  	}
  	20% {
    	transform: translateY(-2em);
  	}
  	30% {
    	transform: translateY(0.6em);
  	}

}