:root {
	--white: #fff;
	--gray: #2a364d;
	--darkgray: #0f1726;
	--graybrown: #403430;
	--textgray: #7489a6;
	--textbrown: #a6938d;
	--gold: #bf8b43;
	--darkgold: #a66c32;
	--chocolate: #734211;
	--darkchocolate: #4d2e0f;
	--red: #ff5040;
	--darkred: #b33636;
	--orange: #ff8f40;
	--darkorange: #bf550a;
	--yellow: #ffc926;
	--darkyellow: #cc8800;
	--green: #8dd941;
	--darkgreen: #2e995b;
	--cyan: #00e5d2;
	--darkcyan: #009999;
	--teal: #00bfff;
	--darkteal: #1480cc;
	--blue: #4070ff;
	--darkblue: #1b41b3;
	--purple: #b266ff;
	--darkpurple: #7441d9;
	--pink: #f2498f;
	--darkpink: #bf306c;
	--bg: linear-gradient(180deg, var(--graybrown), var(--gray) 25%);
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	:root {
		--gray: color(display-p3 0.16 0.21 0.30 / 1);
		--darkgray: color(display-p3 0.06 0.09 0.15 / 1);
		--graybrown: color(display-p3 0.25 0.20 0.19 / 1);
		--textgray: color(display-p3 0.45 0.54 0.65 / 1);
		--textbrown: color(display-p3 0.65 0.58 0.55 / 1);
		--gold: color(display-p3 0.75 0.55 0.26 / 1);
		--darkgold: color(display-p3 0.65 0.42 0.20 / 1);
		--chocolate: color(display-p3 0.45 0.26 0.07 / 1);
		--darkchocolate: color(display-p3 0.30 0.18 0.06 / 1);
		--red: color(display-p3 1.00 0.31 0.25 / 1);
		--darkred: color(display-p3 0.70 0.21 0.21 / 1);
		--orange: color(display-p3 1.00 0.56 0.25 / 1);
		--darkorange: color(display-p3 0.75 0.33 0.04 / 1);
		--yellow: color(display-p3 1.00 0.79 0.15 / 1);
		--darkyellow: color(display-p3 0.80 0.53 0.00 / 1);
		--green: color(display-p3 0.55 0.85 0.25 / 1);
		--darkgreen: color(display-p3 0.18 0.60 0.36 / 1);
		--cyan: color(display-p3 0.00 0.90 0.82 / 1);
		--darkcyan: color(display-p3 0.00 0.60 0.60 / 1);
		--teal: color(display-p3 0.00 0.75 1.00 / 1);
		--darkteal: color(display-p3 0.08 0.50 0.80 / 1);
		--blue: color(display-p3 0.25 0.44 1.00 / 1);
		--darkblue: color(display-p3 0.11 0.25 0.70 / 1);
		--purple: color(display-p3 0.70 0.40 1.00 / 1);
		--darkpurple: color(display-p3 0.45 0.25 0.85 / 1);
		--pink: color(display-p3 0.95 0.29 0.56 / 1);
		--darkpink: color(display-p3 0.75 0.19 0.42 / 1);	
	}
}

* {
	box-sizing: border-box;
}

body {
	color: var(--textgray);
	background: var(--bg);
	font-family: "Womprat", -apple-system, sans-serif;
	font-size: 24px;
}

#container {
	width: 1040px;
	margin: auto;
}

.header {
	margin: 64px 32px 36px 32px;
	width: 976px;
	text-transform: uppercase;
}

h1, h2, h3 {
	font-weight: normal;
}

h1 {
	font-size: 144px;
	margin: 0;
	padding-top: 48px;
	line-height: 128px;
	background: -webkit-linear-gradient(var(--darkgold), var(--chocolate));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 -1px 1px var(--white)) drop-shadow(0 16px 8px var(--gold));
}

h2 {
	color: white;
	font-size: 48px;
	display: inline;
}

h3 {
	font-size: 48px;
	color: var(--darkgold);
	margin: 0;
	position: relative;
	top: -8px;
}

ul {
	text-align: right;
	margin: 14px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
}

li {
	display: inline;
	color: var(--textbrown);
	font-size: 32px;
	margin-left: 32px;
}

li:hover {
	color: var(--white);
}

.button {
	width: 440px;
	border-radius: 16px;
	border: 3px solid var(--textgray);
	background: linear-gradient(var(--gray), var(--darkgray));
	margin: 32px 16px;
	padding: 8px 12px 8px 12px;
	font-size: 48px;
	color: white;
	display: inline-block;
	text-shadow: 0 4px 4px var(--darkgray);
}

.button.buy {
	border: 3px solid var(--darkgold);
	background: linear-gradient(var(--chocolate), var(--darkchocolate));
	text-shadow: 0 4px 4px var(--darkchocolate);
}
.button.download {
	font-family: "Womprat Aurebesh";
}

