.container
	.box.four
		.clock
			.hour__hands

	.box.zero
		.clock
			.hour__hands

	.box.eight
		.clock
			.hour__hands

p.error__msg
	| Request Timed Out

$markings: #333
$minute__hand: #ff6a00
$hour__hand: #943e01

*,*:after,*:before
	box-sizing:border-box

body 
	padding: 0
	margin: 0 auto
	display: flex
	justify-content: center
	align-items: center
	height: 100vh
	width: 68%
	background: radial-gradient(farthest-corner at top, #ff6a00, #943e01)
	font: 1.4rem "Josefin Sans", sans-serif
	color: white

.container
	display: flex
	justify-content: space-around
	align-items: center
	width: 100vw
	
.box
	position: relative
	transition: all 0.5s
	background-color: #f8f8f8
	display: flex
	justify-content: center
	align-items: center
	flex-direction: row
	box-shadow: 0 -5px 20px 0 rgba(white, 0.5), 0 15px 20px 0px rgba(black, 0.5), inset 0 5px 10px 0px rgba(black, 0.5)
	height: 10rem
	width:  10rem
	border-radius: 50%
	z-index: 1
		
	&::after
		font-size: 6em
		color: rgba(black, 0.2)
		position: absolute
		transform: translateX(-50%)
		top: 15%
		left: 50%
		z-index: -2

.clock
	display: flex
	justify-content: center
	align-items: center
	position: relative
	box-shadow: inset 0 0 0 5px #111, 0 0 0 1px #333
	height: 100%
	width: 100%
	border-radius: 50%
	
	&::before, &::after
		content: ''
		position: absolute
		height: 5px
		background: linear-gradient(to right, $markings 10%, transparent 10%, transparent 90%, $markings 90%)
		width: 94%
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)

	&::after
		transform: translate(-50%, -50%) rotate(90deg)

	.hour__hands
		position: relative
		height: 8px
		width:  8px
		border-radius: 50%
		background-color: #333
		
		&::after,
		&::before
			content: ''
			transition: all 0.5s
			position: absolute
			background: $hour__hand
			width: 0.3rem
			height: 2.5rem
			transform-origin: bottom
			transform: translateX(-50%) rotate(60deg)
			bottom: 40%
			bottom: 50%
			left: 50%
			z-index: -1

		&::before
			background: $minute__hand
			width: 0.3rem
			height: 3.5rem
			transform: translateX(-50%) rotate(0deg)

p.error__msg
	top: 14%	
	position: absolute
	text-shadow: 0 2px 1px #555
	
.four
	&::after
		content: '4'
		left: 47%
		
	.hour__hands
		&::after
			transform: rotate(120deg)

.zero
	background-color: #000
	.clock
		&::after, &::before
			background: linear-gradient(to right, white 10%, transparent 10%, transparent 90%, white 90%)
		
		&::after
			animation: spin__a 3s infinite cubic-bezier(1,-0.5,0.5,1) both
		&::before
			top: 49%
			animation: spin__b 3s infinite cubic-bezier(0.5,-0.5,0.5,0.5) both

		.hour__hands
			background-color: #111
			border: 2.5rem dashed #222
			&::after, 
			&::before
				animation: spin__b 3s infinite cubic-bezier(0.5,-0.5,0.5,0.5)
				display: none

@keyframes spin__a
	from
		transform: translateX(-50%) rotate(0deg)
	50%
		transform: translateX(-50%) rotate(180deg)
	to
		transform: translateX(-50%) rotate(360deg)

@keyframes spin__b
	from
		transform: translateX(-50%) rotate(-90deg)
	50%
		transform: translateX(-50%) rotate(90deg)
	to
		transform: translateX(-50%) rotate(-90deg)
		

.eight
	&::after
		content: '8'

	.hour__hands
		&::after
			transform: rotate(240deg)
	
@media (max-width: 992px)
	body
		width: 60%
	.box
		transform: scale(0.8)

@media (max-width: 540px)
	body
		width: 100%
	
	.container
		align-items: center
		flex-direction: column
		width: 100%
	
	p.error__msg
		top: 0%