body {
	background-color: black;
	color: white;
	font-family: 'Arial', sans-serif;
}

#cow-header { position: relative; }
	#cow-header img {
		width: 100%;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 98%, 98% 100%, 96% 98%, 94% 100%, 92% 98%, 90% 100%, 88% 98%, 86% 100%, 84% 98%, 82% 100%, 80% 98%, 78% 100%, 76% 98%, 74% 100%, 72% 98%, 70% 100%, 68% 98%, 66% 100%, 64% 98%, 62% 100%, 60% 98%, 58% 100%, 56% 98%, 54% 100%, 52% 98%, 50% 100%, 48% 98%, 46% 100%, 44% 98%, 42% 100%, 40% 98%, 38% 100%, 36% 98%, 34% 100%, 32% 98%, 30% 100%, 28% 98%, 26% 100%, 24% 98%, 22% 100%, 20% 98%, 18% 100%, 16% 98%, 14% 100%, 12% 98%, 10% 100%, 8% 98%, 6% 100%, 4% 98%, 2% 100%, 0% 98% );
	}
	#cow-header div {
		position: absolute;
		top: 40%;
		left: 40%;
		font-size: 4vw;
		font-weight: bold;
	}
	#cow-header p {
		margin: 2% 0;
		animation-name: fade-cow-p;
		animation-fill-mode: forwards;
		animation-duration: 1s;
	}
#cow-py { animation-delay: 1s; }
#cow-p0 { animation-delay: 1.5s; }
#cow-p1 { animation-delay: 2s; }
#cow-p2 {
	animation-delay: 2.5s;
	text-align: right;
}
@keyframes fade-cow-p {
	0% { text-shadow: none; }
	100% { text-shadow:  .1vw .4vw 0 rgb(69, 69, 69), .5vw 1.3vw 1.5vw black; }
}

article {
	font-size: 3.5vw;
	text-align: center;
	align-items: center;
	margin: 0 0 4vw 0;
}
	article img {
		width: 50%;
		height: auto;
	}
	article text {
		background-color: #76ff0050;
	}

section {
	font-size: 4vw;
	text-align: center;
}

.supporters {
	text-align: center;
	align-items: center;
}

@media (orientation: landscape) {
	.supporters {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		grid-auto-rows: minmax(100px, auto);
	}
}

.supporters .item {
	margin: 0 0 20% 0;
}

.supporters img {
	width: 80%;
	height: auto;
	background-color: white;
}

.item-title {
	text-transform: uppercase;
	font-weight: 900;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

a {
	color: white;
}

	a:hover {
		color: green;
	}

.donated-to a {
	color: black;
}

	.donated-to a:hover {
		color: green;
	}

.Vegan-only {
	font-size: 2.5vw;
	text-align: left;
	padding: 5%;
}

.pig {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	color: black;
	background-color: white;
}

.pig-image {
	grid-area: 1 / 1 / 3 / 4;
}

	.pig-image img {
		width: 100%;
	}

.pig-text {
	grid-area: 1 / 2 / 2 / 4;
	width: fit-content;
	text-align: left;
	margin: 14% 5% 0% 0%;
}

	.pig-text div {
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
		background-color: #76ff00;
	}

	.pig-text p {
		font-size: 2.6vw;
	}

.donate {
	background-color: white;
	color: black;
	text-align: center;
	font-size: 3vw;
}

.donated-to {
	text-align: center;
	align-items: center;
	background-color: white;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	grid-auto-rows: minmax(100px, auto);
}

	.donated-to img {
		margin-top: 5%;
		width: 90%;
		height: auto;
	}

.black {
	background-color: black;
}

.white {
	background-color: white;
}

.full-width {
	width: 100%
}

.grid-card {
	display: grid;
	text-align: center;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	grid-auto-rows: minmax(100px, auto);
}

	.grid-card div {
		grid-column: span 2;
		font-size: 3vw;
	}

	.grid-card img {
		width: 100%;
		border-radius: 4%;
		border: 2px solid white;
	}