/*  Feel free to copy these as you like!
    SPDX-License-Identifier: CC0-1.0     */

/* General */

body      { margin-top:    1em;
			max-width:     800px; }
h1        { margin-bottom: 0px;}
h3        { margin-bottom: 0px; }
h3 + ul   { margin-top:    0px; }
li        { padding-left:  2ch;
			text-indent:  -2ch; }
img       { max-width: 100%;}
.subtitle { margin-top: 0px;
			margin-bottom: 1em; }

/* Collective badge styling */
@media only screen and (max-width: 800px) {
	.badges {
		max-width: 400px;
	}
}
.badges {
		text-align: center;
		padding: 0px;
		display: block;
		margin: auto;
}
.badges li {
		display: inline-block;
		list-style: none;
		padding: 0px;
		text-indent: 0px;
		position: relative;
		height: 150px;
		height: calc(100px + 1em);
		margin: 0px .5em 2em .5em;
}
.badges > li > b:first-child {
		display: block;
		height: 100px;
		width: 100px;
		text-align: center;
		font-size: 75px;
		border-radius: 5px;
		margin-bottom: 10px;
		line-height: 100px;
		vertical-align: middle;
		box-shadow: 0px 0px 3px 3px rgba(50, 0, 50, .25);
}
section {
	padding-left: 1em;
	padding-right: 1em;
	padding-top: .01em;
	padding-bottom: .01em;
	border-radius: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	box-shadow: 4px 4px 5px 3px rgba(50,0,50,.15), -4px -4px 5px 3px rgba(255,255,255,.40);
	background: linear-gradient(to bottom right, #f5ebff, #e7ddf0);
}
section + section {
	margin-top: 2em;
}


/* Specific stylings for each badge */
.badges > li.veg > b:first-child {
		background-color: #A4D79C;
		background: linear-gradient(#C5EDBF, #A4D79C);
		color: #137006;
		line-height: 110px;
}
.badges > li.female > b:first-child {
		background-color: hotpink;
		background: linear-gradient(#FF81C0, hotpink);
		color: white;
}
.badges > li.pagan > b:first-child {
		font-size: 0px;
		content: " ";
		background-color: #6B006B;
		background-image: url("img/pentagram.svg");
		color: white;
}
.badges > li.programmer > b:first-child {
		background-color: black;
		color: #00FF00;
		font-family: monospace;
		line-height: 94px;
		font-weight: normal;
}

.badges > li.france > b:first-child {
	/*  If gradients are not available, then the Francophile 
	    badge will render as a croissant on bleu. */
		background-color: #0055A4;
		color: white;
		text-shadow: 0px 2px 10px rgba(0,0,0, .75); 
		line-height: 110px;
}
.badges > li.trans > b:first-child {
		background-color: #59C7F2;
}

@supports (background: linear-gradient(red, green)) {
	/*  If gradients are available, then the Francophile 
		badge will render as a French flag with a heart over it. */
	.badges > li.france > b {
		font-size: 0px;
		background: -webkit-linear-gradient(
			left,
			#0055A4,     /* Bleu  */
			#0055A4 33%,
			white 33%,   /* Blanc */
			white 66%,
			#EF4135 66%, /* Rouge */
			#EF4135 100%
		);
	}
	.badges > li.france > b:before {
		font-size: 75px;
		content: "♥";
	}

	/* If gradients are available, the transgender badge
	   will render as the trans flag, hiding the ⚧ symbol */
	.badges > li.trans > b:first-child {
		font-size: 0px;
		background: linear-gradient(
		  #59C7F2,      /* Light Blue = Trans men   / transmasculine */
		  #59C7F2 20%,
		  #F2A6B6 20%,  /* Pink       = Trans women / transfeminine  */
		  #F2A6B6 40%,
		  white 40%,    /* White      = Non-binary  / fluidity       */
		  white 60%,
		  #F2A6B6 60%,
		  #F2A6B6 80%,
		  #59C7F2 80%,
		  #59C7F2 100%
		);
	}
}

h4 {
	margin: 0px;
}
h2 {
	text-align: center;
}


@media (prefers-color-scheme: dark) {
	body      { margin-top:    1em;
				max-width:     800px; }
	h1        { margin-bottom: 0px;}
	h3        { margin-bottom: 0px; }
	h3 + ul   { margin-top:    0px; }
	li        { padding-left:  2ch;
				text-indent:  -2ch; }
	img       { max-width: 100%;}
	.subtitle { margin-top: 0px;
				margin-bottom: 1em; }

	/* Section Borders */
	section   {
			border: 2px solid rgba(0,0,0,0);
			border-radius: 1em;
			padding: 1em;
			margin-top: .75em;
			margin-bottom: .75em;
			background: black;
	}
	section.about {
			border: 1px solid hotpink; 
			box-shadow: 0px 0px 5px 5px hotpink;
	}
	section.on-this-site { 
			border: 1px solid #00FC00; 
			box-shadow: 0px 0px 5px 5px #00FC00;
	}
	section.visit-these-sites {
			border: 2px solid #59C7F2;
			box-shadow: 0px 0px 5px 5px #59C7F2;
	}
	section.causes {
			border: 2px solid yellow;
			box-shadow: 0px 0px 5px 5px yellow;
	}
	section > h2 {
			margin-top: 0px;
			text-align: center;
	}



	/* Collective badge styling */
	@media only screen and (max-width: 800px) {
		.badges {
			max-width: 400px;
		}
	}
	.badges {
			text-align: center;
			padding: 0px;
			display: block;
			margin: auto;
	}
	.badges li {
			display: inline-block;
			list-style: none;
			padding: 0px;
			text-indent: 0px;
			position: relative;
			height: 150px;
			height: calc(100px + 1em);
			margin: 0px .5em 2em .5em;
	}
	.badges > li > b:first-child {
			display: block;
			height: 100px;
			width: 100px;
			text-align: center;
			font-size: 75px;
			border-radius: 5px;
			margin-bottom: 10px;
			line-height: 100px;
			vertical-align: middle;
			box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, .5);
	}

	/* Specific stylings for each badge */
	.badges > li.veg > b:first-child {
			background-color: #A4D79C;
			background: linear-gradient(#C5EDBF, #A4D79C);
			color: #137006;
			line-height: 110px;
	}
	.badges > li.female > b:first-child {
			background-color: hotpink;
			background: linear-gradient(#FF81C0, hotpink);
			color: white;
	}
	.badges > li.pagan > b:first-child {
			font-size: 0px;
			content: " ";
			background-color: #6B006B;
			background-image: url("img/pentagram.svg");
			color: white;
	}
	.badges > li.programmer > b:first-child {
			background-color: black;
			color: #00FF00;
			font-family: monospace;
			line-height: 94px;
			font-weight: normal;
	}

	.badges > li.france > b:first-child {
		/*  If gradients are not available, then the Francophile 
			badge will render as a croissant on bleu. */
			background-color: #0055A4;
			color: white;
			text-shadow: 0px 2px 10px rgba(0,0,0, .75); 
			line-height: 110px;
	}
	.badges > li.trans > b:first-child {
			background-color: #59C7F2;
	}

	@supports (background: linear-gradient(red, green)) {
		/*  If gradients are available, then the Francophile 
			badge will render as a French flag with a heart over it. */
		.badges > li.france > b {
			font-size: 0px;
			background: -webkit-linear-gradient(
				left,
				#0055A4,     /* Bleu  */
				#0055A4 33%,
				white 33%,   /* Blanc */
				white 66%,
				#EF4135 66%, /* Rouge */
				#EF4135 100%
			);
		}
		.badges > li.france > b:before {
			font-size: 75px;
			content: "♥";
		}

		/* If gradients are available, the transgender badge
		   will render as the trans flag, hiding the ⚧ symbol */
		.badges > li.trans > b:first-child {
			font-size: 0px;
			background: linear-gradient(
			  #59C7F2,      /* Light Blue = Trans men   / transmasculine */
			  #59C7F2 20%,
			  #F2A6B6 20%,  /* Pink       = Trans women / transfeminine  */
			  #F2A6B6 40%,
			  white 40%,    /* White      = Non-binary  / fluidity       */
			  white 60%,
			  #F2A6B6 60%,
			  #F2A6B6 80%,
			  #59C7F2 80%,
			  #59C7F2 100%
			);
		}
	}

	h4 {
		margin: 0px;
	}
}