/* Layout and type follow the 2009 Save Walter White page: green sparkle
   background, Comic Sans copy, giant Times headline, yellow subtitle. All
   graphics are drawn here in CSS/SVG; nothing is copied from AMC's files. */

html, body {
	background: #1ba11a url(tile.png) top left repeat;
	font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
	margin: 0;
	padding: 0;
	color: #fff;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li {
	display: inline-block;
	vertical-align: top;
}
img {
	border: none;
}
a {
	color: #fff;
}

#walter-container {
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	width: 965px;
	max-width: 100%;
	box-sizing: border-box;
}
#walter-container h1 {
	color: #fff;
	font-family: Times, "Times New Roman", serif;
	font-size: 112px;
	font-weight: bold;
	line-height: 1.1;
	margin: 0;
	padding-top: 12px;
}
#walter-container h3 {
	font-size: 40px;
	font-weight: normal;
	margin: 0;
}
#walter-container p {
	font-weight: bold;
	margin: 1em 50px;
	line-height: 1.2em;
	text-align: left;
}
#walter-container p.middle {
	text-align: center;
}
#walter-container ul#first_row {
	margin-top: 26px;
}
#walter-container ul#second_row {
	margin: 42px 0;
}
#walter-container ul#second_row li {
	margin: 0 18px;
}
#walter-container ul#fourth_row li {
	margin: 40px 95px;
}

/* Photo frames. The original photos had a mustard border baked in; here it
   is CSS so any photo dropped into img/ gets the same frame. When a photo is
   missing, the label from data-label shows inside the empty frame. */
.photo {
	display: inline-block;
	position: relative;
	width: min(var(--w, 300px), calc(100vw - 48px));
	box-sizing: border-box;
	background: #0b4a0b;
	border: 5px solid #d8c829;
	box-shadow: inset 0 0 0 2px #fff;
	overflow: hidden;
	text-align: center;
}
.photo::before {
	content: attr(data-label);
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 12px;
	color: #fff54f;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
}
.photo img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Awareness ribbons flanking the first big line, like the original bows. */
#walter-container div.ribbons p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-left: 0;
	margin-right: 0;
	padding: 22px 0;
}
div.ribbons p::before,
div.ribbons p::after {
	content: "";
	flex: none;
	width: 56px;
	height: 92px;
	background: url(bow_left.svg) no-repeat center / contain;
}
div.ribbons p::after {
	background-image: url(bow_right.svg);
}

/* Orange banner (the original was a 928x165 PNG). */
#banner-container {
	margin: 30px 0 0;
}
.banner {
	width: 928px;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 16px 24px 20px;
	background: linear-gradient(#ffa133, #f8730c 55%, #f06204);
	box-shadow: 0 2px 0 #b64a00, inset 0 1px 0 rgba(255, 255, 255, .35);
}
.banner-title {
	display: block;
	font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
	font-style: italic;
	font-weight: bold;
	font-size: 64px;
	letter-spacing: -1px;
	line-height: 1.05;
	color: #ffe81a;
	text-shadow: 2px 2px 0 #7a3600;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 5px solid #ffe81a;
}
.banner-sub {
	display: block;
	font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
	font-weight: bold;
	font-size: 23px;
	color: #111;
}

/* Red glossy donate button (the original was a 329x158 PNG). */
#donate-container {
	margin: 40px 0;
}
.donate-button {
	display: inline-block;
	position: relative;
	width: 329px;
	max-width: 100%;
	height: 158px;
	box-sizing: border-box;
	padding-top: 34px;
	background: linear-gradient(#cf1a23, #ad1018 60%, #99090f);
	border: 3px solid #6a070c;
	border-radius: 16px;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 2px rgba(0, 0, 0, .45);
	color: #fff;
	font-family: Times, "Times New Roman", serif;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.1;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}
.donate-button::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 28px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	opacity: .9;
}
.donate-button:hover,
.donate-button:focus {
	filter: brightness(1.08);
}

/* Black "donations so far" box with an odometer-style counter. */
#donations-so-far {
	background: #000;
	width: 840px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 8px 8px 28px;
}
#donations-so-far p {
	margin: 12px 0;
}
#donation-counter {
	display: inline-flex;
	gap: 4px;
	margin-top: 32px;
}
#donation-counter li {
	display: inline-block;
	width: 34px;
	height: 46px;
	line-height: 46px;
	background: linear-gradient(#5c5c5c, #1c1c1c 45%, #000 55%, #2c2c2c);
	border: 1px solid #7a7a7a;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px #000;
	color: #fff;
	font-family: "Courier New", Courier, monospace;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

.white { color: #fff; }
.yellow { color: #fff54f; }
.dark-yellow { color: #ffe107; }
.small-copy { font-size: 21px; }
.medium-copy { font-size: 25px; }
.large-copy { font-size: 42px; }

.legal {
	text-align: center;
	padding: 20px;
	font-size: 16px;
	font-weight: bold;
}
.legal a {
	color: #fff;
}
.legal a + a {
	margin-left: 40px;
}
.about {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px 20px;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
}
.copyright {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	padding: 0 20px 24px;
}

/* Phones and small windows: same look, scaled down. */
@media (max-width: 1000px) {
	#walter-container {
		width: auto;
		padding: 12px;
	}
	#walter-container h1 { font-size: 15vw; }
	#walter-container h3 { font-size: 6.5vw; }
	#walter-container p { margin: 1em 8px; }
	.small-copy { font-size: 17px; }
	.medium-copy { font-size: 20px; }
	.large-copy { font-size: 28px; }
	#walter-container ul#second_row { margin: 24px 0; }
	#walter-container ul#second_row li,
	#walter-container ul#fourth_row li { margin: 10px 6px; }
	div.ribbons p { gap: 10px; padding: 10px; }
	div.ribbons p::before, div.ribbons p::after { width: 34px; height: 56px; }
	.banner { padding: 12px 14px 14px; }
	.banner-title { font-size: 10vw; }
	.banner-sub { font-size: 4vw; }
	.legal a { display: inline-block; margin: 4px 10px; }
	.legal a + a { margin-left: 10px; }
}