:root {
	--bg: #f2eeed;
	--c1: 0,130,143;  /* #00828f */
	--c2: 249,180,1;  /* #f9b401 */
	--ct: #333;
	--c-update0: #610;
	--c-update: #c10;
	--lnk: #22e;
	--lnk-hover: #55f;
	--lnk-hide: #226;
	--lnk-hover-hide: #55a;
	--border: #444;
	--border2: #111;
	--bw0: 0.08em;
	--bw1: calc(var(--bw0) * 2);
	--bw-br: var(--bw0) var(--bw1) var(--bw1) var(--bw0);
	--bw-tl: var(--bw1) var(--bw0) var(--bw0) var(--bw1);
}

input, body, * { box-sizing: border-box; }

body {
	margin: 12px 12px;
	box-sizing: border-box;
	min-height: 300px;
	padding: 0 0 20px 0;
}

body, td {
	background-color: var(--bg);
	color: var(--ct);
}

body.error {
	margin: 10vh 0 0;
}

body.error h1 {
	text-align: center;
	width: 100%;
	padding: 30px 0;
	text-shadow: 0 0 4px #fff;
	background: rgba(var(--c2), 0.11);
	border-top: 4px solid rgb(var(--c2));
	border-bottom: 4px solid rgb(var(--c2));
}

body:not(.error) h1,
header nav {
	border-bottom: 2px solid rgb(var(--c1));
	padding-bottom: 0.5rem;
}

header nav {
	font-size: small;
	margin-bottom: 1.6rem;
	text-align: center;
}

header nav a {
	--lnk: rgb(var(--c1)) !important;
	margin: 0 0.35em;
}

.form-container,
.form-container .msg,
form.rsvp-form {
	display: inline-block;
}

form .msg {
	width: 100%;
	margin-top: 0.4em;
}

form .msg.success {
	background-color: #94fca5;
	color: #020;
}
form .msg.error {
	background-color: #fe9f70;
	color: #200;
}

form .msg,
.form-container {
	padding: 0.9em;
	border-radius: 0.7em;
	clear: both;
}

.form-container {
	background-color: #bbccff;
	--sp: 1em;
	--txt: #444;
	--seltxt: #000;
	color: var(--txt);
}

form input,
form button {
	outline: none;
	--bg: rgba(255,255,255, 0.6);
	--selbg: rgba(255,255,255, 0.8);
}

form button,
form input[type=submit] {
	touch-action: manipulation;
}

form input:not([type]),
form input[type=text],
form button,
form input[type=submit] {
	--height: 1.6em;
	background-color: var(--bg);
	border-radius: 0.4em;
	border: 1px solid var(--border);
	height: var(--height);
	padding: 0 0.3em;
}

form button,
form input[type]:not([type=text]) {
	color: var(--txt);
}

form button:hover,
form button:focus,
form input:hover,
form input:focus {
	background-color: var(--selbg);
	border-color: var(--border2);
	color: #000 !important;
}

form input:not([type]),
form input[type=text] {
	margin-right: var(--sp);
	border-width: var(--bw-tl);
}

form button,
form input[type=submit] {
	border-width: var(--bw-br);
	margin-left: var(--sp);
	height: 2em;
	padding: 0.2px 0.5em;
	--bg: #7da0df;
	--selbg: #5b97ff;
}

form button:active,
form input[type=submit]:active {
	border-width: var(--bw-tl);
}

form input[type=radio] {
	--size: 1.2em;
	background-color: var(--bg);
	margin-bottom: -0.18em;
	margin-right: 0;
	border: solid var(--border);
	border-width: var(--bw-tl);
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

form .-error       { box-shadow: 0 0 4px 2px #f00; }
form :not(.-error) { box-shadow: none; transition: box-shadow 400ms; }

form input[type=radio]:hover + span,
form input[type=radio]:checked + span {
	color: var(--seltxt);
}

form input[type=radio][value="yes"]   { --color: #090; --selcolor: #bfb; }
form input[type=radio][value="no"]    { --color: #f00; --selcolor: #fcc; }
form input[type=radio][value="maybe"] { --color: #660; --selcolor: #ffb; }

form input[type=radio]:hover,
form input[type=radio]:focus {
	border-color: var(--border2);
}
form input[type=radio]:hover:not(:checked),
form input[type=radio]:focus:not(:checked) {
	background-color: var(--selcolor);
}
form input[type=radio]:checked {
	box-shadow: inset 0 0 0 0.16em var(--selcolor);
	background-color: var(--color);
}

dt {
	font-weight: bold;
	margin-bottom: 0.4em;
}

dd {
	margin-bottom: 0.9em;
}

a, a:visited { color: var(--lnk); }
a:active, a:hover { color: var(--lnk-hover); text-decoration: none; }

a.hidden,
header nav a,
a[href^="tel:"] { text-decoration: none; --lnk: var(--lnk-hide); }
a.hidden:active,
a.hidden:hover,
header nav a:active,
header nav a:hover,
a[href^="tel:"]:active,
a[href^="tel:"]:hover { --lnk-hover: var(--lnk-hover-hide); text-decoration: underline; }

button img.spinner { max-height: calc(var(--height) * 0.8); }

ul.event-updates { list-style: none; }
.event-updates li { text-indent: -0.8em; }
.event-updates li::before { content: "•"; font-weight: bold; color: var(--c-update0); }
.event-updates time { padding: 0 0.2em; font-weight: bold; color: var(--c-update); }
.event-updates span { color: var(--c-update0); }

a img,
a picture {
	outline: none;
	display: inline-block;
}

section.fotos {
	margin-top: 1em;
	margin-bottom: 2em;
	border-top: 2px solid rgb(var(--c2));
}