:root {
  --bg: #FBF6E1;
  --button: #7D5C67;
  --heading: #7D5C67;
  --dark: #7D5C67;
  --body: #C18373;
  --input: #362B3C;
  --borderOff: #C1837300;
  --border: #C18373;
  --readonly: #C18373;
  --hover: #F5C692;
  --strong: #7D5C67;
  --highlight: #7D5C67;
  --font: Arial, sans-serif;
  --icon: 'Material Symbols Outlined';
  --iconFilled: 'Material Icons';
  --hoverFade: .5s;
  --themeFade: .75s;
}
 
html {
	background: #7D5C67;
}
body {
	background: white;
	box-shadow: rgba(0, 0, 0, .2) 0 0 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--body);
	max-width: 800px;
	margin: 0 auto;
	padding: 30px;
	position: relative;
	box-sizing: content-box;
	font-size: 14px;
	transition: background-color var(--themeFade), color var(--themeFade);
}

h1 {
	text-align: center;
	text-transform: uppercase;
	margin: 0;
	position: relative;
	max-height: 400px;
	background: center bottom no-repeat url(../images/london.png);
	background-size: cover;
	display: flex;
	align-items: flex-end;
	margin: -30px -30px 0 -30px;
}
h1:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
	opacity: 0.5;
	background: linear-gradient(var(--body), var(--dark));
}
h1 span {
	z-index: 1;
	text-align: center;
	text-transform: uppercase;
	color: white;
	letter-spacing: 0.5px;
	word-spacing: 10px;
	margin: 0;
	padding: 20px 0 10px 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 10vw;
	opacity: 0.3;
	max-width: 300px;
	margin: 0 auto;
	flex-wrap: wrap;
	text-shadow: 1px 1px black;
}
h1 span:before {
	content: "";
	background: bottom center no-repeat url(../images/holmes.svg);
	background-size: contain;
	width: 50vw;
	height: 30vw;
}
@media screen and (min-width: 800px) {
	h1 span {
		font-size: 80px; 
	}
}

h2 {
	font-style: italic;
	font-variant: small-caps;
	color: var(--heading);
	letter-spacing: 0.5px;
	margin: 0;
	padding-top: 10px;
}

h3 {
	font-size: 14px;
	font-family: var(--font);
	letter-spacing: 0.5px;
	margin: 0 0 5px 0;
}

h4 {
	font-size: 14px;
	font-family: var(--font);
	letter-spacing: 0.5px;
	margin: 0 0 5px 0;
	color: var(--body);
}

p {
	font-size: 14px;
	font-family: var(--font);
	margin: 0 0 .6em 0;
	letter-spacing: 0.5px;
	word-spacing: 1px;
}

i {
	font-family: var(--icon);
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
}

td {
	font-family: var(--font);
}

form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#show {
	scroll-margin-top: 60px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	visibility: hidden;

	&.ready {
		visibility: visible;
	}
}

#jumpStats {
	scroll-margin-top: 60px;
}

#form {
	display: none;
	scroll-margin-top: 60px;
}

#form:has(#gender option[value="girl"]:checked) {
	[data-gender="both"],
	[data-gender="boys"] {
		display: none;
	}
}
#form:has(#gender option[value="boy"]:checked) {
	[data-gender="both"],
	[data-gender="girls"] {
		display: none;
	}
}

#toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background: white;
	border-bottom: 1px solid var(--border);
	padding: 15px 2px;
	margin-top: -15px;
	z-index: 3;
	transition: background-color var(--themeFade);

	h3 {
		font-size: 12px;
		font-family: var(--font);
		text-transform: uppercase;
		margin: 0;
	}
}

#jumps {
	display: flex;
	gap: 10px;

	a {
		font-family: var(--font);
		text-decoration: none;
		border: 1px solid var(--border);
		border-radius: 5px;
		padding: 2px 10px;
		display: flex;
		align-items: center;
		font-size: 12px;
	
		&:hover {
			color: white;
			background: var(--button);
		}
	
		&:before {
			content: "keyboard_double_arrow_down";
			font-family: var(--icon);
			font-size: 14px;
			font-weight: normal;
		}
	}
}

