@font-face {
	font-family: "Obviously";
	src: url("fonts/Obviously-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Obviously";
	src: url("fonts/Obviously-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Obviously";
	src: url("fonts/Obviously-Semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}

:root {
	--txt: #ffe5cc;
	--sub: #cc70ad;
	--leg: #a6327f;
	--fg: #800055;
	--bg: #4d0033;
	--pink: #ff73ad;
	--orange: #ff7559;
	--yellow: #ffba59;
	--green: #36d9a3;
	--blue: #61c2f2;
	--indigo: #73a1ff;
	--transgreen: rgba(54, 217, 163, .5);
	--transindigo: rgba(128, 149, 255, .5);
	--trans: rgba(97, 194, 242, 0);
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	:root {
	--txt: color(display-p3 1.00 0.90 0.80 / 1);
	--sub: color(display-p3 0.80 0.44 0.68 / 1);
	--leg: color(display-p3 0.65 0.20 0.50 / 1);
	--fg: color(display-p3 0.50 0.00 0.33 / 1);
	--bg: color(display-p3 0.30 0.00 0.20 / 1);
	--pink: color(display-p3 1.00 0.45 0.68 / 1);
	--orange: color(display-p3 1.00 0.46 0.35 / 1);
	--yellow: color(display-p3 1.00 0.73 0.35 / 1);
	--green: color(display-p3 0.21 0.85 0.64 / 1);
	--blue: color(display-p3 0.38 0.76 0.95 / 1);
	--indigo: color(display-p3 0.45 0.63 1.00 / 1);
	--transgreen: color(display-p3 0.21 0.85 0.64 / .5);
	--transindigo: color(display-p3 0.45 0.63 1.00 / .5);
	--trans: color(display-p3 0.38 0.76 0.95 / 0);
	}
}

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

body {
	color: var(--txt);
	background: var(--bg);	
	text-shadow: rgba(0, 0, 0, .25) 0 12px 6px;
	font-family: "Obviously";
	font-feature-settings: "salt";
	font-weight: 400;
	font-size: 28px;
	margin: 0;
}

div#full {
	background: linear-gradient(180deg, var(--fg), var(--bg) 100%) no-repeat;
	background-size: 100% 640px;
	background-position: top center;
	width: 100%;
	top: 0;
	position: absolute;
}

div#container {
	margin: 0 auto;
	width: 864px;
}

div#content {
	margin: 96px auto;
	width: 800px;
}

div#avatar {
	background: var(--yellow);
	width: 128px;
	height: 128px;
	border-radius: 512px;
	box-shadow: rgba(0, 0, 0, .25) 0 12px 6px;
}

div#avatar svg { position: absolute; }

svg#glasses { fill: var(--fg); z-index: 3; }
svg#face { fill: var(--bg); z-index: 2; }
svg#eyes { fill: white; z-index: 1; }

p { margin: 0 0 24px 0; }

p.big {
	margin: 32px 0 24px 0;
	font-size: 44px;
	font-weight: 400;
	line-height: 52px;
}

p.big em {
	color: var(--yellow);
	font-weight: 600;
	font-style: normal;
}

p.small {
	margin: 32px 0 64px 0;
	color: var(--sub);
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
}

small {
	color: var(--leg);
	font-weight: 600;
}

p#footnote { margin: 32px 0; }

p#else { margin: 32px 0 16px 0; }

p#legal {
	margin: 32px 0;
	color: var(--leg);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

p#legal a {
	color: var(--sub); 
	text-decoration: none;
	font-weight: 600;
}

p#legal em {
	font-style: normal;
	font-weight: 600;
}

ul {
	margin: 16px 0 32px 0;
	color: var(--sub);
	font-size: 18px;
	line-height: 24px;
	font-weight: 200;
}

a, a:visited, a:active {
	color: var(--indigo);
	/* font-style: italic; */
	font-weight: 500;
	transition: 0.125s ease-out;
	text-decoration: underline;
	text-decoration-color: var(--transindigo);
	text-underline-offset: 3px;
}

a:hover { text-decoration-color: var(--indigo); }
a#parakeet { color: var(--green); text-decoration-color: var(--transgreen); }
a#parakeet:hover { text-decoration-color: var(--green); }

a.asterisk {
	color: var(--yellow);
	font-style: normal;
	text-decoration: none;
}

div.grid {
	width: 800px;
	margin: 0;
	display: inline-grid;
	grid-gap: 16px;
	grid-template-columns: auto auto auto;
}

img.item {
	width: 256px;
	height: 176px;
	background: var(--fg);
	border-radius: 3px;
	top: 0;
	box-shadow: rgba(0, 0, 0, .125) 0 4px 2px;
	transition: 0.25s ease-out;
	position: relative;
}

img.item:hover {
	top: -8px;
	box-shadow: rgba(0, 0, 0, .25) 0 12px 6px;
	transition: 0.125s ease-out;
	position: relative;
}