@import url("../common.css");

@import url("../assets/fonts/giphurs.css");

:root {
	--surface: #000;
	--surface-bright: #181818;
	--on-surface-dark: #666561;
	--on-surface-faint: #8f8f8f;
	--on-surface: #E6E3DA;
	--on-surface-bright: #FFFCF2;
	--primary: #FF672B;
	--secondary: #5C7AFF;
}

html {
	background: no-repeat url("../assets/images/background.png") var(--surface);
	background-size: 600px;
	background-position: bottom right;
	background-origin: padding-box;
	background-attachment: fixed;

	transition: background-size 0.25s;
}

@media (max-width: calc(800px + 32px)) {
	html {
		background-size: 500px;
	}
}

body {
	font-family: "Giphurs", sans-serif;
	font-size: 1.25rem;
	color: var(--on-surface);
}

a {
	color: var(--secondary);
}

a:visited {
	color: var(--secondary);
}

.small_line {
	color: var(--on-surface-faint);
	font-size: 1.1rem;
}

.small_line a {
	color: var(--on-surface-faint);
	text-decoration: underline;
}

.small_line a:visited {
	color: var(--on-surface-faint);
	text-decoration: underline;
}

code {
	font-size: 80%;

	border: 1px solid var(--on-surface-dark);
	border-radius: 8px;
	padding: 2px 4px;
	background-color: var(--surface);
}

pre.code_block {
	font-size: 1rem;

	overflow: hidden;
	overflow-wrap: anywhere;
	white-space: pre-wrap;

	border: 1px solid var(--on-surface-dark);
	border-radius: 8px;
	padding: 12px 12px;
	background-color: var(--surface);
}

pre.code_block span.shell_symbol {
	color: var(--primary);
}

div.dialogue {
	display: flex;
	gap: 16px;
}

div.dialogue.left {
	flex-direction: row;
}

div.dialogue.right {
	flex-direction: row-reverse;
}

@media (max-width: calc(800px + 32px)) {
	div.dialogue.left {
		flex-direction: column;
	}

	div.dialogue.right {
		flex-direction: column;
	}
}

div.dialogue img {
	margin: 0 auto;
}

div.dialogue p {
	display: block;
	height: fit-content;
	border-radius: 8px;
	flex: 1;
	padding: 16px 24px;
	background-color: var(--surface-bright);
}