/* Font Face Definitions
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
	font-family: "IBM Plex Sans";
	src: url(../fonts/IBMPlexSans.ttf);
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url(../fonts/IBMPlexMono.ttf);
}

/*
* LittleLink Reset
* A minimal CSS reset for LittleLink
*/

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Modern focus styles */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid #2457f5;
	outline-offset: 2px;
}

/* Remove touch callout on iOS
* a {
*   -webkit-touch-callout: none;
* }
*/

/*
* LittleLink
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	font-size: 16px;
}

/* Grid
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
	position: relative;
	width: 100%;
	max-width: 37.5rem; /* 600px */
	text-align: center;
	margin: 0 auto;
	padding: 3rem 1.25rem 0 1.25rem;
	box-sizing: border-box;
}
.container-left {
	position: relative;
	width: 100%;
	max-width: 37.5rem;
	text-align: left;
	margin: 0 auto;
	padding: 0 1.25rem;
	box-sizing: border-box;
}
.container-left p {
	margin-bottom: 1rem; /* 16px space between paragraphs */
}
.column {
	position: center;
	width: 100%;
	float: center;
	box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 25rem) {
	/* 400px */
	.container {
		width: 85%;
		padding-left: 0;
		padding-right: 0;
	}
} /* For devices larger than 550px */
@media (min-width: 34.375rem) {
	/* 550px */
	.container {
		width: 80%;
	}
	.column,
	.columns {
		margin-left: 0;
	}
	.column:first-child,
	.columns:first-child {
		margin-left: 0;
	}
}

/* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color: #1a1a1a;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6;
}

/* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
	margin: 0 0 0.5rem 0;
	font-size: 3rem; /* 48px */
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.container p {
	margin: 0 0 2rem 0;
}

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Base size - 16px browser default */
:root {
	font-size: 16px; /* Using a 1.25 modular scale for typography */
	--scale-0: 1rem; /* 16px */
	--scale-0a: 1.125rem; /* 18px */
	--scale-1: 1.125rem; /* 20px */
	--scale-2: 1.563rem; /* 25px */
	--scale-3: 1.953rem; /* 31px */
	--scale-4: 2.441rem; /* 39px */
	--scale-5: 3.052rem; /* 49px */

	/* Spacing units */
	--spacing-xs: 0.5rem; /* 8px */
	--spacing-s: 1rem; /* 16px */
	--spacing-m: 1.5rem; /* 24px */
	--spacing-l: 2rem; /* 32px */
	--spacing-xl: 3rem; /* 48px */
	--spacing-xxl: 4rem; /* 64px */
}

/* Avatar */
.avatar {
	width: 8rem; /* 128px */
	height: 8rem;
	border-radius: 50%;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* Typography Scale */
h1 {
	margin: 0 0 var(--spacing-m) 0;
	font-size: var(--scale-5); /* ~49px */
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
body {
	font-size: var(--scale-1); /* 20px */
	line-height: 1.6;
}
.container p {
	margin: 0 0 var(--spacing-l) 0;
	font-size: var(--scale-1);
	line-height: 1.6;
}

/* Container spacing */
.container {
	padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
	text-align: center;
}

/* Footer */
footer {
	margin: var(--spacing-l) 0; /* 4rem (64px) top and bottom */
	font-size: var(--scale-0);
}

/* Responsive adjustments */
@media (max-width: 34.375rem) {
	/* 550px */
	h1 {
		font-size: var(--scale-4);
	}
	body {
		font-size: var(--scale-0);
	}
	.container p {
		font-size: var(--scale-0a);
	}
	.avatar {
		margin-bottom: var(--spacing-m);
	}
	footer {
		margin: var(--spacing-xl) 0; /* 3rem (48px) top and bottom */
	}
}

/* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #0085ff;
	text-decoration: underline;
}
a:hover {
	color: #083bda;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18.75rem; /* 300px */
	min-height: 3rem; /* 48px */
	padding: 0.75rem 1rem; /* 12px ; 16px */
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	text-decoration: none;
	white-space: normal;
	background-color: var(--button-background, transparent);
	color: var(--button-text, #000000);
	border: var(--button-border, none);
	border-radius: 0.5rem;
	cursor: pointer;
	box-sizing: border-box;
	hyphens: auto; /* Delete this to remove automatic hyphen on line break */
	margin-bottom: 1rem;
	text-align: center;
	line-height: 1.3;
}

/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
}

/* Avatar
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.avatar {
	width: 8rem; /* 128px */
	height: 8rem;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
}

/* Modifier for rounded avatar */
.avatar--rounded {
	border-radius: 50%;
}

/* Theme System
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Light theme is default above */

/* Dark theme */
:root.theme-dark {
	color-scheme: dark;
}
:root.theme-dark :focus-visible {
	outline: 2px solid #4899f7;
	outline-offset: 2px;
}
:root.theme-dark body {
	background-color: #121212;
	color: #ffffff;
}
:root.theme-dark a:not(.button) {
	color: #4899f7;
}
:root.theme-dark a:not(.button):hover {
	color: #7ab8ff;
}

