:root {
	--col-base: #3d3646cc;
	--col-surface: #2f2a3688;
	--col-surface-hover: #2f2a36;
	--col-surface-select: #241e2c;
	--col-base-text: #fce5f5;
	--col-text-subtle: #d1b8c5;
	--col-highlight: #d17490;
	--col-shadow: #2f2a36;
	--col-shadow-soft: #2f2a36;

	--col-text-light: #fce5f5;
}

@media (prefers-color-scheme: light) {
	:root {
		--col-base: #fcdcf0cc;
		--col-surface: #ddc2d588;
		--col-surface-hover: #ddc2d5;
		--col-surface-select: #bb83b6;
		--col-base-text: #3d3646;
		--col-text-subtle: #776670;
		--col-highlight: #d17490;
		--col-shadow: #2f2a36;
		--col-shadow-soft: #ad7fad;
	}
}

html {
	width: 100%;
	min-height: 100%;
}

body {
	width: 100%;
	min-height: 100%;
	background-size: cover;
	background-position: left top;
	
	font-family: rubik, sans-serif;
	color: var(--col-base-text);
}

main {
	background-color: var(--col-base);

	margin: 1rem auto 1rem auto;
	width: 100%;
	height: 100%;

	padding: 1rem;

	box-shadow: 0.5rem 0.5rem 1rem var(--col-shadow);
}

footer {
	width: 100%;
	padding: 0rem 1rem;
	margin: 0 auto;
	font-family: comfortaa, sans-serif;
	font-weight: 700;

	color: var(--col-text-light);
	text-shadow: 0.15rem 0.15rem 0.25rem var(--col-shadow);
}

@media screen and (min-width: 50rem) {
	main {
		border-radius: 2rem;
		max-width: 50rem;
	}
	footer {
		max-width: 50rem;
	}
}

user-card {
	width: 100%;
	flex-grow: 5;
	gap: 1rem;
	display: grid;
	grid-template-columns: 8rem 1fr;
	grid-template-rows: 3.5rem 1fr;
	grid-template-areas:
		"useravatar usertitle"
		"useravatar userbio";
	row-gap: 0.1rem;
	column-gap: 1rem;

	margin-bottom: 0.1rem;
}

user-title {
	grid-area: usertitle;
	display: grid;
	grid-template-columns: fit-content 1fr;
	grid-template-rows: 1.8rem 1.7rem;
	grid-template-areas:
		"username usericons"
		"userid usericons";
	row-gap: 0.1rem;
	column-gap: 1rem;
}

@media screen and (max-width: 40rem) {
	user-card {
		grid-template-columns: 8rem 1fr;
		grid-template-rows: 8rem 1fr;
		grid-template-areas:
			"useravatar usertitle"
			"userbio userbio";
		row-gap: 0.5rem;
	}

	user-title {
		grid-template-columns: 1fr;
		grid-template-rows: 1.8rem 1.7rem 1fr;
		grid-template-areas:
			"username"
			"userid"
			"usericons";
	}
}

user-avatar {
	grid-area: useravatar;
	max-width: 8rem;
	max-height: 8rem;
	border-radius: 1rem;
	padding: 0.25rem;
	border: 2px solid var(--col-highlight);
	box-shadow: 0px 0px 5px var(--col-highlight);
}

user-avatar > a > img {
	max-width: 100%;
	max-width: 100%;
	border-radius: 0.75rem;
}

user-name {
	grid-area: username;
	display: block;
	font-family: comfortaa, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: -0.25rem;
	flex-grow: 0;
}

user-id {
	grid-area: userid;
	display: block;
	font-family: space-mono, monospace;
	font-weight: 700;
	width: min-content;
	font-style: italic;
	color: var(--col-text-subtle);
	flex-grow: 0;
	border-radius: 0.5rem;
	padding: 0.1rem 0.25rem 0rem 0.25rem
}

user-icons {
	width: 100%;
}

user-bio {
	grid-area: userbio;
	font-family: comfortaa, sans-serif;
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: 1rem;
	background-color: var(--col-surface);
	/*border: 2px solid var(--col-subtle);*/
	flex-grow: 5;
	height: 100%;
}

link-tree {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

link-tree > *, link-tree > *:visited {
	color: var(--col-base-text);
	text-decoration: none;
}

link-tree > * {
	width: 100%;
	min-width: 20rem;
	flex-grow: 1;
}

link-element {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "linktext";
	
	background-color: var(--col-surface);
	border-radius: 1rem;
	padding: 0.5rem 0.5rem;
	column-gap: 0.25rem;

	border: 2px solid var(--accent-color);
	box-shadow: 0 0 0.25rem var(--accent-color) inset, 0.1rem 0.1rem 1rem var(--col-shadow-soft);
}

a > link-element:hover {
	background-color: var(--col-surface-hover);
	box-shadow: 0 0 1rem var(--accent-color);
}

link-element.has-icon-true {
	grid-template-columns: 3rem 1fr;
	grid-template-areas: "linkicon linktext";
}

link-element.has-note-true {
	grid-template-rows: 3rem 1fr;
	grid-template-areas:
		"linktext"
		"linknote";
}

link-element.has-icon-true.has-note-true {
	grid-template-areas:
		"linkicon linktext"
		"linknote linknote";
}

link-icon {
	grid-area: linkicon;
}

link-note {
	grid-area: linknote;
	padding: 0.5rem 0.6rem;
	border-radius: 1rem;
	background-color: var(--col-surface);
	font-family: comfortaa, sans-serif;
}

link-text {
	display: grid;
	gap: 0.1rem 0.1rem;
	grid-area: "linktext";
	grid-template-rows: 1fr;
	grid-template-areas: "linktitle";
}

link-text.has-name-true {
	grid-template-rows: 1.5rem 1fr;
	grid-template-areas:
		"linktitle"
		"linkname";
}

a > link-element > link-text > link-title {
	text-decoration: underline;
}
link-title {
	grid-area: linktitle;
	font-family: comfortaa, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
}

link-name {
	color: var(--col-text-subtle);
	grid-area: linkname;
	font-family: space-mono, monospace;
	font-weight: 700;
	font-style: italic;
}

link-icon {
	width: 3rem;
	height: 3rem;
}

link-icon > img {
	width: 3rem;
	height: 3rem;
}

user-field-divider {
	display: block;
	width: 100%;
	height: 0.25rem;
	background-color: var(--col-highlight);
	margin-bottom: 0.25rem;
	border-radius: 0.25rem;
}

user-barcode {
	font-family: 'Libre Barcode 128 Text', display;
	font-size: 2rem;
	text-align: right;
	width: 100%;
	display: block;
	color: var(--col-highlight)
}