#lightsPanel {
	background-color: #363636;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: 1px;
	margin: 5px auto;
}

#lightsPanel div.lightSwitch {
	/* background-color: #363636; */
	background-image: url('/resources/images/light_off.svg');
	align-self: center;
	transition: 0.1s ease-in-out;
}

#lightsPanel div.lightSwitch.on {
	background-image: url('/resources/images/light_on.svg');
}

.hidden {
	display: none;
}

#reset {
	background-color: #666;
	color: #fff;
	cursor: pointer;
	grid-column-start: 1;
	grid-column-end: span 5;
	padding: 5px;
	text-align: center;
}

@media (orientation: landscape) {
	#lightsPanel {
		width: calc(70vh + 0.5em);
	}

	#lightsPanel div.lightSwitch {
		height: 14vh;
		width: 14vh;
	}
	
	#reset {
		font-size: 2rem;
	}

}

@media (orientation: portrait) {
	#lightsPanel {
		width: calc(100vw - 1em);
	}

	#lightsPanel div.lightSwitch {
		height: 19vw;
		width: 19vw;
	}

	#reset {
		font-size: 3rem;
	}
}