body {
	margin: 0;
	background-color: #fff;
	padding: 20px 0;
	color: #444;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
}

a {
	color: #007cff;
	font-weight: 400;
}

ul {
	padding: 0;
	list-style: none;
}

h1, h2, h3 {
	margin: 0;
	margin-bottom: 10px;
	font-weight: 400;
	line-height: 1.2;
}

h1 {
	color: #e80000;
	font-size: 24px;
}

h2 {
	color: #007cff;
	font-size: 20px;
}

main {
	margin-inline: auto;
	margin-bottom: 30px;
	width: 100%;
	max-width: 50ch;
	text-align: left;
}

section {
	padding: 0 20px;

	@media (min-width: 600px) {
		padding: 0;
	}
}

input, button {
	font-size: 18px;
	font-weight: 300;
}
button {
	padding: 5px 10px;
}

nav {
	width: 100%;
	ul {
		width: 100%;
		height: 20px;

		li {
			display: inline-block;
			float: left;
			text-align: center;

			a {
				text-decoration: none;
				padding: 10px 0;
			}
		}
	}
}

button, input[type='submit'] {
	border: 0;
	background: none;
	padding: 0;
	color: #007cff;
	font-weight: 400;
	font-size: 15px;
}

nav#primary {
	position: fixed;
	z-index: 99;
	bottom: 0;
	right: 0;
	left: 0;
	backdrop-filter: saturate(100%) blur(5px);
	background-color: rgba(255,255,255, .50);

	ul {
		li {
			width: 20%;
		}
	}
}

nav#secondary {
	ul {
		li {
			width: 33.3%;
		}
	}
}

section {
	margin-bottom: 20px;

	& h2 {
		margin-top: 15px;
		border-bottom: rgba(232, 0, 0, 0.2) 1px solid;
		padding-bottom: 5px;
		color: #e80000;
	}

	& ul.items {
		& > li {
			border-bottom: #ededed 1px solid;
			padding: 5px 0;

			& .dropdown {
				display: inline-block;
				position: relative;
				float: left;
				margin-left: 10px;

				& summary {
					display: inline-block;
					width: 20px;
					height: 20px;
					text-align: center;
					font-size: 12px;
					font-weight: bold;
					line-height: 20px;
				}
				& > summary::-webkit-details-marker {
					display: none;
				}
				& summary:focus {
					outline: none;
				}
				& summary:focus a.button {
					border: 2px solid white;
				}

				& ul, & p {
					box-sizing: border-box;
					position: absolute;
					left: 50%;
					z-index: 9;
					margin-left: calc(50px * -1);
					border-radius: 6px;
					width: 100px;
					background-color: #fff;
					padding: 20px 0;
					list-style: none;
				}
				p {
					padding: 10px;
				}

				& ul li {
					padding: 0;
					margin: 0;
				}

				& ul li a:link, & ul li a:visited {
					display: inline-block;
					padding: 10px 0.8rem;
					width: 100%;
					box-sizing: border-box;  
					color: var(--dropdown-color);
					text-decoration: none;
				}

				& ul li a:hover {
					background-color: var(--dropdown-highlight);
					color: var(--dropdown-background);
				}

				& ul::before {
					content: ' ';
					position: absolute;
					width: 0;
					height: 0;
					top: -10px;
					left: 50%;
					margin-left: -10px;
					border-style: solid;
					border-width: 0 10px 10px 10px;
					border-color: transparent transparent var(--dropdown-background) transparent;
				}

				& > summary::before {
					display: none;
				}
			}
			& .dropdown[open] > summary::before {
				content: ' ';
				display: block;
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				z-index: 1;
			}

			& .accordion {
				position: relative;
				& summary {
					display: inline-block;
					position: absolute;
					right: 0;
					top: -20px;
					width: 20px;
					height: 20px;
					text-align: center;
					font-size: 12px;
					font-weight: bold;
					line-height: 20px;
					color: #007cff;
				}
				& > summary::-webkit-details-marker {
					display: none;
				}
				& summary:focus {
					outline: none;
				}
				& p {
					margin-top: 0;
					margin-bottom: 5px;
				}
				& ul {
					display: inline-block;

					& li {
						float: left;

						& button {
							margin: 0;
							padding: 4px 10px;
						}
					}
				}
			}
		}
	}
	& .add {
		font-size: 20px;
	}
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    translate: 0 500px;
  }
  to {
    translate: 0 0;
  }
}

dialog {
	margin-bottom: 0;
	border: 0;
	max-width: 100%;
	width: 100%;
	height: 500px;
	backdrop-filter: saturate(100%) blur(5px);
	background-color: rgba(255,255,255, .80);

	&::backdrop {
		padding: 0;
	}

	&[open] {
		animation: slideIn 0.3s forwards;

		&::backdrop {
			animation: fadeIn 0.3s forwards;
		}
	}
}