.button.audio {
	cursor: pointer;
	width: 48px;
	border-radius: 8px;
	border: 3px solid var(--textgray);
	background: transparent;
	margin: 0;
	padding: 4px 6px 4px 6px;
	font-size: 32px;
	text-align: center;
	color: var(--textgray);
	display: inline-block;
	text-shadow: none;
}

.button.chewie:hover {
	color: var(--darkgold);
	border: 3px solid var(--darkgold);
	background: transparent;
}

.button.porg:hover {
	color: var(--white);
	border: 3px solid var(--white);
	background: transparent;
}

.button.watto:hover {
	color: var(--blue);
	border: 3px solid var(--blue);
	background: transparent;
}

.button div {
	color: var(--textgray);
	font-size: 24px;
}

.button.buy div {
	color: var(--gold);
}

.button:hover div {
	color: white;
}

.button:hover {
	border: 3px solid var(--white);
	background: linear-gradient(var(--textgray), var(--gray));
}

.button.buy:hover {
	border: 3px solid var(--gold);
	background: linear-gradient(var(--darkgold), var(--chocolate));
}

hr {
	margin: 32px;
	width: 976px;
	border: solid 1px var(--textbrown);
	opacity: .375;
}

hr.gray {
	border: solid 1px var(--textgray);
}

.bin {
	margin: 16px 32px;
	display: inline-grid;
	grid-gap: 32px;
}

.twoup { grid-template-columns: auto auto; }
.threeup { grid-template-columns: auto auto auto; }

.item {
	background: var(--darkgray);
	border-radius: 4px;
}

.art {
	color: var(--gray);
	border-radius: 4px 4px 0 0;
	height: 240px;
	font-size: 96px;
	overflow: hidden;
	line-height: 70px;
}

.teal .art { background: var(--teal); }
.teal .tally { color: var(--teal); }
.teal .color { color: var(--darkteal); }
.red .art { background: var(--red); }
.red .tally { color: var(--red); }
.red .color { color: var(--darkred); }
.green .art { background: var(--green); }
.green .tally { color: var(--green); }
.green .color { color: var(--darkgreen); }
.purple .art { background: var(--purple); }
.purple .tally { color: var(--purple); }
.purple .color { color: var(--darkpurple); }
.orange .art { background: var(--orange); }
.orange .tally { color: var(--orange); }
.orange .color { color: var(--darkorange); }
.cyan .art { background: var(--cyan); }
.cyan .tally { color: var(--cyan); }
.cyan .color { color: var(--darkcyan); }
.yellow .art { background: var(--yellow); }
.yellow .tally { color: var(--yellow); }
.yellow .color { color: var(--darkyellow); }
.blue .art { background: var(--blue); }
.blue .tally { color: var(--blue); }
.blue .color { color: var(--darkblue); }
.pink .art { background: var(--pink); }
.pink .tally { color: var(--pink); }
.pink .color { color: var(--darkpink); }

.gray .art { background: var(--textgray); }
.gray .tally { color: var(--white); }
.gray .color { color: var(--white); }

.white { color: var(--white); }
.quiet { color: var(--gray); }
.footer.quiet { color: var(--textgray)}

.sand {
	background: url("sand.jpg");
	background-size: 976px;
	height: 272px;
}
.wallpaper {
	background: url("WompratWallpaperPreview.jpg");
	background-size: 976px;
	height: 282px;
}

.description {
	padding: 8px 16px;
	display: inline-block;
}

.twoup .description {
	padding: 4px 8px 4px 16px;
}

.description p {
	margin: 0 0 24px 0;
	line-height: 24px;
}

.description p.tally {
	margin: 12px 0;
}

.description p.may4th {
	color: var(--white);
	font-size: 48px;
	margin: 24px 0;
}

.tally {
	font-size: 48px;
	text-shadow: 0 0 12px;
}

.oneup .item {
	width: 976px;
	text-align: center;
}

.twoup .item {
	width: 472px;
	height: 240px;
}

.oneup .item.icons .art {
	padding-top: 37px;
	height: 144px;
}

.oneup .item.titling .art {
	padding-top: 42px;
	height: 224px;
}

.threeup .item .art {
	padding-top: 37px;
	height: 144px;
	margin: 0;
	color: white;
	text-align: center;
}

.twoup .item .art {
	width: 192px;
	margin: 0;
	border-radius: 4px 0 0 4px;
	padding: 16px 0 0 14px;
}

.twoup .item .description {
	width: 280px;
	margin: 0;
	position: relative;
	left: 192px;
	top: -240px;
}

.threeup .item {
	width: 304px;
}

.footer {
	font-size: 32px;
	text-align: center;
	margin: 16px 0 64px 0;
}

.footer p {
	margin: 16px;
}

.mini {
	font-size: 16px;
	margin-bottom: 48px;
}

a {
	color: var(--textbrown);
	text-underline-offset: 4px;
}

.header a, .footer a {
	text-decoration: none;
}