label[for="editmode"] {
	justify-content: flex-end;
}

#jumps .edit {
	display: none;
}

body:has(#edit:checked) {
	#jumps .show,
	#show {
		display: none;
	}

	#jumps .edit,
	#form {
		display: flex;
	}
}

.bio {
	display: flex;
	gap: 10px 20px;
	align-items: flex-start;
}
#show_backstory {
	display: flex;
	flex-direction: column;
	gap: 10px;

	p {
		margin: 0;
		text-align: left;
	}
}

#show_picture {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	outline: 2px solid var(--body);
	border: 2px solid transparent;
	border-radius: 5px;
	margin-left: 2px;	

	span {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		content: "";
		background-image: url(../images/edging.png);
		background-size: 100% 100%;
		z-index: 11;
		display: block;
		pointer-events: none;
		filter: sepia(1);
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		box-shadow: 0px 0px 50px 10px black inset;
		z-index: 1;
		transition: box-shadow var(--hoverFade);
	}

	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		background: white url(../images/peel.png);
		width: 20px;
		height: 20px;
		background-size: cover;
		box-shadow: 2px -2px white, -2px 2px 2px 2px rgba(0,0,0,0.2);
		transition: top .5s, right .5s;
		z-index: 2;
	}
	
	&:hover {
		span {
			display: none;
		}

		&:after {
			top: -20px;
			right: -20px;
		}
	}
}

#show_image {
	width: 300px;
	height: auto;
	filter: saturate(0) sepia(0.7) contrast(0.5) brightness(1.5) blur(0.4px);
	transition: filter var(--hoverFade);
	border-radius: 5px;
}

a#show_picture:hover {
	&:before {
		box-shadow: none;
	}

	#show_image {
		filter: none;
	}
}

#show_skills {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}

section {
	&.col {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	&.cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 30px;
		align-items: flex-start;

		h3, h4, ul {
			  grid-column: 1 / span 2;
		}
	}
}

fieldset {
	background: var(--bg);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
  border: 2px solid var(--border);
	border-radius: 5px;

	&.twocol {
		display: grid;
		grid-template-columns: auto auto;
		gap: 10px;
		justify-content: space-between;
	}
	
	&.random button {
		align-self: flex-end;
	}
}

div.withContent {
	display: none;

	&:has(p) {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

.chooser {
	display: flex;
	flex-direction: column;
	gap: 20px;

	button {
		align-self: flex-start;
	}
	
	select {
		width: 100%
	}
}

label {
	color: var(--body);
	font-weight: bold;
	font-family: var(--font);
}

select,
input {
	color: var(--input);
	border: 1px solid var(--border);
	padding: 2px 5px;
	width: 250px;
	border-radius: 2px;
}
input[readonly] {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--readonly);
}
table input[readonly] {
	width: 2em;
	text-align: right;
	background: white;
	border: 1px solid var(--border);
	color: var(--readonly);
	pointer-events: none;
}
input[type="search"] {
	padding-left: 5px;
	width: 100px;
	outline: none;
	transition: padding .5s, max-width .5s, background-color .5s;
	max-width: 0;
	border-color: transparent !important;
	
	label:has(&) {
		position: relative;
		width: 20px;
		transition: width .5s;
		margin-right: 3px;
		
		&:before {
			content: "search";
			position: absolute;
			top: 0;
			left: 1px;
			font-family: var(--icon);
			font-size: 14px;
			transition: color .5s;
			cursor: pointer;
			background: var(--button);
			color: white;
			border-radius: 4px;
			padding: 2px;
			width: 20px;
			text-align: center;
		}

		&:hover:before {
			color: black;
		}
	}

	label:has(&:focus) {
		width: 100px;

		input {
			padding-left: 17px;
			border-color: var(--dark);
			background: var(--bg);
			max-width: 100px;
		}

		&:before {
			color: var(--dark);
			background: none;
			padding: 0;
			top: 1px;
		}
	}
}
input[type="checkbox"] {
  appearance: none;
  background: white;
  color: currentColor;
  width: 1em;
  height: 1em;
  border: 2px solid white;
  outline: 2px solid var(--border);
  border-radius: 2px;
}
input[type="checkbox"]:checked {
	background: var(--strong);
}
label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	text-transform: uppercase;
}

