style.css

:root {
	/* Colors */
	--red: #f8333c;
	--background: #f7f7f2;
	--foreground: #46494c;

	--border-radius: 70px;
	--box-shadow: 8px 8px 13px #cbcbc6, -8px -8px 13px #ffffff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	display: grid;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	font-weight: 400;
	height: 100vh;
	line-height: 1.5;
	margin: 0;
	place-items: center;
}:root {
	/* Colors */
	--red: #f8333c;
	--background: #f7f7f2;
	--foreground: #46494c;

	--border-radius: 70px;
	--box-shadow: 8px 8px 13px #cbcbc6, -8px -8px 13px #ffffff;
}

.p {
	margin-bottom: 1rem;
	margin-top: 0;;
}

.title {
	margin-top: 0;
	font-size: 25px;
}

.timer {
	font-size: 3rem;
}

.flex-gap *{
  margin: 10px;
}

.flex-row {
  flex-direction: row !important;
}

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-card {
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	margin-bottom: 1.75rem;
	width: 16rem;
	padding: 2.75rem 1.15rem;
}

.btn {
	border: none;
	padding: 1.75rem;
	border-radius: 25px;
	box-shadow: var(--box-shadow);
	user-select: none;
	cursor: pointer;
}

.btn:hover {
	transform: scale(1.1);
	transition-duration: 5ms;
}

.btn:active {
	transform: translate(0,5px);
}