/*-------------------------------------------------------------------------------------------------------

ROOT

-------------------------------------------------------------------------------------------------------*/

:root {
	/* PAGE */
	--blog-page-gap: 7.5;

	--blog-page-thumbnail-size: 70;
	--blog-page-headline-size: 3.25;
	--blog-page-article-size: 1.675;
	--blog-page-date-size: 1.675;

	--blog-page-navigation-title-size: 1.5;
	--blog-page-navigation-button-size: 1.75;
	--blog-page-navigation-gap: 0.75;

	--blog-page-letter-spacing: 0.0375;

	/* PAGES */
	--blogs-page-gap: 2;

	--blogs-page-width: 32.5;

	--blogs-page-thumbnail-size: 62.5%;
	--blogs-page-headline-size: 1.85;
	--blogs-page-article-size: 1.425;
	--blogs-page-date-size: 1.125;

	--blogs-load-margin: 5;
	--blogs-load-button-width: 17;
	--blogs-load-button-height: 5.5;
	--blogs-load-button-size: 1.35;

	--blogs-page-radius: 1.25;
	--blogs-page-letter-spacing: 0.0375;
}

.full-width-line {
    background-color: rgb(0, 0, 0);
	opacity: 0.1;

    width: 100%;
    height: calc(1px / var(--zoom-multiplier, 1));
}

/*-------------------------------------------------------------------------------------------------------

BLOG

-------------------------------------------------------------------------------------------------------*/

#blog {
    display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	
	position: relative;

	height: auto;
	min-height: 100vh;

	padding: var(--fixed-content-padding) var(--page-content-padding);
	gap: calc(var(--base-page-size) * var(--blog-page-gap));
}

#blog > .blog-thumbnail {
    background: rgb(250, 250, 250);
    
	width: 100vw;
	height: calc(var(--base-page-size) * var(--blog-page-thumbnail-size));
	max-height: calc(100vh - var(--header-size, 0vh));

	margin: calc(var(--fixed-content-padding) * -1) calc(var(--page-content-padding) * -1);
	margin-bottom: 0;
}

#blog > .blog-headline {
	color: rgb(0, 0, 0);

	font-size: calc(var(--base-page-size) * var(--blog-page-headline-size));
	font-weight: var(--font-weight-bold);

	letter-spacing: calc(var(--base-page-size) * var(--blog-page-letter-spacing));
	line-height: calc(100% + var(--base-page-size) * var(--blog-page-headline-size) / 2);

	margin-left: calc(var(--base-page-size) * var(--blog-page-headline-size) * var(--blog-page-letter-spacing) * -2);
}

#blog > .blog-date {
	color: rgb(0, 0, 0);
	opacity: 0.5;
	font-size: calc(var(--base-page-size) * var(--blog-page-date-size));
	letter-spacing: calc(var(--base-page-size) * var(--blog-page-letter-spacing));
	line-height: 100%;
	margin-top: calc(var(--base-page-size) * var(--blog-page-gap) * -1);
}

#blog > .blog-article,
#blog > .blog-article > a,
#blog > .blog-article > strong {
	color: rgb(0, 0, 0);
	opacity: 0.5;
	font-weight: var(--font-weight-medium);
	font-size: calc(var(--base-page-size) * var(--blog-page-article-size));
	letter-spacing: calc(var(--base-page-size) * var(--blog-page-letter-spacing));
	line-height: calc(100% + var(--base-page-size) * var(--blog-page-article-size) / 1.5);
	user-select: text;
}

#blog > .blog-article > a {
    opacity: 0.5;
    transition: opacity var(--transition-medium);
}

#blog > .blog-article > a:hover {
    opacity: 1;
}

#blog > .blog-article > strong {
    opacity: 1 !important;
	font-weight: var(--font-weight-bold) !important;
}

#blog > .blog-navigation {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#blog > .blog-navigation > div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: space-between;
	gap: calc(var(--base-page-size) * var(--blog-page-navigation-gap));
}

#blog > .blog-navigation > .next {
	margin-right: auto;
}

#blog > .blog-navigation > .next > p,
#blog > .blog-navigation > .next > a {
	text-align: left;
}

#blog > .blog-navigation > .previous {
	margin-left: auto;
}

#blog > .blog-navigation > .previous > p,
#blog > .blog-navigation > .previous > a {
	text-align: right;
}

#blog > .blog-navigation > div > p {
	color: rgb(0, 0, 0);
	opacity: 0.25;
	font-size: calc(var(--base-page-size) * var(--blog-page-navigation-title-size));
}

#blog > .blog-navigation > div > a {
	color: rgb(0, 0, 0);
	opacity: 0.5;

	font-size: calc(var(--base-page-size) * var(--blog-page-navigation-button-size));
	font-weight: var(--font-weight-medium);

	padding: calc(var(--base-page-size) * var(--blog-page-navigation-button-size));
	margin: calc(var(--base-page-size) * var(--blog-page-navigation-button-size) * -1);;

	transition: opacity var(--transition-medium);
}

