html, body {
	height: 100%;
}

a {
	text-decoration: underline dotted;
}

a:has(> h1, h2, h3, h4) {
	color: black;
	text-decoration: none;
}

.notes > div > div {
	border: none;
	resize: none;
	width: 100%;
	height: 100%;
}

.notes > div > div:focus {
	outline: none;
	background: aliceblue;
}

.main {
	margin: 0 auto;
	height: 95%;
	width: 380px;
	min-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1em;
}

.notes {
	flex-direction: row;
	display: flex;
	flex: auto;
	width: 90vw;
	gap: 2em;
	padding: 0 0 3em 0;
}

.notes > div {
	flex: 1 0 0;
	min-width: 25vw;
	white-space: pre-line;
	font-family: monospace;
}

.notes > div > h3 {
	margin: 0 0 0 0;
}

@media (max-aspect-ratio: 0.75) {
	html, body {
		overflow-x: hidden;
	}
	.main {
		width: unset;
	}
	.notes {
		flex-direction: column;
		width: fit-content;
		overflow: hidden;
	}
	.notes > div {
		min-width: 90vw;
	}
}