/*
Theme Name: Bubblegum Punk
Theme URI: https://arkham.design/bubblegum-punk
Author: Martin Frost
Author URI: https://arkham.design/*
Theme Name: Bubblegum Punk
Theme URI: https://arkham.design/bubblegum-punk
Author: Martin Frost
Author URI: https://arkham.design
Description: Lime green on yellow
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
Text Domain: bubblegum-punk
Tags: custom-background
*/

@font-face { 
font-family: bgpMainFont; 
src: local("Comfortaa-Light"), 
url("/fonts/Comfortaa-Light.ttf"); 
font-style: normal; 
font-weight: 400; 
font-display: swap; 
}

@font-face { 
font-family: bgpMainFont; 
src: local("Comfortaa-Regular"), 
url("/fonts/Comfortaa-Regular.ttf"); 
font-style: normal; 
font-weight: 500; 
font-display: swap; 
}

@font-face { 
font-family: bgpMainFont; 
src: local("Comfortaa-Bold"), 
url("/fonts/Comfortaa-Bold.ttf"); 
font-style: normal; 
font-weight: 700; 
font-display: swap; 
}

body
{
	margin: 0;
	padding: 0;
	font-family: "bgpMainFont";
	min-width:390px;
	--iconSize: 40px;
}

#SiteHeader
{
	max-width: 1024px;
	height: 100px;
	text-align: center;
	background: linear-gradient(to right, #cf0 40%,#0fc 60%);
	margin-bottom: 0;
	padding: 0 calc(50% - 512px);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr 1fr;
}

#SiteLogo
{
	grid-area: 1/1/3/3;
	text-align: left;
	padding: 5px 0;
}

#SiteHeader #SiteLogo a
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
	aspect-ratio: 2;
	background-image: url(https://arkham.design/wp-content/uploads/2025/07/SiteLogo.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #fff0;
}

#SiteLogo img
{
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	opacity: 1;
	max-height: 100%;
	max-width: 100%;
}

#SiteLogo a:hover img
{
	opacity: 0;
}

#SiteNav
{
	text-align: right;
	margin: 10px;
	height: 30px;
	grid-area: 1/3/2/7;
	font-size: 1rem;
	line-height: 1.5rem;
}

#SiteHeader a, .FlickerLink, .CategoryPagination a, .bgpSiteContent a
{
	text-decoration: none;
	color: #f0c;
	padding: 0 5px;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	text-transform: uppercase;
	font-weight:bold;
	display: inline-block;
}

.bgpSiteContent a::before
{
	content: " ";
}

.bgpSiteContent a::after
{
	content: " ";
}

.bgpSiteContent .wp-block-uagb-table-of-contents .uagb-toc__wrap .uagb-toc__list-wrap li a
{
	text-decoration: none;
	color: #f0c;
	padding: 5px;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	text-transform: uppercase;
	font-weight:bold;
	display: block;
}

#SiteHeader a:hover, .FlickerLink:hover, .CategoryPagination a:hover, .bgpSiteContent a:hover, .bgpSiteContent .wp-block-uagb-table-of-contents .uagb-toc__wrap .uagb-toc__list-wrap li a:hover
{
	color: #ccff00;
	background-color: black;
}

#Contact
{
	text-align: right;
	margin-top: 5px;
	margin-right: 15px;
	height: 30px;
	grid-area: 2/3/3/7;
}

#SiteHeader #Contact a
{
	float: right;
	padding: 0;
	width: var(--iconSize);
	height: var(--iconSize);
	display: block;
	margin: 0 5px;
	clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%, 0 8px);
}

#Contact a svg
{
	width: 100%;
	height: 100%;
}

#Contact a path
{
	fill:#c0f;
}

#Contact a:hover path
{
	fill:#cf0;
}

#HomepageContent, .bgpArchiveContent
{
	max-width: 1024px;
	margin: 40px auto;
}

#PrimaryFeed
{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap:40px;
	margin-bottom: 15px;
	position: relative;
	padding-bottom: 35px;
	overflow: hidden;
}

#PrimaryFeed a, .SecondaryFeed a
{
	position: absolute;
	right: 0;
	bottom: -34px;
}

.ArticleCard
{
	background-color:white;
	padding: 0px;
	position: relative;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	width: round(100%, 1px);
	height: round(100%, 1px);
}

.ArticleCard::after, .bgpRelatedContent article::after
{
	content: " ";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #0000;
	z-index: 4;
	top: 0;
	left: 0;
	clip-path: polygon(100% 0, 10px 0, 0 10px, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 10px), calc(100% - 10px) calc(100% - 1px), 1px  calc(100% - 1px), 1px 10px, 10px 1px, calc(100% - 1px) 1px);
}

