/* Page: Credits (#page-credits) */

/* Structure:
 * .credits-columns
 *   .credits-container x2
 *     .credits-header
 *     .credits-section +
 *       .credits-section-name
 *       .credits-section-divider
 *       .credits-section-content
 *         .credits-entry-container +
 *           .credits-entry-name
 *           .credits-entry-role-list
 *             .credits-entry-role +
 * 
 */
#credits-columns{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:flex-start;
	flex-wrap:wrap;
	gap:32px;
	max-width:100%;
}
.credits-container{
	--credits-width-eachside:min(
		180px,
		calc(calc(var(--pages-actual-width) - 5px) / 2.0));
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	color:var(--color-text-auto);
	max-width:100%;
}
.credits-header{
	font-size:1.5em;
	font-weight:700;
	margin-bottom:8px;
	text-align:center;
}
.credits-section{
	display:flex;
	flex-direction:row;
	align-items:stretch;
	min-height:3.0em;
	/*border:1px solid red;*/
	max-width:100%;
}
.credits-section-name{
	width:var(--credits-width-eachside);
	flex-shrink:1;
	
	padding-right:8px;
	font-size:1.0em;
	font-weight:700;
	
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:center;
	text-align:right;
	/*
	background-image:linear-gradient(
		to left,
		var(--color-background-default),
		hsl(from var(--color-background-default) h s l /0%));*/
}
.credits-section-divider{
	width:2px;
	flex-grow:0;
	flex-shrink:0;
	/*margin-top:2px;
	margin-bottom:2px;*/
	background-color:var(--color-text-auto);
}

.credits-section-content{
	width:var(--credits-width-eachside);
	flex-shrink:1;
	
	padding-left:8px;
	gap:8px;
	
	padding-top:8px;
	padding-bottom:8px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	/*
	background-image:linear-gradient(
		to right,
		var(--color-background-default),
		hsl(from var(--color-background-default) h s l /0%));*/
}
.credits-entry-container{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
	margin-top:4px;
	margin-bottom:4px;
	overflow:auto;
}
.credits-entry-name{
	font-size:1.4em;
	font-weight:700;
}

.credits-entry-sns-list{
	display:flex;
	/*
	flex-wrap:wrap; 
	align-items:center;
	flex-direction:row;*/
	
	align-items:flex-start;
	flex-direction:column;
	
	justify-content:flex-start;
	
	gap:2px 4px;
	min-height:1.0em;
	font-size:0.8em;
}

#credits-partners{
	margin-top:24px;
	display:flex;
	flex-direction:column;
	align-items:center;
	align-self:stretch;
}
#credits-partners-header{
	align-self:stretch;
	text-align:center;
	margin-bottom:8px;
}
#credits-partners-list{
	display:flex;
	flex-direction:row;
	align-items:center;
	align-self:stretch;
	justify-content:center;
	gap:16px;
	flex-wrap:wrap;
}
.credits-partner-entry{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:center;
	gap:8px;
}
.credits-partner-entry-logo{
	
}
.credits-partner-entry-logo > img{
	max-height:80px;
	max-width:200px;
}
.credits-partner-entry-divider{
	width:150px;
	height:2px;
	background-image: linear-gradient(
    to right,
    hsl(from var(--color-text-auto) h s l / 0%) 0%,
    var(--color-text-auto) 20% 80%,
    hsl(from var(--color-text-auto) h s l / 0%) 100%);
	display:none;
}
.credits-partner-entry-name{
	font-weight:700;
}


/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
	#credits-columns{
		flex-direction:column;
		align-items:center;
	}
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}