html {
		font-size: 100%;
		font-family: "Source Sans Pro";
	}

/*	Layout
	================================================ */

	body {
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-columns: 1fr;
		qgrid-gap: 1rem;

		max-width: 64rem !important;
		margin: 0 auto;
		min-height: 100vh;
	}

	article {
		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-columns:  2fr 2fr;
		grid-gap: 1rem;
		justify-content: start;
	}

	div#form {
		grid-row: 1/3;
		grid-column: 1/2;
	}
	div#dbmss {
		grid-row: 1/2;
		grid-column: 2/3;
	}
	div#advert {
		box-sizing: border-box;
		grid-row: 2/3;
		grid-column: 2/3;
		qalign-self: end;
		padding: 0.5em 0;
	}

/*	General
	================================================ */

	h1 {
		background-color: #2A5F5B;
		font-size: 4rem;
		color: white;
		padding: 1rem;
		color: #ddd;
		text-shadow: 0 1px 0 white;
		margin: 0;
	}
	h2 {
		margin: 1rem 0;
	}
	p {
		margin: .5rem 0;
	}

	li {
		margin: .5rem 0;
	}

	h3 {
		margin: .25rem 0;
	}

	footer {
		background-color: #2A5F5B;
		color: white;
		padding: 0.5rem 1rem;
	}

/*	Main Form
	================================================ */

	input[type="checkbox"] {
		accent-color: #2A5F5B;
	}
	input[type="radio"] {
		accent-color: #2A5F5B;
	}

	form#main {
		counter-reset: step;
		p {
			font-size: 1rem;
			margin: .5rem 0;
		}
		h2 {
			font-size: 1rem;
			margin: .25rem 0;
			text-shadow: 0 1px 0 white;
			&::before {
				counter-increment: step;
				content: counter(step);
				margin-right: .5em;
			}
		}
		label {
			text-shadow: 0 1px 0 white;
		}
		fieldset {
			padding: .5rem;
			margin: 0.5em;
			border: thin solid #2A5F5B;
			background-color: #dde0dd;
			box-shadow: 4px 4px 4px #dde0dd;
			&:nth-of-type(n+2) {

			}
			&:empty {
				display: none;
			}

			&#main-refresh>div {
				flex-direction: row;
				input[name="today"] {
					width: 10em;
					font-family: "Source Code Pro", monospace;
					padding: .125em .375em;
				}
			}
			&#main-dbms {
				&>div {
					&>p {
						display: block;
						margin-left: 1em;
						margin: .25em 1em;
						display: grid;
						&.multiple {
							grid-template-rows: 1fr 1fr;
							grid-template-columns: 1fr 1fr;
							&>label {
								margin: 0.0625em 0 0 1em;
							}
						}
						&>span {
							grid-column: span 2;
						}
					}
				}
			}
			&#main-brs, &#main-inits {
				&>label {
					display: inline-block;
					width: 10em;
					margin-right: 1em;
				}
			}
		}
		&:invalid {

		}
		&:valid {

		}
	}



	fieldset#main-dbms:not(:has(:checked))~fieldset#main-download a {
		display: none;
	}


	form#main button,
	form#main a {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	a#download {
		font-weight: bold;
		padding: .5em;
		background-color: #f8f8f8;
		border: thin solid #666;
		text-decoration: none;
		font-size: 1rem;
		text-align: center;
		color: #333;
	}
	qa#download:after {
		border-top: thin solid #666;
		display: block;
		content: attr(href);
		color: #666;
		font-weight: normal;
		text-align: left;
		font-size: .9em;
	}

/*	Notes
	================================================ */

	div#dbmss h3+div {
		margin: 0;
	}

	div#dbmss h3,
	div#dbmss h3+div {
		display: none;
		opacity: 0;
		transition: opacity 500ms;
	}
	div#dbmss h3.open,
	div#dbmss h3.open+div {
		display: block;
		opacity: 1;
	}
	div#dbmss div p {
		font-size: .9rem;
		margin: .5em 0;
	}

/*	Advert
	================================================ */

	div#advert>a {
		display: block;
		text-decoration: none;
		color: #333;
	}

	div#advert figure {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 0.125em;
	}
	div#advert figure>img {
		margin-right: 0.5em;
		display: block;
	}
	div#advert figure p.title {
		font-weight: bold;
		margin-top: 0;
	}

	div#advert {
		position: relative;
	}

	div#advert h2:after {
		content: url("external.png");
		display: inline-block;
		transform: scale(1.5);
		margin-left: 0.25em;
		transform-origin: 0 0.95em;
	}