*,
*:before,
*:after {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: whitesmoke;
	display: flex;
	overflow: hidden;
	height: 100vh;
}

.fitbit canvas,
.fitbit .sr,
.fitbit .logo {
	position: absolute;
}

.fitbit canvas {
	/*background: #08f;
	*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-user-select: none;
	user-select: none;
	z-index: 2;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

.fitbit {
	background:
		/* Top */
		linear-gradient(-25deg, transparent 24%, #004 25%, #002 26%, #004 28%, #002 30%, #004 32%, #002 34%, #004 36%, #002 38%, #004 40%, #002 42%, #004 44%, #002 46%, #004 48%, #002 50%, #004 52%, #002 54%, #004 56%, #002 58%, #004 60%, #002 62%, #004 64%, #002 66%, #004 68%, #002 70%, #004 72%, #002 74%,
		transparent 76%) 50% 0 / 80% 23%,
		repeating-linear-gradient(#004, #003 0.4em) 50% 0 / 80% 12%,
		repeating-linear-gradient(#004, #003 0.5em) 50% 0 / 80% 24.7%,
		radial-gradient(200% 200% at 50% 100%, #127 25%, transparent 50%) 0 0 / 100% 14%,
		linear-gradient(-40deg, #004 89%, transparent 89%) 0 0 / 10% 14%,
		linear-gradient(155deg, #127 91%, #005 91%, #005 93%, transparent 93%) 0 14% / 1em 14%,
		linear-gradient(#004 50%, #127 50%, #127 99%, #005 99%) 50% 0 / 80% 25%,
		linear-gradient(40deg, #004 89%, transparent 89%) 100% 0 / 10% 14%,
		linear-gradient(-155deg, #127 91%, #005 91%, #005 93%, transparent 93%) 100% 14% / 1em 14%,

		/* Bottom */
		linear-gradient(-25deg, transparent 24%, #004 25%, #002 26%, #004 28%, #002 30%, #004 32%, #002 34%, #004 36%, #002 38%, #004 40%, #002 42%, #004 44%, #002 46%, #004 48%, #002 50%, #004 52%, #002 54%, #004 56%, #002 58%, #004 60%, #002 62%, #004 64%, #002 66%, #004 68%, #002 70%, #004 72%, #002 74%,
		transparent 76%) 50% 100% / 80% 23%,
		repeating-linear-gradient(0deg, #004, #003 0.4em) 50% 100% / 80% 12%,
		repeating-linear-gradient(0deg, #004, #003 0.5em) 50% 100% / 80% 24.7%,
		radial-gradient(200% 200% at 50% 0%, #002 25%, transparent 50%) 0 100% / 100% 14%,
		linear-gradient(220deg, #004 89%, transparent 89%) 0 100% / 10% 14%,
		linear-gradient(25deg, #002 91%, #005 91%, #005 93%, transparent 93%) 0 86% / 1em 14%,
		linear-gradient(0deg, #004 50%, #002 50%, #002 98%, #005 98%) 50% 100% / 80% 25%,
		linear-gradient(-220deg, #004 89%, transparent 89%) 100% 100% / 10% 14%,
		linear-gradient(-25deg, #002 91%, #005 91%, #005 93%, transparent 93%) 100% 86% / 1em 14%,

		/* Middle */
		linear-gradient(115deg, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50.1%) 50% 50% / 75% 51%,
		linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) 0 50% / 0.7em 50%,
		linear-gradient(90deg, #aaa 0.7em, transparent 0.7em) 0 50% / 50% 50%,
		linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) 100% 50% / 0.7em 50%,
		linear-gradient(-90deg, #aaa 0.7em, transparent 0.7em) 100% 50% / 50% 50%,
		linear-gradient(#004, #004) 50% 50% / 75% 51%,
		linear-gradient(#127, #004) 0 50% / 100% 51%;
	background-repeat: no-repeat;
	cursor: pointer;
	font-size: 10px;
	display: block;
	margin: auto;
	position: relative;
	transition: transform 0.2s;
	width: 9em;
	height: 45em;
}

.fitbit:active {
	transform: translateY(1.5%);
}

.fitbit:focus {
	outline: transparent;
}

.sr {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
	top: 0;
	left: 0;
}

.logo {
	opacity: 0.3;
	top: 69%;
	left: 50%;
	width: 4em;
	height: 1.4em;
	transform: translateX(-50%);
	z-index: 1;
}