@font-face {
    font-family: "Multiple Sans Pro";
    src: url("/fonts/MultipleSansPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Multiple Slab Pro";
    src: url("/fonts/MultipleSlabPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro S";
    src: url("/fonts/iAWriterQuattroS-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

:root {
	--write-width: 50ch;
}

html,
body {
	background-color: var(--site-background-color);
	color: var(--text-color);
	width: 100%;
	margin: 0;
}

html {
	font-size: 16px;
	line-height: 1.66667;
	text-rendering: geometricPrecision;
	transition: all linear 500ms;
}

html[data-theme="light"] {
	--site-background-color: #FFF8EF;
	--text-color: #302100;
	--ui-color: #926700;
	--selection-color: #FFE0B2;
}

html[data-theme="dim"] {
	--site-background-color: #3e6b74;
	--text-color: rgba(255, 255, 255, 0.75);
	--ui-color: #0094B4;
	--selection-color: rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] {
	--site-background-color: #201100;
	--text-color: #FFE0B2;
	--ui-color: #926700;
	--selection-color: #523800;
}

html[data-font="sans-serif"] {
	--font-family: "Multiple Sans Pro", sans-serif;
	--font-feature-settings: "ss03";
	--write-font-size: 1.666667rem;
}

html[data-font="serif"] {
	--font-family: "Multiple Slab Pro", sans-serif;
	--font-feature-settings: "";
	--write-font-size: 1.666667rem;
}

html[data-font="mono"] {
	--font-family: "iA Writer Quattro S", monospace;
	--font-feature-settings: "";
	--write-font-size: 1.5rem;
	--write-width: 58ch;

	#write {
		letter-spacing: -0.03em;
	}
}

body {
	font-family: var(--font-family);
	font-feature-settings: var(--font-feature-settings);
	display: grid;
	grid-template-columns: 100%;
	padding: 5rem 4rem;
	min-height: 100vh;
	transition: all linear 500ms;
}

:focus {
	outline: 0;
}

:focus-visible {
	outline: 2px solid magenta;
}

#write {
	margin-inline: auto;
	width: 100%;
	max-width: var(--write-width);
	font-size: var(--write-font-size);
	cursor: text;
	caret-color: var(--ui-color);
	align-content: end;
	min-height: calc(100vh - 10rem);
	padding-block-end: 0.25rem;
	transition: color linear 500ms;
	word-break: break-word;

	&:focus-visible {
		outline: 0;
	}
}

.tools {
	position: fixed;
	top: 0;
	right: 0;
	padding: 1rem;
	opacity: 0.1;

	&:hover,
	&:focus-within {
		opacity: 1;
	}

	& button {
		display: block;
		background-color: var(--site-background-color);
		color: var(--text-color);
		border: 2px solid var(--text-color);
		border-radius: 0.33rem;
		padding: 0.25rem;
		cursor: pointer;
		line-height: 1;

		&:hover {
			background-color: var(--selection-color);
		}
	}
}

#sans-serif {
	font-family: "Multiple Sans Pro";
	font-size: 32px;
	line-height: 1;
	text-align: center;
	width: 44px;
	display: block;
}

#serif {
	font-family: "Multiple Slab Pro";
	font-size: 32px;
	line-height: 1;
	text-align: center;
	width: 44px;
	display: block;
}

#mono {
	font-family: "iA Writer Quattro S";
	font-size: 32px;
	line-height: 1;
	text-align: center;
	width: 44px;
	display: block;
}

#load,
#light-mode,
#sans-serif {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
}

#save,
#dark-mode,
#mono {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

#serif,
#dim-mode {
	border-radius: 0;
	border-bottom: 0;
}

#fullscreen,
#save,
#dark-mode {
	margin-block-end: 0.66667rem;
}

::selection {
	background-color: var(--selection-color);
}