#blog > .blog-navigation > div > a:hover {
	opacity: 0.75;
}

/*-------------------------------------------------------------------------------------------------------

BLOGS

-------------------------------------------------------------------------------------------------------*/

#blogs {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: flex-start;
	
	height: auto;
	position: relative;

	padding: var(--fixed-content-padding) var(--page-content-padding);
	gap: calc(var(--base-page-size) * 7.5);
}

/* GEARS */

#blogs-container {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;

	width: 100%;
	height: auto;
	gap: calc(var(--base-page-size) * var(--blogs-page-gap) * 2) calc(var(--base-page-size) * var(--blogs-page-gap));
	
	overflow: hidden;
}

/* BLOG CARD */

#blogs-container > .blog-post {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;

	position: relative;
	
	width: calc(25% - var(--base-page-size) * var(--blogs-page-gap) / 1.333);
	aspect-ratio: 0.875;
}

#blogs-container > .blog-post > .blog-thumbnail {
	background: rgb(250, 250, 250);
	border-radius: calc(var(--base-page-size) * var(--blogs-page-radius));
	
	-webkit-filter: brightness(1);
    -moz-filter: brightness(1);
    -o-filter: brightness(1);
	filter: brightness(1);
	
	flex-shrink: 0;
	flex-grow: 0;

	width: 100%;
	height: var(--blogs-page-thumbnail-size);
	
	transition: -webkit-filter var(--transition-medium),
    	-moz-filter var(--transition-medium),
    	-o-filter var(--transition-medium),
    	filter var(--transition-medium);
}

#blogs-container > .blog-post:hover > .blog-thumbnail {
	-webkit-filter: brightness(0.75);
    -moz-filter: brightness(0.75);
    -o-filter: brightness(0.75);
	filter: brightness(0.75);
}

#blogs-container > .blog-post > .blog-headline {
	color: rgb(0, 0, 0);

	font-size: calc(var(--base-page-size) * var(--blogs-page-headline-size));
	font-weight: var(--font-weight-bold);

	letter-spacing: calc(var(--base-page-size) * var(--blogs-page-letter-spacing));
	line-height: calc(100% + var(--base-page-size) * var(--blogs-page-headline-size) / 2);
	white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

	flex-shrink: 0;
	flex-grow: 0;
	
	max-width: 100%;
}

#blogs-container > .blog-post > .blog-article {
    --font-size: calc(var(--base-page-size) * var(--blogs-page-article-size));
    --line-height: calc(var(--font-size) + var(--font-size) / 2);
    
	color: rgb(0, 0, 0);
	opacity: 0.75;

	font-size: calc(var(--base-page-size) * var(--blogs-page-article-size));

	letter-spacing: calc(var(--base-page-size) * var(--blogs-page-article-size) * var(--base-page-letter-spacing));
	line-height: calc(var(--base-page-size) * var(--blogs-page-article-size) + var(--base-page-size) * var(--blogs-page-article-size) / 2);
	white-space: normal;
	
	text-overflow: ellipsis;
	overflow: hidden;

	flex-shrink: 0;
	flex-grow: 0;
	
	width: 100%;
	height: calc(var(--line-height) * 3);
}

#blogs-container > .blog-post > .blog-date {
	color: rgb(0, 0, 0);
	opacity: 0.5;
	
	font-size: calc(var(--base-page-size) * var(--blogs-page-date-size));
	
	letter-spacing: calc(var(--base-page-size) * var(--blogs-page-letter-spacing));
	line-height: 100%;

	flex-shrink: 0;
	flex-grow: 0;
}

/*-------------------------------------------------------------------------------------------------------

PAGNIATION

-------------------------------------------------------------------------------------------------------*/

#blogs > .pagination {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: auto;
	gap: calc(var(--base-page-size) * var(--blogs-page-gap));
	margin: calc(var(--base-page-size) * var(--blogs-load-margin)) 0;
}

#blogs > .pagination > .information {
	font-size: calc(var(--base-page-size) * var(--blogs-page-date-size));
	margin: 0 auto;
}

#blogs > .pagination > .progress {
    position: relative;
    
	background: rgba(0, 0, 0, 0.1);
	border-radius: calc(var(--base-page-size) * var(--blogs-load-button-size));
	
	width: calc(var(--base-page-size) * var(--blogs-load-button-width));
	height: calc(var(--base-page-size) * var(--blogs-load-button-height) / 15);
	margin: 0 auto;
}

#blogs > .pagination > .progress > div {
    position: absolute;
    
	background: rgb(0, 0, 0);
	border-radius: calc(var(--base-page-size) * var(--blogs-load-button-size));
	
	top: 0;
	left: 0;
	
	height: 100%;
}