textarea {
}
textarea#prompt {
	display: block;
	width: 100%;
	height: 100px;
	margin-bottom: 5px;
}

table td {
	font-weight: bold;
}
table.levels {
	margin-top: 20px;
	border-collapse: collapse;

	td,th {
		padding: 5px;
		width: 30px;
		text-align: right;
		border: 1px solid var(--dark);
		font-size: 12px;
		font-family: var(--font);
	}
	td {
		color: var(--bg);
	}
	th {
		color: var(--dark);
	}
}
table i {
	cursor: pointer;
	padding: 2px 10px;
	color: white;
	background: var(--button);
	border-radius: 5px;
	margin: 2px;
	display: inline-block;
	user-select: none;
}
table i:hover {
	background: var(--hover);
	color: var(--strong);
}

table.maxxed i:last-of-type {
	pointer-events: none;
	opacity: 0.5
}

section.attributes[attribute="Strength"] tr[data-attr="Strength"],
section.attributes[attribute="Agility"]  tr[data-attr="Agility"],
section.attributes[attribute="Wits"]     tr[data-attr="Wits"],
section.attributes[attribute="Empathy"]  tr[data-attr="Empathy"] {
	td:nth-child(1) {
		color: var(--highlight);

		&:after {
			content: "*";
		}
	}

	td:has(input):after {
		content: " + 1";
		color: var(--highlight);
	}
}

section.skills[attribute="Strength"] tr[data-attr="Strength"],
section.skills[attribute="Agility"]  tr[data-attr="Agility"],
section.skills[attribute="Wits"]     tr[data-attr="Wits"],
section.skills[attribute="Empathy"]  tr[data-attr="Empathy"] {
	td:nth-child(1) {
		color: var(--highlight);
	
		&:after {
			content: "*";
		}
	}
}

strong {
	color: var(--strong);
	font-weight: bold;
}

#previewContainer {
	margin-bottom: 10px;
	background: var(--tabBgActive);
}
#previewContainer.busy {
	background: var(--tabBgActive);

	#preview {
		background: center url("../images/loader.gif") !important;
		filter: saturate(0);
		opacity: 0.3;
	}
}

#preview {
	max-width: 400px;
	aspect-ratio: 1;
	background-color: white;
	background-size: cover;
	border: 1px solid var(--border);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 1s;
}
#preview.noimage:before {
	content: "person";
	display: block;
	font-family: var(--icon);
	font-size: 250px;
	opacity: 0.2;
}

#image {
	display: none;
}

dl.terms {
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: 15px;

	dt {
		font-weight: bold;
		margin: 0;
		letter-spacing: 0.5px;
		word-spacing: 1px;
	}

	dd {
		font-family: var(--font);
		margin: -10px 0 0 0;
		letter-spacing: 0.5px;
		word-spacing: 1px;
	}

	span {
		color: var(--strong);
	}
}

footer {
	padding-top: 30px;
	border-top: 1px solid var(--border);
	/* text-align: center; */
	/* align-items: stretch; */
	margin: 20px 0;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	justify-content: center;
	
	a {
		font-family: var(--font);
		color: inherit;
		text-decoration: none;
		font-variant: small-caps;
		outline: none;
		display: flex;
		align-items: center;
		gap: 4px;

		&:not(:first-of-type):before {
			content: "";
			display: inline-block;
			border-left: 1px solid currentColor;
			padding-left: 15px;
			height: 100%;
		}
		
		&:hover {
			color: var(--strong);

			&:before {
				border-color: var(--body);
			}
		}
	}
}

.names {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
}

#generate {
	display: inline-block;
	margin: 0 auto;

	fieldset {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	input {
		width: 3em;
	}

	select {
		width: auto;
	}
}

[data-roll] {
	cursor: pointer;
}

#hidden {
	visibility: hidden;
	position: absolute;
}

.suggestions {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 0 0 0 20px;
	list-style-type: square;
	font-family: var(--font);
	
	li {
		margin: 0;
		padding: 0;
	}
}