<div class="container">
	<div class="box--container">
		<div class="box box--1">
			<div class="circle circle--1"></div>
		</div>

		<div class="box box--2">
			<div class="circle circle--2"></div>
		</div>
	</div>
</div>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
}

body {
	background: #e2e2e2;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	background: #0c87da;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, .2), 2px 2px 2px rgba(0, 0, 0, .1), -2px -2px 2px rgba(0, 0, 0, .1);
}

.container .box--container {
	width: 50%;
	height: 80%;
	display: grid;
	grid-template-rows: 1fr 1fr;
	animation: rotate 1s ease infinite;
}
.container .box--container .box {
	/* background: #fff; */
	/* overflow: hidden; */
	position: relative;
}
.container .box--container .box .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 50px;
	width: 50px;
	background: #222;
	border-radius: 50%;
}
.container .box--container .box .circle--1 {
	animation: circle--1 ease 1200ms infinite;
	/* animation: rotate 1s ease infinite; */
}
.container .box--container .box .circle--2 {
	background: #fff;
	animation: circle--2 ease 1200ms infinite;
}
@keyframes circle--1 {
	0% {
		top: 50%;
	}
	50% {
		top: 120%;
	}
	100% {
		top: 50%;
	}
}
@keyframes circle--2 {
	0% {
		top: 50%;
	}
	50% {
		top: -50%;
	}
	100% {
		top: 50%;
	}
}

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


.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
}
a{
	margin: 0 10px;
	color: #1d81af;
	font-size: 1.5rem;
	transition: all 400ms ease;
}

a:hover{
	color: #222;
}