/* Reset CSS */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Background black body */
body {
	background-color: #000;
}

div {
	/* Center div in middle of body */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/* Style text in div to nice font */
	font-family: 'Courier New', Courier, monospace;
	font-weight: 100;
	font-size: xx-large;
	color: #fff;
	letter-spacing: 5px;

	cursor: pointer;

	transition: transform 0.5s;
}

div:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.bubble {
	display: none;
	/* Create a cicle */
	border-radius: 50%;
	/* light blue background colour */
	background-color: rgb(127, 127, 232);
	position: absolute;
	transform: translate(-70%, -70%);
	pointer-events: none;
	z-index: -1;

	width: 70px;
	height: 70px;

	font-size: x-small;
	font-weight: 100;
	letter-spacing: normal;
	text-align: center;
}

/* Bubble only visble on hover of div */
div:hover .bubble {
	display: block;
}