* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}
body {
	min-height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;

	background: rgb(17, 17, 17);
}
.frame {
	width: 18rem;
	height: 18rem;

	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
}
.frame .rotate {
	width: 30rem;
	height: 15rem;

	background: #00ff88;

	position: absolute;

	animation: hi 4s infinite ease-in-out;
}

.frame .cab {
	width: 284px;
	height: 284px;

	background: rgb(17, 17, 17);

	z-index: 1;

	display: flex;
	justify-content: center;
	align-items: center;
}

.frame .cab .area {
	width: 256px;
	height: 256px;

	background: rgb(17, 17, 17);

	z-index: 2;

	display: flex;
	justify-content: center;
	align-items: center;

	border: 1px solid #00ff88;
}

.frame .cab .area img {
	width: 6rem;
}

@keyframes hi {
	100% {
		transform: rotate(-360deg);
	}
}