#info {
	margin-bottom: 1em;
}
#tasks {
	display: flex;
	flex-wrap: wrap;
	columns: auto;
	gap: 1em;
}
#tasks h6 {
	line-height: 1.25em;
	border-bottom: 2px solid var(--container-bd);
}
#tasks > div {
	width: fit-content;
	padding: .5em 1em 1em;
	border-radius: 1.5em;
	background: var(--container-bg);
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	overflow: hidden;
}
#tasks > div > p {
	margin-block: .4em .8em;
	display: block;
}
#tasks .actions {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
}
.flag {
	height: 2em;
	display: inline-flex;
	border-radius: 1em;
	background: var(--darkgray);
	box-shadow: var(--a-box-shadow);
	overflow: hidden;
}
.flag > * {
	height: 100%;
	border: none;
	background: none;
}
.flag input {
	width: 14em;
	padding-inline: .5em .1em;
}
.flag button {
	padding: .2em;
}

#user {
	position: absolute;
	bottom: 1em;
	right: 2em;
}
#user > span {
	margin-right: 2em;
}


@media screen and (max-width: 700px) {
	#tasks { 
		columns: 1;
	}
	#tasks > div {
		width: 100%;
	}
}