/* ============ */
/* Fonts */
/* ============ */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Rubik:wght@300&display=swap");

/* ============ */
/* Global Variables */
/* ============ */

:root {
	--step--6: clamp(0.34rem, calc(0.39rem + -0.05vw), 0.38rem);
	--step--5: clamp(0.43rem, calc(0.46rem + -0.03vw), 0.45rem);
	--step--4: clamp(0.54rem, calc(0.54rem + -0.01vw), 0.54rem);
	--step--3: clamp(0.65rem, calc(0.65rem + 0.03vw), 0.67rem);
	--step--2: clamp(0.78rem, calc(0.76rem + 0.08vw), 0.84rem);
	--step--1: clamp(0.94rem, calc(0.91rem + 0.16vw), 1.05rem);
	--step-0: clamp(1.13rem, calc(1.07rem + 0.27vw), 1.31rem);
	--step-1: clamp(1.35rem, calc(1.27rem + 0.42vw), 1.64rem);
	--step-2: clamp(1.62rem, calc(1.5rem + 0.62vw), 2.05rem);
	--step-3: clamp(1.94rem, calc(1.77rem + 0.89vw), 2.56rem);
	--step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.2rem);
	--step-5: clamp(2.8rem, calc(2.45rem + 1.72vw), 4.01rem);
	--step-6: clamp(3.36rem, calc(2.89rem + 2.35vw), 5.01rem);
	--step-7: clamp(4.03rem, calc(3.39rem + 3.18vw), 6.26rem);

	/* CSS LIGHT */
	--secondary: #e0e0e0;
	--accent: #87ceeb;
	--bg: #ffffff;
	--text-color: #000000;
}

/* ============ */
/* Global Selectors */
/* ============ */

* {
	margin: 0;
	padding: 0;
}
body {
	min-height: 100vh;
	font-size: var(--step-1);
	background-color: var(--bg);
	color: var(--text-color);
	font-family: "Rubik", sans-serif;
}
section {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 1100px;
}
button.function {
	font-size: var(--step-0);
	padding: 10px 30px;
	margin-inline: auto;
	border: none;
	border-radius: 8px;
	transition: all 0.15s ease-in-out;
	border: 1px solid var(--text-color);
}
input {
	background-color: var(--bg);
	outline: none;
	border: 1px solid var(--text-color);
	margin: auto;
	width: 200px;
	height: 25px;
	border-radius: 2px;
	padding: 5px 10px 5px 10px;
	background-color: var(--bg);
	font-size: var(--step--2);
	font-family: "Roboto Mono", monospace;
}
label {
	text-align: center;
	font-size: var(--step-0);
	margin-bottom: 10px;
}

/* ============ */
/* Selectors */
/* ============ */
.deadline {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1.4fr;
	align-self: center;
	column-gap: var(--step-0);
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--secondary);
	color: var(--bg);
	border-radius: 4px;
	padding-left: 10px;
}
.main {
	padding-bottom: 10px;
}
.deadline-format h4 {
	font-size: var(--step-5);
	margin-bottom: -9px;
	font-family: "Roboto Mono", monospace;
	font-weight: 300;
	color: var(--text-color);
}
.deadline-format span {
	font-size: var(--step--1);
	color: var(--text-color);
}
.deadline-format .milliseconds {
	position: relative;
	top: 10%;
	margin: auto;
}
.milli {
	background-color: var(--accent);
	color: var(--text-color);
	padding: 0px 20px 0px 20px;
	border-radius: 0px 4px 4px 0px;
}
.reset {
	margin-top: 50px;
}
.start {
	margin-top: 50px;
	margin-bottom: 50px;
}
.footer__wrapper {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	background-color: var(--accent);
	display: flex;
	justify-content: space-around;
	font-size: var(--step--1);
	letter-spacing: 1px;
}
.footer__wrapper > * {
	color: var(--text-color);
	margin-top: 15px;
	margin-inline: 9px;
}
.githublogo {
	margin-top: -10px;
	height: 40px;
	fill: var(--bg);
}
.zenmode, .normalmode{
	font-size: var(--step--1);
	margin-inline: auto;
	position: relative;
	margin-bottom: 80px;
	padding: 5px 10px 5px 10px;
	border: none;
	border-radius: 4px;
	transition: all 0.15s ease-in-out;
	border: 1px solid var(--text-color);
	font-family: "Roboto Mono", monospace;
}
.normalmode {
	display: none;
}

/* ================ */
/* Media Queries */
/* ================ */

@media screen and (max-width: 560px) {
	button {
		font-size: 15px;
	}

	.deadline-format h4 {
		margin-top: 7px;
		font-size: 40px;
	}

	.deadline-format span {
		font-size: 15px;
	}
	.deadline-format .milliseconds {
		margin-top: 7px;
	}
}
@media screen and (max-width: 462px) {
	button {
		font-size: 15px;
	}

	.deadline-format h4 {
		font-size: 30px;
	}

	.deadline-format span {
		font-size: 11px;
	}
	.deadline-format .milliseconds {
		margin-top: 8px;
	}
}
@media screen and (max-width: 367px) {
	button {
		font-size: 10px;
	}

	.deadline-format h4 {
		font-size: 27px;
	}

	.deadline-format span {
		font-size: 10px;
	}
}
@media screen and (max-width: 340px) {
	button {
		font-size: 15px;
	}

	.deadline-format h4 {
		margin-top: 11px;
		font-size: 23px;
	}

	.deadline-format span {
		font-size: 8px;
	}
}
@media screen and (min-width: 600px) {
	button:hover {
		color: var(--bg);
		background-color: var(--text-color);
	}
	.mode:hover {
		color: var(--bg);
		background-color: var(--text-color);
	}
}
@media screen and (max-width: 600px) {
	button:active {
		color: var(--bg);
		background-color: var(--text-color);
	}
	.mode:active {
		color: var(--bg);
		background-color: var(--text-color);
	}
}