.ArticleCard a
{
	display: block;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	border: 1px solid #0000;
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.ArticleCard:hover::after, .bgpRelatedContent article:hover::after
{
	background-color: #000f;
}

.FeedCard
{
	aspect-ratio: 2;
}

.ArticleCard h1
{
	margin: 0;
	background-color: #fffd;
	position: relative;
	z-index: 2;
	padding: 10px;
	font-size: larger;
}

.ArticleCard p
{
	background-color: #fffd;
	margin: 0;
	padding: 5px 40px 20px 40px;
	position: relative;
	z-index: 2;
}

.ArticleCard img
{
	opacity: 1;
	position: absolute;
	z-index: 1;
	transition-duration: 0.2s;
	height: 100%;
	width: auto;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
}

.ArticleCard .CardSummary
{
	display: none;
}

.ArticleCard:hover img
{
	opacity: 0.6;
}

.ArticleCard:first-child
{
	grid-area: 1/1/3/2;
	aspect-ratio: 1/1;
	padding: 0;
}

.ArticleCard:first-child .CardSummary
{
	display: block;
}

.ArticleCard:first-child h1
{
	padding: 40px 40px 10px 40px;
	font-size: 30px;
}

.ArticleCard p.CardDate, p.CardDate
{
	position: absolute;
	z-index: 2;
	bottom: 10px;
	background-color: black;
	padding: 5px 8px;
	border-radius: 20px;
	color: #cf0;
	left: 10px;
}

.ArticleCard:first-child p.CardDate
{
	bottom: 20px;
	left: 40px;
}

.SecondaryFeed
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:10px;
	margin-bottom: 40px;
	padding-top: 40px;
	position: relative;
	margin-top: 5px;
}

.SecondaryFeed h2, .RelatedContentHeading
{
	position: absolute;
	margin: 0;
	width: calc(100% - 20px);
	background: linear-gradient(to right, #cf0 40%, #0fc 60%, #0fc0);
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	color: #f0c;
	padding: 4px 0 4px 20px;
	text-transform: uppercase;
	font-weight: lighter;
}

.bgpUnsetPosition
{
	clear: both;
	font-family: bgpMainFont;
	position: unset;
	margin: 20px auto;
}

.SecondaryFeed .ArticleCard img
{
	width: 100%;
	height: auto;
	left: 0;
	transform: translate(0, -50%);
	top: 50%;
}

#SiteFooter
{
	width: 100%;
	max-width: 1024px;
	height: fit-content;
	text-align: right;
	background: linear-gradient(to right, #cf0 40%,#0fc 60%);
	padding: 0 calc(50% - 512px);
	clear: both;
}

#SiteFooter ul
{
	list-style: none;
	margin: 0;
	padding: 20px;
}

#SiteFooter li
{
	margin-bottom: 20px;
}

.bgpSiteContent
{
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 30px;
	font-size: 15px;
	font-family: "Roboto Regular", sans-serif;
}

.bgpSiteContent > p:first-child
{
	font-size: 1.5rem;
	font-style: italic;
	color: #555;
	text-align: center;
	line-height: 3rem;
}

.bgpSiteContent blockquote { margin: 20px; }

.bgpSiteContent blockquote p:first-child
{
	font-size: 1.25rem;
	line-height: 1.5rem;
	border-left: 4px solid #c0f;
	text-align: left;
	padding-left: 20px;
}

.bgpSiteContent h3
{
	font-size: 1.5rem;
	clear: both;
	font-style: italic;
	position: relative;
}

.bgpSiteContent h3::after
{
	content: " ";
	display: block;
	width: 100%;
	height: 4px;
	position: absolute;
	left: 0;
	bottom: -4px;
	background: linear-gradient(to right, #cf0 40%, #0fc 60%, #0fc0);
}

.bgpSiteContent .wp-block-uagb-image--align-right
{
	float: right;
}

.bgpSiteContent .is-content-justification-center
{
	gap: unset;
}

.bgpSiteContent .is-content-justification-center .wp-block-group
{
	width: 50%;
	min-width: 390px;
}

.bgpSiteContent .is-content-justification-center .wp-block-group > div
{
	width: fit-content;
	margin: 0 auto;
}

.bgpSiteContent .wp-block-uagb-table-of-contents
{
	float: right;
	margin: 10px;
	position: relative;
}

.bgpSiteContent .wp-block-uagb-table-of-contents::after
{
	content: " ";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: polygon(100% 0, 10px 0, 0 10px, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 11px), calc(100% - 11px) calc(100% - 4px), 4px calc(100% - 4px), 4px 11px, 11px 4px, calc(100% - 4px) 4px);
	background: linear-gradient(to left, #0fc 40%, #cf0 60%, #cf00);
}

.bgpSiteContent .wp-block-uagb-table-of-contents .uagb-toc__wrap
{
	border: none;
	padding: 10px;
}

.bgpSiteContent .exampleParagraph
{
	background-color: lightblue;
	padding: 20px;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	clear: both;
	font-style: italic;
}

.bgpSiteContentHeader
{
	max-width: 1024px;
	margin: 0 auto 60px auto;
	position: relative;
	min-width: 390px;
}

.bgpSiteContentHeader h1
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 60px);
	background-color: #fffB;
	margin: 0;
	padding: 30px;
	text-align: right;
}

.bgpSiteContentHeader img
{
	max-width: 100%;
	aspect-ratio: 16/9;
	width: unset;
	height: unset;
	min-width: 390px;
}

.bgpSiteContentDetails
{
	position: absolute;
	bottom: -40px;
	right: 30px;
}

.wp-block-image :where(figcaption)
{
  font-style: italic;
  color: #777;
  font-size: 0.9rem;
  text-align: right;
}

.bgpCategoryPageContent
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	grid-template-rows: 1fr;
	margin: 10px auto;
}

