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

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

#animation-container {
    font-size: 1vw;
    margin: 5%;
  	width: 25em;
  	height: 25em;
    border-radius: 1.2em;
  	overflow: hidden;
    animation-name: wiggle;
    animation-iteration-count: infinite;
    animation-duration: 1.2s;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.bar {
  	display: block;
  	height: 5em;
  	border-style: solid;
  	border-width: 0 25em;
  	animation-name: slide;
  	animation-iteration-count: infinite;
  	animation-duration: 7s;
  	animation-fill-mode: both;
}

#animation-container .bar:nth-child(1) {
  	border-left-color: hsl(300, 100%, 50%);
  	border-right-color: hsl(228, 100%, 50%);
}
#animation-container .bar:nth-child(2) {
  	border-left-color: hsl(300, 100%, 46%);
  	border-right-color: hsl(228, 100%, 46%);
    animation-delay: 0.4s;
}
#animation-container .bar:nth-child(3) {
  	border-left-color: hsl(300, 100%, 42%);
  	border-right-color: hsl(228, 100%, 42%);
    animation-delay: 0.8s;
}
#animation-container .bar:nth-child(4) {
  	border-left-color: hsl(300, 100%, 38%);
  	border-right-color: hsl(228, 100%, 38%);
    animation-delay: 1.2s;
}
#animation-container .bar:nth-child(5) {
  	border-left-color: hsl(300, 100%, 34%);
  	border-right-color: hsl(228, 100%, 34%);
    animation-delay: 1.6s;
}

@keyframes slide {
  	0% {
    	transform: translateX(-50%);
  	}
  	20% {
    	transform: translateX(0%);
  	}
    50% {
      	transform: translateX(0%);
    }
    70% {
      	transform: translateX(-50%);
    }
    100% {
      	transform: translate(-50%);
    }
}

@keyframes wiggle {
  	from {
    	transform: translateY(-7px);
  	}
  	to {
    	transform: translateY(7px);
  	}
}