html {
	background: #eee;
}

body {
	max-width: 1024px;
	margin: 1rem auto;
	background: white;
	padding: 1rem;
}

.delete-button {
	height: 1rem;
	padding: 0;
	line-height: 0;
	padding: 0.5rem;
}

.nav-logo {
	display: flex;
	align-items: center;
}

@import "includes.scss";

#app {
	grid-template-areas:
		"navbar navbar"
		"sidebar content"
		"footer footer";
	display: grid;
	grid-template-columns: 200px 1fr;
}

.footer {
	grid-area: footer;
}

.navbar {
	grid-area: navbar;
	.logo {
		font-size: 60px;
	}
}

.sidebar {
	grid-area: sidebar;
}

@keyframes enter {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}

.items {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(161px, 241px));

	li {
		background-color: white;
		box-shadow: 1px 1px 5px 0px #00000059;
		list-style: none;
		padding: 0 20px;

		// animation: enter 200ms;
		// animation-fill-mode: both;
		// @for $i from 1 through 20 {
		// 	&:nth-child(#{$i}) {
		// 		animation-delay: #{$i * 50}ms;
		// 	}
		// }
	}
}