html {
	box-sizing: border-box;
	font-size: 16px;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

:root {
	--bg: #282828;
	--bg0_h: #1d2021;
	--bg0: #282828;
	--bg1: #3c3836;
	--bg2: #504945;
	--bg3: #665c54;
	--bg4: #7c6f64;
	--bg_alpha: rgb(40, 40, 40, 0.6);
	--red: #cc241d;
	--green: #98971a;
	--yellow: #d79921;
	--blue: #458588;
	--purple: #b16286;
	--aqua: #689d6a;
	--gray: #a89984;
	--orange: #d65d0e;
	--fg: #ebdbb2;
	--fg0: #fbf1c7;
	--fg1: #ebdbb2;
	--fg2: #d5c4a1;
	--fg3: #bdae93;
	--fg4: #a89984;
}

html {
	min-height: 100%;
	background-color: var(--bg);
	color: var(--fg0);
	font-size: 1rem;
	font-family: Arial, Helvetica, sans-serif;
	overflow-x: hidden;
}

#content {
	min-height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 12vw 1fr;
	grid-template-rows: 3rem 1fr;
}

#content,
.workspaces,
.toolbar,
.todos {
	padding: 5px;
}

.workspaces {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.workspaces>div {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 2rem;
}

.workspace {
	width: 6vw;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

button {
	background-color: var(--orange);
	color: var(--fg0);
	border: none;
	font-size: 1rem;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	min-width: 1rem;
	z-index: 0;
}

button:hover,
.workspaces>div:hover {
	filter: brightness(90%);
}

button:active,
.workspaces>div:active {
	filter: brightness(75%);
}

img {
	filter: invert();
	height: 1rem;
	width: auto;
	justify-content: center;
	align-self: center;
	z-index: 0;
}

.red {
	background-color: var(--red);
}

.green {
	background-color: var(--green);
}

.yellow {
	background-color: var(--yellow);
}

.blue {
	background-color: var(--blue);
}

.purple {
	background-color: var(--purple);
}

.aqua {
	background-color: var(--aqua);
}

.workspaces>div,
button {
	border-radius: 15px;
	padding: 5px 10px;
	font-weight: 700;
	cursor: pointer;
}

.workspaces button {
	display: none;
}

.workspaces:hover button {
	display: flex;
}

.workspace+p {
	display: none;
}

.workspace:hover+p {
	display: block;
	background-color: var(--bg1);
	border: var(--fg4) 2px solid;
	border-radius: 15px;
	font-size: 0.8rem;
	padding: 5px;
	position: absolute;
	z-index: 2;
	left: 12vw;
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
}

.todos {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
}

.todoCont {
	width: 12vw;
	padding: 5px;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.todoCont>* {
	overflow-wrap: break-word;
}

.todoCont>div:last-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg_alpha);
	display: flex;
	align-items: center;
	justify-content: center;
}

form {
	background: var(--bg0_h);
	padding: 5px;
	border-radius: 15px;
	box-shadow: 0 0 10px var(--bg_alpha);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-between;
	gap: 5px;
	width: 40vw;
	height: 90vh;
}

input[type='text'] {
	width: 100%;
}

textarea {
	max-width: 100%;
}

input {
	border-radius: 15px;
}

label {
	font-weight: 700;
}

.todoCont button {
	opacity: 0;
}

.todoCont:hover button {
	opacity: 1;
}

.completed {
	opacity: 0.6;
	text-decoration: line-through;
}

.expired,
.soon {
	border: 3px dashed var(--fg);
}

.expired {
	opacity: 0.75;
}

.soon {
	font-size: 1.2rem;
}

@media only screen and (max-width: 600px) {
	#content {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 3rem) 1fr;
	}

	.workspaces {
		flex-direction: row;
	}

	.workspace {
		max-width: 100px;
	}

	.todoCont {
		width: 100%;
	}

	.todoCont button {
		opacity: 1;
	}

	form {
		width: 90%;
	}

	.toolbar,
	.todos,
	.workspaces {
		overflow: scroll;
	}
}