@charset "UTF-8";

/* --------------------------------------------
BLOG
--------------------------------------------- */
body:has( #blog ){
	background : url( "../images/blog/bg.webp" ) center top repeat #c2961c;
}
@media screen and ( width <= 750px ){
	body:has( #blog ){
		background-size : 100% auto;
	}
}
@media screen and ( width <= 750px ){
	#column:has( #blog ){
		padding-bottom : calc( 64 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#column:has( #blog ){
		padding-bottom : calc( 120 var( --remBase ) );
	}
}
#blog .box{
	background-color : white;
	border-color : black;
	border-style : solid;
}
#blog #content{
	margin-top : calc( 24 var( --remBase ) );
}
#blog footer{
	margin-top : calc( 24 var( --remBase ) );
}
#blog footer ul , #blog footer li{
	display : inline;
	font-size : 0;
}
#blog footer time , #blog footer a{
	display : inline;
	line-height : 1.7;
}
#blog footer time + ul::before , #blog footer ul + ul::before{
	display : inline-block;
	width : 1em;
	line-height : 1.7;
	text-align : center;
	content : "|";
}
@media screen and ( width <= 750px ){
	#blog .box{
		padding-inline : calc( 16 var( --percentBase ) );
		padding-top : calc( 12 var( --remBase ) );
		padding-bottom : calc( 22 var( --remBase ) );
		border-width : calc( 6 var( --remBase ) );
	}
	#blog h1{
		font-size : 4rem;
	}
	#blog footer time , #blog footer a{
		font-size : 2rem;
	}
	#blog footer time + ul::before , #blog footer ul + ul::before{
		font-size : 2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#blog .box{
		padding-inline : calc( 32 * 100% / 1400 );
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
		border-width : calc( 12 var( --remBase ) );
	}
	#blog h1{
		font-size : 6rem;
	}
	#blog footer time , #blog footer a{
		font-size : 2.4rem;
	}
	#blog footer time + ul::before , #blog footer ul + ul::before{
		font-size : 2.4rem;
	}
}
#content p{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#content p{
		font-size : 2rem;
	}
}
@media screen and ( width > 750px ) , print{
	#content p{
		font-size : 2.4rem;
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination ul{
	display : grid;
	justify-content : center;
}
#pagination a{
	position : relative;
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	background-color : #ffef04;
	border-color : black;
	border-style : solid;
	border-width : calc( 10 var( --remBase ) );
}
#pagination .prev{
	grid-column : 1;
}
#pagination .archive{
	grid-column : 2;
}
#pagination .archive a{
	color : black;
}
#pagination .next{
	grid-column : 3;
}
@media screen and ( width <= 750px ){
	#pagination{
		margin-top : calc( 40 var( --remBase ) );
	}
	#pagination ul{
		grid-template-rows : calc( 87 var( --remBase ) );
		grid-template-columns : calc( 87 var( --percentBase ) ) calc( 174 var( --percentBase ) ) calc( 87 var( --percentBase ) );
		justify-content : space-between;
	}
	#pagination .archive a{
		font-size : 4rem;
	}
	#pagination img{
		height : calc( 27.2 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#pagination{
		margin-top : calc( 80 var( --remBase ) );
	}
	#pagination ul{
		grid-template-rows : calc( 127 var( --remBase ) );
		grid-template-columns : calc( 127 * 100% / 1400 ) calc( 206 * 100% / 1400 ) calc( 127 * 100% / 1400 );
		column-gap : calc( 32 * 100% / 1400 );
	}
	#pagination li{
		position : relative;
	}
	#pagination li::before{
		position : absolute;
		top : calc( 4 var( --remBase ) );
		left : calc( 4 * 100% / 127 );
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		content : "";
		background-color : black;
	}
	#pagination .archive a{
		font-size : 6rem;
	}
	#pagination img{
		height : calc( 40.8 var( --remBase ) );
	}
}
@media ( hover : hover ){
	@media screen and ( width > 750px ) , print{
		#pagination a:hover{
			top : calc( 4 var( --remBase ) );
			left : calc( 4 * 100% / 127 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#pagination a{
		transition : top var( --transitionBase ) , left var( --transitionBase );
	}
}