#content {
	padding: 20px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #ddd;
	background: rgba(48,25,52,0.7);
	min-height: 800px;
	font-size: 1em;
	font-family: Verdana, serif;
	text-wrap: pretty;
	text-align: justify;
}

#bg {
	background: linear-gradient(#871f78,#1b0618);
	background-size: 100vw 100vh;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: -1000;
}

@media only screen and (min-device-width: 850px) and (min-width: 850px) {
	#content {
		min-width: 850px;
		max-width: 850px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
		padding-left: 120px;
		padding-right: 120px;
	}

	header {
		margin-left: -100px;
		margin-right: -100px;
	}
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-family: Georgia, serif;
}

h1 {
	color: #68DA23;
}

h2 {
	color: #52B7FF;
}

h3 {
	color: #FF8A9B;
}

h4 {
	color: #EBEB00;
}

h5 {
	color: #FF9EFF;
}

h6 {
	color: #20D5D5;
}

header {
	color: #FF9EFF;
	font-size: 1.25em;
	font-family: Georgia, serif;
}

a {
	color: #EBEB00;
	text-decoration: none;
}

nav {
	float: right;
}

hr {
	color: #FF9EFF;
}

/* User images */
.comment_thread img {
	max-width: 200px;
	max-height: 200px;
}

.name {
	font-weight: bold;
	color: #20D5D5;
}

.comment_time {
	color: #FF9EFF;
	font-size: 0.625em;
}

.comment_thread {
	border-bottom: 1px solid #EBEB00;
}

.definition_number {
	font-weight: bold;
	color: #20D5D5;
	display: inline-block;
	margin-right: 1em;
}

.block > p {
	display: inline;
}

.special_title {
	font-family: Georgia, serif;
	display: inline-block;
	height: 0px;
}

.special_body {
	display: inline;
}

.special_body p:first-of-type {
	display: inline
}

.note_number {
	font-weight: bold;
	color: #EBEB00;
	display: inline-block;
	margin-right: 1em;
}

.example_number {
	font-weight: bold;
	color: #52B7FF;
	display: inline-block;
	margin-right: 1em;
}

.lemma_number {
	font-weight: bold;
	color: #FF8A9B;
	display: inline-block;
	margin-right: 1em;
}

.corollary_number {
	font-weight: bold;
	color: #FF9EFF;
	display: inline-block;
	margin-right: 1em;
}

.theorem_number {
	font-weight: bold;
	color: #68DA23;
	display: inline-block;
	margin-right: 1em;
}

.reference {
	color: #DDD;
	text-decoration: underline;
	text-decoration-style: dotted;
}

#text_display {
	display: none;
	position: absolute;
	width: 500px;
	z-index: 3;
	background: rgba(48,25,52,0.95);
	padding: 10px;
	padding-bottom: 30px;
	border-style: dotted;
	border-color: #871f78;
	border-size: 1px;
	box-sizing: border-box;
}

.proof p:last-of-type {
	display: inline;
}

.proof_text {
	display: inline-block;
	font-style: italic;
	margin-right: 1em;
	color: #EBEB00;
}

.proof_end {
	float: right;
	height: 0px;
}

.tikz {
	width: 100%;
}

.tikz svg {
	display: block;
	margin: auto;
	min-width: 300px;
	max-width: 100%;
	max-height: 700px;
	height: auto;
	margin-top: 20px;
}

.katex-display > .katex {
	display: inline-block;
	white-space: nowrap;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: initial;
	/*-webkit-mask: linear-gradient(-90deg, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 50%);*/
}

#hidden_blocks {
	display: none;
}

