:root {
	--background-primary: #01242e;
	--background-a: #041315;
	--background-b: #011b23;
	--primary: #3b4362;
	--accent: #d4affd;
}


body {
	background-color: var(--background-primary);
	color: white;
	font-size: 1.2rem;
	font-family: "Georgia";
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Courier New";
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

a, .link {
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}







header {
	background-color: var(--background-b);
	border: 3px solid var(--primary);
	border-top: 30px solid var(--primary);
	border-radius: 1px;
	margin-top: 32px;
}

h1 {
	margin: -1em 0 -12px;
	width: fit-content;
	text-align: center;
	font-size: 3em;
	padding: 0 8px;
}

#intro-desc {
	margin: 16px 0;
}

#intro-desc p {
	margin: 0 16px;
}



html {

}



#headmaker-app {
	display: flex;
	width: 100%;
	justify-content: space-around;
	flex-wrap: wrap;
}

@media (max-width: 720px) {
	#input-pane {
		width: 100% !important;
	}
	#output-pane {
		min-width: 90vw;
	}
	.tag-main {
		flex-direction: column;
		text-align: center;
	}
	.tag-main:before {
		position: absolute;
		left: 16px;
	}
}

@media (max-width: 1024px) {
	.tag-input {
		overflow: hidden;
	}
}

#input-pane {
	width: 60vw;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#output-pane {
	width: 30vw;
	position: sticky;
	height: fit-content;
	top: 0;
}



.category {
	background-color: var(--primary);
	padding: 0px 3px 3px 3px;
	border-radius: 1px;
}

.category-label {
	display: flex;
	justify-content: space-between;
	height: 20px;
	align-items: flex-end;
}
.category-label-main {
	margin: 0;
	font-size: 2em;
	line-height: .85em;
	padding-left: 2px;
}
.category-label-buttons {
	display: flex;
	gap: 16px;
	font-size: .85em;
	padding-bottom: 2px;
	padding-right: 8px;
}




.category-content {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.subcategory {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.subcategory-header {
	width: 90%;
	background-color: white;
	margin: .5em auto;
	height: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.subcategory-header span {
	position: relative;
	display: block;
	background-color: var(--primary);
	padding: 0 12px;
}

/*
.null .subcategory-header {
	display: none;
}
*/




.tag {
	background-color: var(--background-a);
	border-radius: 2px;
}
.tag:nth-child(odd) {
	background-color: var(--background-b);
}

.tag-main {
	display: flex;
	cursor: pointer;
	font-family: monospace;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	margin: 0 8px;
}

.tag-main:before {
	content: "\25BA";
	position: absolute;
}

.tag[open] .tag-main:before {
	content: "\25BC";
}

.tag-label {
	display: flex;
	flex-direction: column;
	padding-left: 1em;
}

.tag-input {
	display: flex;
	flex-direction: column;
}
.tag-input input {
	font-family: monospace;
}

.tag-input input[type="text"] {
	width: 256px;
}

.tag-input.input-check {
	flex-direction: row;
}

.input-check input[type="text"] {
	background-color: lightgray;
	pointer-events: none;
}

.tag[open] .tag-main {
	border-bottom: 2px dashed var(--primary);
}

.tag-details p {
	margin: 2px 12px;
	text-indent: -16px;
	padding-left: 16px;
	font-size: .95em;
}

.tag-details ul {
	margin: 8px 16px;
	font-family: monospace;
	text-indent: -16px;
	padding-left: 16px;
	font-size: .9em;
}

.tag-details li {
	padding-left: 12px;
}

.tag-details li .link {
	padding-right: 12px;
}

.standard {
	border-left: 3px solid var(--accent);
}

.standard .tag-main {
	margin-left: 6px;
}

.standard-text {
	border-bottom: 3px solid var(--accent);
	width: fit-content;
	padding-right: 16px;
	font-size: .75em;
}

#output-container {
	background-color: #011b23;
	border-radius: 10px;
	border: 2px solid #3b4362;
	padding: 6px 10px;
	overflow: auto;
}

#license {
	display: block;
	width: 100%;
	text-align: center;
}

#output-controls {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}