body
{
	font-family: "PT Sans", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 95vh;
}
p
{
	text-align: center;
	padding-bottom: 3rem;
}

@media screen and (orientation: portrait)
{
	:root
	{
		--time_font_size: 10vw;
		--end_date_font_size: 5vw;
		--empty_space: 20vh;
		--progress_width: 90vw;
		--percent_font_size: 0.8rem;
	}
}

@media screen and (orientation: landscape)
{
	:root
	{
		--time_font_size: 10vw;
		--end_date_font_size: 5vw;
		--empty_space: 20vh;
		--progress_width: 70vw;
		--percent_font_size: 1.4rem;
	}
}

#timer
{
	font-size: var(--time_font_size);
}
.empty_space
{
	height: var(--empty_space);
}
#end_date
{
	font-size: var(--end_date_font_size);
}

.progress
{
	width: var(--progress_width);
	height: calc(var(--progress_width) * 0.025);
	border: 2px solid black ;
	padding: calc(var(--progress_width) * 0.002);
}
.progress__background
{
	background-image: repeating-linear-gradient(to right, black 0%, black 1.6%, white 1.6%, white 2%);
	height: 100%;
}
.progress__line
{
	width: 100%;
	height: 100%;
	background-color: white;
	margin-left: auto;
	font-size: var(--percent_font_size);
}
.progress__line > span
{
	position: relative;
	top: calc(-1.5 * var(--percent_font_size));
	left: calc(-1 * var(--percent_font_size));
}
#copy_milestone_link
{
	margin-bottom: 0.5rem;
}