@import url("https://use.typekit.net/anf4szz.css");


html {
	background-color: rgb(0, 0, 0);
}

html, body, main {
	height: 100%;
}


.main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

/* LIGHTBULB */

.lightbulb {
	width: 50vmin;
	height: 50vmin;
	border-radius: 50%;
	background-color: rgb(0, 0, 0);
}

.lightbulb.is-on{
	background-color: rgb(253, 255, 232);
	box-shadow: 0 0 90px rgb(249, 255, 192), 0 0 100px rgb(138, 191, 238), 0 0 100px rgb(166, 245, 166);
	transition: background-color 1s ease, transform 3s ease-in-out;
	transition: box-shadow 1s ease-in-out, transform 3s ease-in-out;
}

button[name="on"] {
	background-color: white;
	border-radius: 1rem;
	margin-right: 20px;
	font-size: 2rem;
	font-family: 'punto';
	font-weight: 700;

}
	button[name="on"]:hover{
		background-color: rgb(61, 61, 61);
		color: white;
	}

	button[name="off"] {
		background-color: rgb(61, 61, 61);
		color: white;
		border-radius: 1rem;
		font-size: 2rem;
		font-family: 'punto';
		font-weight: 700;
	}
		button[name="off"]:hover{
			background-color: white;
			color: rgb(61, 61, 61);
		}


button{
	margin-top: 40px;
}