* {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	background-color: hsl(220 10% 8%);
	font-family: 'Open Sans';
}

main {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px;
}

h1,
h2 {
	color: rgb(235, 235, 235);
}

button {
	cursor: pointer;
	font-weight: bold;
	background-color: #495057;
	color: white;
	border: none;
	border-radius: 8px;
}

input {
	margin: 0;
}

#add-todo-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
}

#cards {
	display: grid;
	flex-direction: row;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

#add-todo-container > * {
	font-size: 1.5em;
	border-radius: 8px;
	padding: 20px;
}

.itemlist-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.itemlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.todoItem {
	background: rgb(235, 235, 235);
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.todoItem h2 {
	color: hsl(220 10% 8%);
	font-size: 1.5em;
}

#itemlist-closed {
	opacity: 0.6;
}

.todoItem.closed > .buttonRow {
	display: none;
}

.closeButton {
	padding: 8px;
}

footer {
	height: 60px;

	margin-top: auto;
	padding: 0 40px;

	text-align: center;
	font-size: 1.2em;
	color: rgb(235, 235, 235);
}