* {
	box-sizing: border-box;
}

html,
body {
	width: 360px;
	height: 360px;
	margin: 0;
	padding: 0;
	border-radius: 100%;
	overflow: hidden;
}

#page {
	background-image: url("./../assets/background.jpg");
	background-size: cover;
	background-position: 50%;
	color: #fff;
	height: 100%;
	position: relative;
	width: 100%;
	font-size: 40px;
	position: relative;
}

#page #log {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
}

.circle-container .app-icon-container {
	width: 360px;
	height: 360px;
	position: absolute;
    top: 0;
    left: 0;
	pointer-events: none;

	transform: rotate(0deg);
	transition: transform 300ms linear;
}

.circle-container .app-icon-container.hidden {
    display: none;
}

.circle-container .app-icon-container .app-icon {
	position: absolute;
	background-color: #FFF;
	padding: 8px;
	border-radius: 100%;
	max-width: 64px;
	max-height: 64px;
	width: 100%;
	height: 100%;
	padding: 8px;
	top: calc(46px - 32px);
	left: calc(180px - 32px);
	pointer-events: all;

	transform: rotate(0deg);
	transition: transform 300ms linear, box-shadow 300ms linear;
}

@keyframes loadingAnimation {
	0% { opacity: 0.3; }
	50% { opacity: 0.7; }
	100% { opacity: 0.3; }
}

.circle-container .app-icon-container .app-icon.active {
    box-shadow: 0px 0px 40px #FF0000, 0px 0px 50px #FF0000, 0px 0px 0px #FF0000;
}

.circle-container .app-icon-container .app-icon.loading {
	animation: loadingAnimation 2s infinite;
}

.circle-container .app-icon-container .app-icon.transparent {
	background-color: transparent;
}

.circle-container .app-icon-container:nth-of-type(1).animate { transform: rotate(0deg) }
.circle-container .app-icon-container:nth-of-type(1).animate .app-icon { transform: rotate(-0deg) }

.circle-container .app-icon-container:nth-of-type(2).animate { transform: rotate(45deg) }
.circle-container .app-icon-container:nth-of-type(2).animate .app-icon { transform: rotate(-45deg) }

.circle-container .app-icon-container:nth-of-type(3).animate { transform: rotate(90deg) }
.circle-container .app-icon-container:nth-of-type(3).animate .app-icon { transform: rotate(-90deg) }

.circle-container .app-icon-container:nth-of-type(4).animate { transform: rotate(135deg) }
.circle-container .app-icon-container:nth-of-type(4).animate .app-icon { transform: rotate(-135deg) }

.circle-container .app-icon-container:nth-of-type(5).animate { transform: rotate(180deg) }
.circle-container .app-icon-container:nth-of-type(5).animate .app-icon { transform: rotate(-180deg) }

.circle-container .app-icon-container:nth-of-type(6).animate { transform: rotate(225deg) }
.circle-container .app-icon-container:nth-of-type(6).animate .app-icon { transform: rotate(-225deg) }

.circle-container .app-icon-container:nth-of-type(7).animate { transform: rotate(270deg) }
.circle-container .app-icon-container:nth-of-type(7).animate .app-icon { transform: rotate(-270deg) }

.circle-container .app-icon-container:nth-of-type(8).animate { transform: rotate(315deg) }
.circle-container .app-icon-container:nth-of-type(8).animate .app-icon { transform: rotate(-315deg) }