* {
	font-family: Arial;
	font-size: 18px;
	box-sizing: bord
}

html, body {
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
}

div#page {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height: 100vh;
}
	div#page div {
		display: grid;
		justify-content: center;
		text-align: center;
		padding: 15px;
	}

		div#page div:nth-of-type(1) {
			grid-area: 1 / 1 / 2 / 2;
			align-items: end;
		}

		div#page div:nth-of-type(2) {
			grid-area: 2 / 1 / 3 / 2;
			align-items: start;
		}

button {
	width: clamp(100px, 95vw, 250px); /* Minimalna szerokość: 100px, maksymalna: 200px */
	height: clamp(100px, 95vw, 250px); /* Wysokość równa szerokości */
	border: none;
	border-radius: 50%;
	color: white;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
	cursor: pointer;
	box-shadow: inset -2px -2px 8px rgba(255,255,255,0.3), inset 2px 2px 8px rgba(0,0,0,0.7), 0px 8px 15px rgba(0,0,0,0.5);
	transition: all 0.3s ease-in-out;
}

.btnStart {
	background: linear-gradient(to bottom, #4CAF50, #087F23);
}

.btnStart:hover {
	background: linear-gradient(to bottom, #66BB6A, #0A9E30);
	box-shadow: inset -2px -2px 12px rgba(255,255,255,0.4), inset 3px 3px 10px rgba(0,0,0,0.6), 0px 10px 20px rgba(50,200,50,0.5);
}

.btnStart:active {
	background: linear-gradient(to bottom, #087F23, #045C15);
	box-shadow: inset -1px -1px 6px rgba(255,255,255,0.2), inset -3px -3px 12px rgba(0,0,0,0.8), inset -1px -1px 15px rgba(50,200,50,0.3);
}

.btnStop {
	background: linear-gradient(to bottom, #ff4d4d, #b30000);
}

.btnStop:hover {
	background: linear-gradient(to bottom, #ff6666, #cc0000);
	box-shadow: inset -2px -2px 12px rgba(255,255,255,0.4), inset 3px 3px 10px rgba(0,0,0,0.6), 0px 10px 20px rgba(255,50,50,0.5);
}

.btnStop:active {
	background: linear-gradient(to bottom, #b30000, #660000);
	box-shadow: inset -1px -1px 6px rgba(255,255,255,0.2), inset -3px -3px 12px rgba(0,0,0,0.8), inset -1px -1px 15px rgba(255,50,50,0.3);
}

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#message {
	text-align: center;
}

	#message p {
		font-size: 30px;
		color: white;
		margin-bottom: 20px;
	}

#countdown {
	font-size: 50px;
	color: white;
}

#status {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #00193b;
	color: #fff;
}

	#status * {
		font-size: 14px;
	}

	#status ul {
		overflow: hidden;
		padding: 0;
		margin: 5px;
		text-align: right;
	}

		#status ul li {
			display: inline-block;
		}