@import "catppuccin-mocha.css";

:root, body {
	margin: 0;
	padding: 0;
	color: var(--text);
	background-color: var(--crust);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, a, hr {
	font-weight: 400;
	margin: 0;
	padding: 0;
}

.timer-container {
	width: 100%;
	height: 100vh;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;

	.timer-label {
		color: var(--subtext0);
		font-size: 2rem;

		strong {
			color: var(--text);
		}

		.period {
			font-size: 1.5rem;
			font-weight: 600;
			color: var(--red);

			vertical-align: super;
			margin-left: 0.15rem;
		}
	}

	.timer {
		font-size: 12vw;
		font-weight: 600;
		color: var(--red);
		text-shadow:
			0 0 30px var(--red),
			0 0 100px var(--red)
	}
}

hr {
	border: none;

	height: 2px;
	background-image: linear-gradient(to right, var(--crust), var(--overlay0), var(--crust));
}

.periods {
	width: 100%;
	height: 100vh;

	background-color: var(--mantle);

	.period {

	}

	.period[aria-current] {

	}
}