/* Auto theme */
:root.theme-auto {
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root.theme-auto body {
		background-color: #121212;
		color: #ffffff;
	}
	:root.theme-auto :focus-visible {
		outline: 2px solid #4899f7;
		outline-offset: 2px;
	}
	:root.theme-auto a:not(.button) {
		color: #4899f7;
	}
	:root.theme-auto a:not(.button):hover {
		color: #7ab8ff;
	}
}

/* Button Text Color Override
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button:hover,
button:hover {
	color: var(--button-text);
}

/* Responsive Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 34.375rem) {
	/* 550px */
	h1 {
		font-size: 2rem; /* 32px */
	}
	body {
		font-size: 1rem; /* 16px */
	}
}

/* Privacy Page Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
	margin: var(--spacing-l) 0;
	text-align: left;
}
section {
	margin: var(--spacing-xl) 0;
	text-align: left;
}
h2 {
	font-size: var(--scale-3);
	font-weight: 700;
	margin-bottom: var(--spacing-m);
}
h3 {
	font-size: var(--scale-2);
	font-weight: 600;
	margin: var(--spacing-l) 0 var(--spacing-s) 0;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-m) 0;
}
ul li {
	margin-bottom: var(--spacing-xs);
}

/* Privacy page specific responsive adjustments */
@media (max-width: 34.375rem) {
	h2 {
		font-size: var(--scale-2);
	}
	h3 {
		font-size: var(--scale-1);
	}
	section {
		margin: var(--spacing-l) 0;
	}
}

/*
* LittleLink Button Styles
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Brand Button Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Only include brand-specific button styling here */
.button,
button {
	color: var(--button-text, #000000);
	background-color: var(--button-background, transparent);
	border: var(--button-border, none);
	transition:
		filter 0.2s ease,
		transform 0.2s ease;
}

/* Global Button Hover Effect
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (hover: hover) {
	.button:hover,
	button:hover {
		filter: brightness(90%);
		transform: translateY(-1px);
	}
}

/* Button Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	filter: var(--icon-filter, none);
}

/* Brand-Specific Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default */
.button.button-default {
	--button-text: #ffffff;
	--button-background: #0085ff;
}

/* Beeper */
.button-beeper {
	--button-text: #ffffff;
	--button-background: #355bf3;
}

.button-beeper .icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.25rem;
}

/* Initial Charge */
.button-initialcharge {
	--button-text: #ffffff;
	--button-background: #000000;
	--button-border: 2px solid #ffffff;
}

.button-initialcharge .icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.25rem;
}

/* Last.fm */
.button-last-fm {
	--button-text: #ffffff;
	--button-background: #f71414;
}

/* Mastodon */
.button-mastodon {
	--button-text: #ffffff;
	--button-background: #1f232b;
}

/* MetaGamerScore */
.button-metagamerscore {
	--button-text: #000000;
	--button-background: #f0f0f0;
}

/* PayPal */
.button-paypal {
	--button-text: #ffffff;
	--button-background: #002991;
	--button-border: 1px solid #ffffff;
}

/* Pixelfed */
.button-pixelfed {
	--button-text: #000000;
	--button-background: #ffffff;
	--button-border: 2px solid #000000;
}

/* Value for Value */
.button-v4v {
	--button-text: #ffffff;
	--button-background: #1dbf73;
}

.button-v4v .icon {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
}

/* Custom Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

details.value-block > summary {
	list-style: none;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

details.value-block > summary::-webkit-details-marker {
	display: none;
}

.value-block ul {
	list-style-type: none;
	padding-inline-start: 0;
}

.value-block code {
	font-size: 0.75rem;
}

code,
kbd,
pre,
samp {
	font-family: "IBM Plex Mono", monospace;
}

.value-block code {
	padding: 0.2rem 0.5rem;
	margin: 0 0.2rem;
	white-space: nowrap;
	background: #f1f1f1;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
}

/* Fix v4v details block hover and open styles */
details[open] summary span.button.button-v4v {
	filter: brightness(90%);
	transform: 0px;
}
@media (hover: hover) {
	details[open] summary span.button.button-v4v:hover {
		transform: -1px;
	}
}

details:not([open]) {
	filter: brightness(100%);
	transform: 0px;
}
@media (hover: hover) {
	details:not([open]) summary span.button.button-v4v:hover {
		filter: brightness(90%);
		transform: -1px;
	}
}
/* /end Fix v4v details block hover and open styles */

p.value-explainer {
	margin-top: 2rem;
}

details.value-block ul li {
	margin-bottom: 32px;
}
details.value-block ul li img {
	margin-left: auto;
	margin-right: auto;
}

span.button.button-v4v {
	margin-bottom: 0;
}

span.crypto-js-qr img {
	width: 150px;
}