.ArchiveCard
{
	position: relative;
	aspect-ratio: 2;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	width: round(100%, 1px);
}

.ArchiveCard img
{
	width: 100%;
	height: unset;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

.ArchiveCard h1
{
	padding: 10px 10px 0px;
	position: relative;
	background-color: #fffb;
	margin: 0;
	z-index: 3;
	font-family: bgpMainFont;
	font-size: 1.5rem;
}

.ArchiveCard p.CardSummary
{
	padding: 20px 10px;
	position: relative;
	background-color: #fffb;
	margin: 0;
	z-index: 3;
}

.ArchiveCard a
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border: 1px solid #0000;
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	z-index: 3;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.ArchiveCard:hover a
{
	border: 1px solid #000f;
}

.bgpRelatedContent
{
	clear: both;
	margin: 20px auto;
}

.bgpRelatedContent .uagb-post__image
{
	float: left;
}

.bgpRelatedContent article 
{
	position: relative;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%, 0 10px);
	padding: 0 !important;
	width: round(100%, 1px);
	aspect-ratio: 2;
}

.bgpRelatedContent article .uagb-post__image a
{
	position: unset !important;
}

.bgpRelatedContent.uagb-post-grid.is-grid.uagb-post__image-position-top .uagb-post__image a.uagb-image-ratio-inherit img
{
	width: 100%;
	height: auto;
	left: 0;
	transform: translate(0, -50%);
	top: 50%;
	position: absolute !important;
	z-index: 1;
	transition-duration: 0.2s;
}

.bgpRelatedContent article h1
{
	margin: 0;
	background-color: #fffd;
	position: relative;
	z-index: 2;
	padding: 10px !important;
	font-size: 1.2rem;
	font-family: bgpMainFont;
}

.bgpRelatedContent .uagb-post__cta a
{
	display: block;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	border: 1px solid #0000 !important;
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0.29, 1.01, 1, -0.68);
	background-color: unset;
	border-radius: unset;
	padding: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

@media (max-width: 800px)
{
	body
	{
		--iconSize: 30px;
	}
	
	#SiteNav
	{
		font-size: 0.9rem;
	}

	#PrimaryFeed
	{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		max-width: 512px;
		margin: 0 auto;
		gap: 10px;
	}
	
	.SecondaryFeed
	{
		grid-template-columns: 1fr;
		max-width: 512px;
		margin: 40px auto;
	}
	
	#Contact
	{
		margin-top:15px;
	}
	
	.ArticleCard:first-child
	{
		grid-area: 1/1/2/2;
	}
	
	.ArticleCard
	{
		aspect-ratio:2/1;
	}
	
	.ArticleCard img
	{
		width: 100%;
		height: auto;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}
	
	.ArticleCard:first-child img
	{
		height: 100%;
		width: auto;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
	}
	
	.bgpCategoryPageContent
	{
		grid-template-columns: 1fr;
	}
	
	.ArchiveCard h1 { font-size: 1.25rem; }
}

.MonthCard
{
	text-align: center;
	aspect-ratio: unset;
}

.SecondaryFeed .MonthCard a
{
	background-color: #cf0;
	position: relative;
	margin: 0;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	color: #c0f;
	font-weight: bold;
	padding: 10px;
	width: 100%;
	height: auto;
}

.SecondaryFeed .MonthCard a:hover
{
	background-color: black;
	color: #cf0;
}

.CategoryPagination
{
	padding-bottom: 40px;
}

.CategoryPaginationNewer { float: left; }
.CategoryPaginationOlder { float: right; }

.ImageDropShadow { filter: drop-shadow(0 0 3px #c0f); }

.ReadingLayout
{
	font-family: Cambria;
	font-size: 1.2rem;
	text-indent: 20px;
	margin: 5px auto;
	max-width: 700px;
}

.ReadingLayout p
{
	margin: 5px 0;
}

.activitypub-follow-me-block-wrapper .activitypub-profile .wp-block-button__link
{
  margin: 0;
  clip-path: unset;
  padding: calc(.667em + 2px) calc(1.333em + 2px);
}