@import url("/assets/fonts/libre-baskerville/libre-baskerville.css");
@import url("/assets/fonts/departuremono/departuremono.css");

:root {
	color-scheme: light dark;
	font-family: system-ui, sans-serif;
	--font-family-header: "Departure Mono", monospace;
	--font-family-serif: "Libre Baskerville", serif;
	font-size: 1.1em;

	--padding: 4px;
	--padding2x: calc(var(--padding) * 2);
	--padding3x: calc(var(--padding) * 3);
	--padding4x: calc(var(--padding) * 4);

	/* Colours */

	--background: #27003b;
  --background: radial-gradient(circle,rgba(39, 0, 59, 1) 0%, rgba(139, 61, 217, 1) 100%);
	--red: #ab0f0f;
	--red-transparent: #ab202022;
	--accent: coral;
	--accent-transparent: coral;
	--accent-verytransparent: coral;
	--text: light-dark(black, hsl(0, 0%, 80%));

	color: var(--text);

	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--background);
	padding: var(--padding4x);
	white-space: wrap;

	.wrapper {
		max-width: 750px;
		margin-inline: auto;
	}
}

@media (min-width: 1200px) {
	:root {
		font-size: 1.15em;
	}
	body > .wrapper {
		max-width: 1200px;
		display: flex;
		gap: calc(var(--padding4x) * 2); /* PADDING 4X ISN'T ENOUGH */
		.left-side, .right-side {
			max-width: 50%;
		}
		&.post {
			.left-side {
				min-width: 300px;
			}
			.middle-side {
				max-width: 665px;
			}
			.right-side {
				min-width: 160px;
			}
		}
	}
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-family-header);
}

h1,h2,h3,h4,h5,h6,p {
	margin-block: 0.85lh;
}

pre:has(code) {
	border: 1px solid var(--accent);
	border-left: 12px solid var(--accent);
	border-radius: 0px;
	padding: var(--padding2x);
	overflow: scroll;

	code {
		border: none;
		background-color: unset;
	}
}

code {
	font-size: 1em;
	font-family: monospace, monospace; /* declaring monospace twice fixes weird font sizing issues */
	border: 1px solid var(--accent-transparent);
	border-radius: 0px;
	padding-inline: 4px;
}

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

li {
	margin-block: var(--padding3x);
}

hr {
	border: 1px solid var(--accent-transparent);
}

blockquote {
	margin-left: 0;
	padding-left: 32px;
	/* border-left: 2px solid var(--accent); */
	font-style: italic;
	flex-direction: row;
	color: var(--accent);

	&::before {
		content: "";
		mask-image: url("/assets/quote.svg");
		background-color: var(--accent-transparent);
		width: 24px;
		height: 20px;
		display: block;
		position: absolute;
		transform: translateX(-32px);
	}
}

img {
	max-width: 100%;
}

div.outgoing.message {
	background-color: var(--accent-verytransparent);
	padding-inline: var(--padding2x);
	padding-block: calc(var(--padding) / 2);
	margin-block: var(--padding2x);
	border-radius: 4px;
}

.nixie {
	border: 1px solid var(--accent);
	image-rendering: pixelated;
}

.story {
	font-family: var(--font-family-serif);
}

.redbox {
	background-color: var(--red-transparent);
	border: 2px solid var(--red);
	padding: var(--padding2x);
	margin-block: 0.5lh;
	a {
		color: var(--text);
	}
	&.pulse {
		animation: pulse .9s infinite
	}
}

@media (prefers-reduced-motion: reduce) {
	.pulse {
		animation: none!important;
	}
}

@media (prefers-contrast: more) {
	:root {
		--background: light-dark(white, black);
		--red: #ab0f0f;
		--red-transparent: #ab202022;
		--accent: light-dark(black, hsl(0, 0%, 80%));
		--accent-transparent: light-dark(hsla(0, 0%, 0%, .75), hsla(0, 0%, 100%, .75));
		--accent-verytransparent: light-dark(hsla(0, 0%, 0%, 0.25), hsla(0, 0%, 100%, .35));
		--text: light-dark(black, hsl(0, 0%, 80%));
	}
}

@keyframes pulse {
  to {
    border:2px solid transparent
  }
}

.emoji {
	height: 1.25em;
	width: 1.25em;
	vertical-align: middle;
}

@media (pointer: coarse),
(hover: none) {
  [title] {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }

  [title]:focus::after,
  [title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 120%;
    color: black;
    background-color: white;
    width: max-content;
    padding: var(--padding);
    z-index: 10;
  }
}