table {
	margin: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

th, td {
	text-align: center;
	padding: 0.9em;
}

thead {
	border-bottom: 1px solid;
}

thead tr th:first-of-type {
	border-right: 1px solid;
}

tbody tr td:first-of-type {
	border-right: 1px solid;
}

table > tr:nth-child(even) {
	background-color: rgba(45,23,49,0.7);
}


tbody > tr:nth-child(odd) {
	background-color: rgba(45,23,49,0.7);
}


.katex-mathml {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}

@font-face {
	font-family: 'Santakku';
	src: url('fonts/Santakku.woff2') format('woff2'),
	     url('fonts/Santakku.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.old-babylonian {
	font-family: 'Santakku';
	font-size: 2em;
}

.isso-thread-heading {
	color: #ddd !important;
}

.isso-textarea {
	background-color: rgba(24, 12, 26, 0.7);
	color: #ddd;
	width: 100%;
	resize: none;
	border: none;
	border-radius: 6px;
	box-sizing: border-box;
	padding: 5px;
	outline: none;
}

.isso-input-wrapper {
	--pad: 0.75rem;
	--accent: #FF9EFF;
	position: relative;
	display: flex;
	flex-basis: 33%;
}

.isso-input-wrapper > input {
	background-color: rgba(0, 0, 0, 0);
	color: #ddd;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-sizing: border-box;
	padding: var(--pad);
	outline: none;
	width: 176px;
}

.isso-input-wrapper > input::placeholder {
	opacity: 0;
}
.isso-input-wrapper > label {
	position: absolute;
	left: var(--pad);
	top: var(--pad);
	backdrop-filter: blur(1000px);
	pointer-events: none;
	padding-inline: 0.3em;
	transition: transform 200ms;
	transform-origin: left;
	translate: -0.3em;
}

.isso-input-wrapper > label:has(+ input:focus),
.isso-input-wrapper > label:has(+ input:not(:placeholder-shown)) {
	transform: translateY(calc(-50% - var(--pad))) scale(0.8);
	color: var(--accent);
}

.isso-input-wrapper > input:focus {
	border: 1px solid var(--accent);
}

.isso-auth-section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

p:has(#isso-postbox-author) {
	justify-content: flex-start;
}

p:has(#isso-postbox-email) {
	justify-content: center;
}

p:has(#isso-postbox-email) > label {
	left: calc(var(--pad) + 12.65px);
}

p:has(#isso-postbox-website) {
	justify-content: flex-end;
}

p:has(#isso-postbox-website) > label {
	left: calc(var(--pad) + 25.3px);
}

.isso-preview {
	background: repeating-linear-gradient(-45deg, transparent, transparent 10px,rgba(24, 12, 26, 0.7) 10px, rgba(24, 12, 26, 0.05) 20px );
	padding: 5px;
	display: none;
}

.isso-preview-mode > div > div > textarea {
	display: none;
}

.isso-preview-mode > div > div > .isso-preview {
	display: block !important;
}

.isso-post-action:has(input[name="edit"]) {
	display: none;
}

.isso-preview-mode > div > section > .isso-post-action:has(input[name="edit"]) {
	display: block !important;
}

.isso-preview-mode > div > section > .isso-post-action:has(input[name="preview"]) {
	display: none !important;
}

.isso-comment:not(.isso-preview > .isso-comment) {
	display: grid;
	grid-template-columns: 60px auto;
	grid-template-rows: auto auto;
	gap: 10px;
}

.isso-text-wrapper:not(.isso-preview .isso-text-wrapper) {
	display: grid;
	grid-template-columns: 60px auto;
	grid-template-rows: 10px auto;
	gap: 10px;
	grid-row: 1;
	grid-column: 1 / span 2;
}

.isso-avatar {
	width: 60px;
	grid-column: 1;
	grid-row: 1;
}

.isso-comment-header {
	grid-row: 1;
	grid-column: 2;
	opacity: 0.5;
}

.isso-comment-header > .isso-spacer {
	margin-left: 5px;
	margin-right: 5px;
}

.isso-text:not(.isso-preview .isso-text) {
	grid-row: 2;
	grid-column: 2;
	background-color:rgba(24, 12, 26, 0.4);
	padding-left: 10px;
	margin-top: 5px;
	border-radius: 6px;
}

.isso-comment-footer {
	grid-row: 1 / span 2;
	grid-column: 1 / span 2;
	width: 60px;
	margin-top: 60px;
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: 17px 17px 17px;
	font-size: 0.65em;
	text-align: center;
}

.isso-follow-up {
	grid-column: 1 / span 2;
	padding-left: 30px;
}

.isso-text-wrapper > .isso-postbox {
	grid-column: 1 / span 2;
}

.isso-votes {
	grid-column: 1 / span 3;
	grid-row: 1;
}

.isso-upvote {
	grid-column: 1;
	grid-row: 2;
}

.isso-downvote {
	grid-column: 3;
	grid-row: 2;
}

.isso-comment-footer > .isso-spacer {
	grid-column: 2;
	grid-row: 2;
}

.isso-reply {
	grid-column: 1 / span 3;
	grid-row: 3;
}

.isso-edit {
	grid-column: 1 / span 3;
	grid-row: 3;
}

.isso-delete {
	grid-column: 1 / span 3;
	grid-row: 4;
}

.isso-cancel {
	grid-column: 1 / span 3;
	margin-top: 5px;
}

.isso-follow-up .isso-reply {
	display: none;
}

.isso-follow-up .isso-textarea-wrapper {
	grid-row: 2;
	grid-column: 2;
	margin-top: 5px;
}

.isso-comment:not(.isso-preview > .isso-comment) {
	border-top: 1px solid #EBEB00CC;
	padding-top: 20px;
	margin-top: 20px;
}

#isso-1 {
	border-top: none !important;
}

input[type="button"] {
    padding: 10px 20px;
    border-radius: 6px;
    border: 2px solid #EBEB00;
	background-color: rgba(52, 28, 54, 0);
    color: #EBEB00;
    font-family: Georgia, serif;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

input[type="submit"] {
    padding: 10px 20px;
    border-radius: 6px;
    border: 2px solid #68DA23;
	background-color: rgba(52, 28, 54, 0);
    color: #68DA23;
    font-family: Georgia, serif;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #68DA23;
    color: #1b0618;
    border-color: #68DA23;
}

input[name="preview"] {
    border-color: #52B7FF;
    color: #52B7FF;
}

input[name="preview"]:hover {
    background-color: #52B7FF;
    color: #1b0618;
    border-color: #52B7FF;
}

input[name="edit"] {
    border-color: #FF8A9B;
    color: #FF8A9B;
}

input[name="edit"]:hover {
    background-color: #FF8A9B;
    color: #1b0618;
    border-color: #FF8A9B;
}

.isso-load-hidden {
	font-weight: bold;
}

.isso-note {
	margin-left: 10px;
}


@media (max-width : 849px) {
	p:has(#isso-postbox-email) > label {
		left: calc(var(--pad) + ((33vw - 194.48px) / 2)) !important;
	}

	p:has(#isso-postbox-website) > label {
		left: calc(var(--pad) + (33vw - 194.48px)) !important;
	}
}

@media (max-width : 583px) {
	p:has(#isso-postbox-email) > label {
		left: var(--pad) !important;
	}

	p:has(#isso-postbox-website) > label {
		left: var(--pad) !important;
	}

	#content {
		text-align: left !important;
	}
}

@media (max-width: 407px) {
	.isso-auth-section {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto auto;
	}

	.isso-input-wrapper:has(#isso-postbox-author) {
		grid-column: 1 / span 2;
		grid-row: 1;
	}

	.isso-input-wrapper:has(#isso-postbox-email) {
		grid-column: 1;
		grid-row: 2;
	}

	.isso-input-wrapper:has(#isso-postbox-website) {
		grid-column: 1;
		grid-row: 3;
	}

	.isso-post-action:has(input[type="submit"]) {
		grid-column: 2;
		grid-row: 2;
	}

	.isso-post-action:has(input[name="preview"]) {
		grid-column: 2;
		grid-row: 3;
	}

	.isso-post-action:has(input[name="edit"]) {
		grid-column: 2;
		grid-row: 3;
	}

}