/* style.css
 * Version 1.1
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}
:root {
	--foreground: #201313;
	--background: #f6ebeb;
	--grey: #413a3a;
	--lightgrey: #9e9e9e;
	--white: #fff;
	--black: #000;
	--note: #9a2121;
	--lightred: #ffd9d9;
	
	--site-width: 840px;
	
	--radius: 3px;
	
	--space-small: 10px;
	--space-default: 20px;
	--space-large: 40px;
	
	--font-family: sans-serif;
	--font-size-small: 14px;
	--font-size-default: 20px;
	--font-size-large: 40px;
}
body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-family);
}
a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--lightgrey);
	text-decoration-style: wavy;
}
a:hover {
	text-decoration-color: var(--black);
}
header, main, footer {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--site-width);
	padding-left: var(--space-small);
	padding-right: var(--space-small);
}
main {
	margin-top: var(--space-large);
	margin-bottom: var(--space-large);
}
.site-logo {
	height: auto;
	width: 220px;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: var(--space-large);
	margin-bottom: 0;
	line-height: 1.25;
}
h1 {
	font-size: var(--font-size-large);	
}
h2 {
	font-size: var(--font-size-default);
}
h3, h4, h5, h6 {
	border-bottom: 1px solid var(--lightgrey);
	font-size: var(--font-size-small);
	letter-spacing: 3px;
	padding-bottom: 3px;
	text-transform: uppercase;
}
p {
	line-height: 1.5;
	font-size: var(--font-size-default);
}
.note {
	background-color: var(--lightred);
	border: 1px solid var(--note);
	border-radius: var(--radius);
	color: var(--note);
	font-size: var(--font-size-small);
	padding: var(--space-default);
}
.copyright {
	color: var(--grey);
	font-size: var(--font-size-small);
}
.intro {
	margin-bottom: var(--space-large);
}
hr {
	border: 1px solid var(--grey);
	border-width: 1px 0 0 0;
	margin: var(--space-large) auto;
}
label {
	color: var(--grey);
	font-size: var(--font-size-small)
}
input, select, button {
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	font-size: var(--font-size-small);
	padding: var(--space-small);
}
select {
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0 1em 0 0;
	margin: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;
	outline: none;
}
select::-ms-expand {
	display: none;
}
.select {
	align-items: center;
	width: 100%;
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	display: grid;
	grid-template-areas: "select";
	padding: var(--space-small);
	font-size: var(--font-size-small);
	cursor: pointer;
	line-height: 1.1;
	background-color: var(--white);
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
.select::after {
	content: "";
	width: 0.8em;
	height: 0.5em;
	background-color: var(--grey);
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	justify-self: end;
}
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}
select,
.select:after {
	grid-area: select;
}
button {
	background-color: var(--white);
	border-color: var(--black);
	color: var(--black);
	font-weight: 700;
	text-transform: uppercase;
}
button:hover {
	background-color: var(--black);
	color: var(--white);
	cursor: pointer;
}
form,
.results-table {
	display: flex;
	flex-direction: column;
	gap: var(--space-default);
}
.results-table {
	background-color: var(--grey);
	border-radius: var(--radius);
	color: var(--white);
	font-size: var(--font-size-default);
	padding: var(--space-default);
}
#recurringResults {
	gap: var(--space-default);
}
.row, .column {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.column-50 {
	width: 50%;
}
.row {
	flex-direction: row;
	gap: var(--space-large);
}
	@media screen and ( max-width: 620px ) {
		.row {
			flex-direction: column;
			gap: var(--space-default);
		}
	}
.column {
	flex-direction: column;
	gap: var(--space-small);
}
.no-margin {
	margin-top: 0;
	margin-bottom: 0;
}