/* palette: 
 * 	97D9CC
 * 	008B9B
 * 	22ACA9
 * 	FEBB48
 * 	1A6574
 *
 * 	848152
 * 	7D634A
 * 	57453B	40322B
 * 	C1D2E3
 * 	D98B57
 */

body {
backdrop-filter: blur(10px);
  background-color: #333;
  background-image: url(/images/_MG_D43876_p3_800_screen.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
}
body {
  margin: 0 0;
  min-height: 100vh;
  color: #ddd;

	font-family: sans-serif;
}


.button {
  background: hsl(15, 100%, 50%);
  color: black;
  border-radius: 0.2em;
  border: none;
  padding: 0.20em 0.3em 0.15em 0.3em;
  font-weight: bold;
}

.intro h1 {
  color: #eee;
	display: block;
	position: relative;
	height: 3.2em;
	font-size: calc(min(20vh, 25vw));
	margin: 0 0;
  text-shadow: 0 0 0.07em rgba(0, 0, 0, 0.45);
}

.intro h1 span:nth-child(1) {
	position: absolute; left: 2%; top: 0.4em;
}

.intro h1 span:nth-child(2)  {
	position: absolute; left: 15%; top: 1.2em;
}

.intro h1 span:nth-child(3) {
	position: absolute; left: 40%; top: 2.2em;
}
.intro .tagline {
  margin: 0 12pt;
	font-size: 2.9vw;
  text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.80);
}

.intro .buttons {
  font-size: 5vw;
  margin-left: 5em;
  margin-top: 48pt;
}

.intro .button:hover {
  background: hsl(15, 100%, 55%);
  }
.intro .button:active {
  background: hsl(15, 100%, 62%);
  color: white;
}

a { color: inherit; text-decoration: none; }
a:hover { font-weight: bold; }

.header h1 { position: relative; height: 1em; margin-left: 12pt;  font-size: 24pt; }
.header h1 span:nth-child(1) { position: absolute; left: 0; top: 0; font-size: 80%; }
.header h1 span:nth-child(2) { position: absolute; left: 12pt; top: 12pt; font-size: 80%; }
.header h1 span:nth-child(3) { position: absolute; left: 44pt; top: -2.0pt;font-size: 140%;}
.header p { font-size: 80%; margin-left: 12pt; }
.header { margin-bottom: 24pt; }

footer {
  margin-top: 36pt;
  padding-top: 2em;
  padding-bottom: 0.5em;
  padding-left: 12pt;
  padding-right: 12pt;
  font-size: 10pt;
  background: rgba(0, 0, 0, 60%);
}

footer ul {
  list-style: none;
  margin: 0 0 12pt 0;
  padding: 0 0;
  font-size: 14pt;
  font-weight: bold;
}

footer ul li:first-child { margin-left: 0; }
footer ul li {
  margin-left: 18pt;
  display: inline-block;
}


.app #activities,
.app #locations {
  display: flex;
  flex-wrap: wrap;
  margin: 0 12pt;
}

.app #activities > *,
.app #locations > * {
  margin-right: 2em;
  margin-bottom: 2em;

}

.app #activity {
  margin-bottom: 18pt;
}

.app .activity,
.app .location {
  border-radius: 4em;
  background: hsl(195, 100%, 46%);
  color: white;
  padding: 1.0em 1.75em;
  min-width: 20em;
  width: 20em;
  min-height: 7em;
  flex-grow: 1;
}

.app .activity h2,
.app .location h2 {
  font-size: 18pt;
  margin: 9pt 0 6pt 0;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.app .activity p,
.app .location p {
  margin: 6pt 0;
  font-size: 12pt;
}

.app .activity:nth-child(3n+1),
.app .location:nth-child(3n+1) {
  background: hsl( 37, 100%, 49%);
  color: white;
}

.app .activity:nth-child(3n+2),
.app .location:nth-child(3n+2) {
  background: hsl(320, 100%, 50%);
  color: white;
}

.app .activity.reroll,
.app .location.reroll {
  background: hsl(150, 100%, 40%);
  color: #333;
  cursor: pointer;
}


select {
  background: hsl(15, 100%, 50%);
  border: none;
  border-radius: 1em;
  padding: 6pt 6pt;
  font-size: 14pt;
}

#content { padding: 0 12pt 3em 12pt; background: rgba(0, 0, 0, 0.4); }

.linkButton { display: inline-block; text-transform: uppercase; font-weight: bold; margin-left: 9pt; }
p.links { text-align: right; margin: 12pt 12pt 0 12pt !important; }