@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');



div[id^="dr_mouse_circle"] {
	position: absolute;
	opacity: 0;
	width: 0;
	top: 0;
	left: 0;
	border-style: solid;
	height: 0;
	border-radius: 100%;
	transition: transform 800ms cubic-bezier(0.1, 1, 0.2, 1), opacity 100ms,
		background 400ms, border-color 200ms, width 400ms, height 400ms;
	z-index: 0;
	pointer-events: none;
	background: none;
	z-index: 99;
}
#onHover {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	transition: opacity 200ms;
	font-size: 15px;
	background: #000;
	border-radius: 100%;
}
.table {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

	.ceil {
		flex-grow:1;
		margin: 2em 3em;
		border: 1px solid #000;

		cursor: pointer;
	    min-width:calc(50% - 12em);

		min-height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: 'Montserrat', sans-serif;
		font-size:25px;
		text-decoration:none;
	}
}
.magic-hover:hover {
    --bubble-radius: 50px; /* circle will expand */
}
.btn:hover {
    --bubble-radius: 50px; /* circle will expand */
}