#blogs > .pagination > button {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	position: relative;

	color: rgb(255, 255, 255);
	background: rgb(0, 0, 0);

	border: none;
	border-radius: calc(var(--base-page-size) * var(--blogs-load-button-size));

	font-size: calc(var(--base-page-size) * var(--blogs-load-button-size));
	font-weight: var(--font-weight-medium);

	outline: calc(1px / var(--zoom-multiplier)) solid rgba(0, 0, 0, 0);
	outline-offset: calc(var(--base-page-size) * 0.475);

	width: calc(var(--base-page-size) * var(--blogs-load-button-width));
	height: calc(var(--base-page-size) * var(--blogs-load-button-height));
	margin: 0 auto;

	transition: outline var(--transition-medium);
}

#blogs > .pagination > button:hover {
	outline: calc(1px / var(--zoom-multiplier)) solid rgba(0, 0, 0, 0.25);
	transition: outline var(--transition-short);
}

/*-------------------------------------------------------------------------------------------------------

MEDIA

-------------------------------------------------------------------------------------------------------*/

@media (max-width: 133vh) {
	:root {
		/* PAGE */
		--blog-page-gap: 7.5;

		--blog-page-thumbnail-size: 70;
		--blog-page-headline-size: 5;
		--blog-page-article-size: 2.75;
		--blog-page-date-size: 2.75;

		--blog-page-navigation-title-size: 2.5;
		--blog-page-navigation-button-size: 2.5;
		--blog-page-navigation-gap: 0.75;

		--blog-page-letter-spacing: 0.0375;

		/* PAGES */
		--blogs-page-gap: 2;

		--blogs-page-width: 32.5;

		--blogs-page-thumbnail-size: 57.5%;
		--blogs-page-headline-size: 2.5;
		--blogs-page-article-size: 1.75;
		--blogs-page-date-size: 1.5;

		--blogs-load-button-width: 0;
		--blogs-load-button-height: 6.75;
		--blogs-load-button-size: 1.375;

		--blogs-page-radius: 1;
		--blogs-page-letter-spacing: 0.05;
	}

	#blogs-container > .blog-post {
		width: calc(33.33% - var(--base-page-size) * var(--blogs-page-gap) / 1.5);
	}

	#blogs > .pagination > .progress,
	#blogs > .pagination > button {
		width: 20%;
	}
}

@media (max-width: 100vh) {
	:root {
		/* PAGE */
		--blog-page-gap: 7.5;

		--blog-page-thumbnail-size: 70;
		--blog-page-headline-size: 6.75;
		--blog-page-article-size: 3.5;
		--blog-page-date-size: 3.5;

		--blog-page-navigation-title-size: 2.75;
		--blog-page-navigation-button-size: 2.75;
		--blog-page-navigation-gap: 0.75;

		--blog-page-letter-spacing: 0.0375;

		/* PAGES */
		--blogs-page-gap: 2;

		--blogs-page-width: 32.5;

		--blogs-page-thumbnail-size: 57.5%;
		--blogs-page-headline-size: 3.75;
		--blogs-page-article-size: 2.75;
		--blogs-page-date-size: 2.5;

		--blogs-load-button-width: 0;
		--blogs-load-button-height: 10;
		--blogs-load-button-size: 1.75;

		--blogs-page-radius: 1;
		--blogs-page-letter-spacing: 0.05;
	}

	#blogs-container > .blog-post {
		width: calc(50% - var(--base-page-size) * var(--blogs-page-gap) / 2);
	}

	#blogs > .pagination > .progress,
	#blogs > .pagination > button {
		width: 100%;
	}
}

@media (max-width: 75vh) {
	:root {
		/* PAGE */
		--blog-page-gap: 7.5;

		--blog-page-thumbnail-size: 70;
		--blog-page-headline-size: 10;
		--blog-page-article-size: 5;
		--blog-page-date-size: 5;

		--blog-page-navigation-title-size: 3.5;
		--blog-page-navigation-button-size: 3.5;
		--blog-page-navigation-gap: 0.75;

		--blog-page-letter-spacing: 0.0375;

		/* PAGES */
		--blogs-page-gap: 2;

		--blogs-page-width: 32.5;

		--blogs-page-thumbnail-size: 57.5%;
		--blogs-page-headline-size: 8.25;
		--blogs-page-article-size: 5.25;
		--blogs-page-date-size: 4.75;

		--blogs-load-button-width: 0;
		--blogs-load-button-height: 20;
		--blogs-load-button-size: 4.5;

		--blogs-page-radius: 1.75;
		--blogs-page-letter-spacing: 0.05;
	}

	#blogs-container {
		gap: calc(var(--base-page-size) * var(--blogs-page-gap) * 5) calc(var(--base-page-size) * var(--blogs-page-gap));
	}

	#blogs-container > .blog-post,
	#blogs > .pagination > .progress,
	#blogs > .pagination > button {
		width: 100%;
	}
}