@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	/* font */
	--font-family: 'JetBrains Mono', 'Handjet', monospace;
	/* font sizes */
	--fs-xl: clamp(6.2rem, 12vw + 1rem, 14rem);
	--fs-600: 1.125rem;
	--fs-400: 1rem;
	/* colors */
	--color-background: #101216;
	--color-text: #e3e9f0;
	/* sizes */
	--horizontal-padding: 2rem;
	--horizontal-padding: clamp(0.5rem, 2px, 4rem);
	--vertical-padding: 2rem;
}
html {
	/* setting rem */
	font-size: 16px;
}
* {
	margin: 0;
	padding: 0;
	background-color: transparent;
}
body {
	height: 100svh;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0 1rem;

	background-color: var(--color-background);
	color: var(--color-text);
}
label,
h1,
button {
	font-family: 'JetBrains Mono', monospace;
}
/* PAGE */

/* timer */
.timer {
	display: inline-block;

	/* border: 1px solid var(--color-text); */
	border-radius: 0.25rem;
	padding: var(--vertical-padding) var(--horizontal-padding);
	opacity: 1;
	overflow: hidden;

	/* transition: padding 200ms ease-in-out 200ms; */
	transition: max-width 4000ms ease-in;
	/* transition: opacity 500ms ease-in-out, border-color 500ms ease-in-out, color 500ms ease-in-out, width 2s ease-in-out; */
}
/* Gap between the two timers */
.timer + .timer {
	margin-left: var(--vertical-padding);
}
/* different states for elements while a timer timer is running */
/* running .timer */
.work #work {
	border-color: #2c3035;
}
.rest #rest {
	border-color: #2c3035;
	margin-left: 0;
}
/* non running timers */
.work #rest {
	border-color: #2c3035;
	color: #2c3035;

	display: none;
}
.rest #work {
	border-color: #2c3035;
	color: #2c3035;

	display: none;
}
/* the button while either timer is running */
.rest button,
.work button {
	border-color: #2c3035;
}
/* hiding the runing select element */
.rest #rest select {
	display: none;
}
.work #work select {
	display: none;
}
/* Timer elements when both timers not running */
.timer label {
	display: block;
	font-size: var(--fs-600);
	text-align: center;
	margin-bottom: var(--vertical-padding);
}
/* holds the select and the */
.timer > div {
	position: relative;
}
.timer h1 {
	padding: 0.4rem;
	font-size: var(--fs-xl);
	font-style: italic;
	z-index: -1;
	line-height: 0.8;
	cursor: default;
	user-select: none;
}
.timer select {
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 18px;

	cursor: pointer;
	color: transparent;

	border: 1px solid transparent;
	appearance: none;
}
/* start-stop button */
button {
	display: block;
	margin: var(--vertical-padding) auto 0 auto;
	cursor: pointer;
	padding: calc(var(--vertical-padding) / 2) var(--horizontal-padding);
	color: var(--color-text);
	border: 1px solid var(--color-text);
	border-radius: 0.25rem;
	font-size: var(--fs-400);
	transition: border-color 200ms ease-in-out;
}
button:hover {
	border: 1px solid var(--color-text);
}
/* sound button */
.sound {
	display: flex;
	width: 2rem;
	justify-content: center;

	padding: calc(var(--vertical-padding) / 2);
	margin: var(--vertical-padding) auto 0 auto;
	border-radius: 6rem;

	cursor: pointer;
	transition: background-color 200ms ease-in-out;
}
.sound img {
	align-items: center;
	height: 1rem;
	user-select: none;
}
.sound:hover {
	background-color: #2c3035;
}
/* classes added and removed by js sepending on mute state */
/* hide mute image in the beggining */
.mute-img {
	display: none;
}
/* when muted show mute img and hide volume img */
.mute .mute-img {
	display: block;
}
.mute .volume-img {
	display: none;
}

@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 680px) {
}
@media only screen and (max-width: 580px) {
}