@media (max-width: 600px) {
	.tasks {
		flex: 0 0 100%;
		min-height: 100vh;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}
@media (min-width: 601px) {
	.tasks {
		flex: 0 0 calc((100% - 2rem) / 3);
	}
}
.task {
	font-size: 1rem;
	height: 10rem;
}
@media (max-width: 600px) {
	.task {
		height: 7rem;
	}
}


input[type="text"] {
	font-size: 1rem;
}
input[type=checkbox] {
	min-width: 5em;
	height: 5em;
	border-radius: 0.25em;
}
input[type=checkbox]::before {
	top: 0.725em;
	left: 1.675em;
	min-width: 1.55em;
	height: 3em;
	border-width: 0 .575em .575em 0;
}

input[type="text"] {
	color: #93a1a1;
	background-color: #073642;
	padding: .5em;
}
.search {
	display: flex;
}
#search {
	flex-grow: 2;
}
.track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 2rem;
}
a {
	color: #93a1a1;              
	text-decoration: none;
}
a:hover {
	color: #93a1a1;
	text-decoration: underline;
}
.snooze a, .snooze .task-title, .snooze h1 {
	color: #b68900;
}
.completed h1 {
	color: #859900;
}
a:hover {
	text-decoration: none;
}
.tasks div {
	margin-top: 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
@media (max-width: 600px) {
	.tasks div {
		margin-top: 1rem;
		gap: .5rem;
	}
}
.task {
	display: flex;
	cursor: pointer;
	position: relative;
	gap: 1rem;
	border: 1px solid #233347;
	padding: .75rem 1rem;
	margin-bottom: 1rem;
	border-radius: 1rem;
	background: #073642;
	box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}
.task-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.task-title {
	overflow: hidden;
	position: relative;
	pointer-events: none;
	color: #93a1a1;
	overflow-wrap: anywhere;
}
input[type=checkbox] {
	touch-action: none;
	overscroll-behavior: contain;
	-webkit-touch-callout: none;         /* disable context menu */
	-webkit-user-select: none;           /* no text selection */
	user-select: none;
	position: relative;
	color: #586e75;
	background: #002b36;
	border: 1px solid #bdc1c6;
	z-index: 2;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
	outline: 0;
	cursor: pointer;
	transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
}
input[type=checkbox]::before {
	position: absolute;
	content: "";
	display: block;
	border-style: solid;
	border-color: #fff;
	transform: rotate(45deg);
	opacity: 0;
}
input[type=checkbox]:checked {
	color: #fff;
	border-color: #859900;
	background: #859900;
}
input[type=checkbox]:checked::before {
	opacity: 1;
}
input[type=checkbox]:checked ~ .task-title::before {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

a, .task-title {
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
.task a:focus-visible {
	outline: 0.22rem solid var(--highlight-color);
	outline-offset: -.2rem;
	border-radius: 1rem;
}
.task-title::before {
	position: absolute;
	content: attr(data-content);
	color: #859900;
	-webkit-clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
			clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
	transition: -webkit-clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.indicator {
	display: block;
	height: 5rem;
	aspect-ratio: auto;
	width: auto;
}