@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wdth,wght@0,75,100..700;1,75,100..700&display=swap');

@font-face {
	font-family: IPAMincho;
	src: url("/fonts/ipam.ttf");
}

:root {
	--color--background: #DEDEDE;
	--color--background--trans: #DEDEDEDE;
	--padding--content: 30px;
	--font-content: "IBM Plex Sans";
	--font-display: IPAMincho;
	--color-link: #402c2c;
	--color-link-highlighted: #9b6e6e;
}

/* GENERAL */
body {
	background: url("/images/ipe-grande.jpg");
	padding: 0;
	margin: 0;
	backdrop-filter: grayscale(60%);
	display: flex;
	height: 100%;
}

section {
	/*border: black 2px solid;*/
	background-color: var(--color--background);
}

h2 {
	font-family: var(--font-content);
	font-weight: 300;
}


a {
	color: var(--color-link);
}

p {
	color: black;
	font-family: var(--font-content);
	font-weight: 300;
	margin-top: 0;
}

/* NAV */
/* Note: the left line comes from 'a' element default styling */
section:has(nav) {
	box-sizing: border-box;
	border-top: 0;
	border-bottom: 0;
	font-family: var(--font-display);
	width: 20px;
	height: 100%;
	border-left: 0;
	padding-top: 5px;
	writing-mode: vertical-lr;
	text-orientation: upright;
}

.nav-selected {
	display: inline-block;
	color: white;
	background: black;
	text-decoration: none;
	border-right: 2px solid black;
}
/* CONTENT */
section.content {
	box-sizing: border-box;
	min-width: 30%;
	max-width: 60%;
	min-height: 30%;
	max-height: 60%;
	margin: auto auto;
	/*! padding: 4px; */
	padding: var(--padding--content);
	overflow: scroll;
}


/* INDEX EXCLUSIVE */
.name, .namejap, .namemiddle, .namelast {
	font-size: 4em;
	position: absolute;
	color: black;
	font-family: IPAMincho;
	writing-mode: vertical-lr;
	text-orientation: upright;
	isolation: auto;
	background: linear-gradient(to left, var(--color--background--trans) 50%, #0000);
}

.namejap {
	background: 0;
}

.name {
	mix-blend-mode: hue;
	left: 75%;
	top: 10%;
}

.namemiddle {
	mix-blend-mode: hue;
	left: 70%;
	top: 15%;
}

.namelast {
	left: 65%;
	top: 20%;
}

.namejap {
	font-size: 5em;
	color: #880000de;
	left: 75%;
	top: 12%;
	z-index: -3;
}

.text-img {
	vertical-align: middle;
}

/* PROJECT EXCLUSIVE */
.project-grid {
	display: grid;
	grid: repeat(2, 1fr) / 1fr 3fr;
	gap: 20px;
}

.project-grid img {
	width: 200px;
	height: 200px;
	object-fit: none;
	object-position: left center;
}

.project-grid img#emptymenu {
	object-fit: cover;
	object-position: center;
}

/* BLOG EXCLUSIVE */

.h-feed h2 {
	text-align: center;
	border-bottom: 1px solid black;
}

.h-feed h2 a {
	text-decoration: none;
	transition: color 0.5s;
}

.h-feed h2 a:hover {
	color: var(--color-link-highlighted);
}

.h-feed .dt-published {
	font-size: 1rem;
	margin-left: 20px;
}

article h1 {
	font-family: var(--font-content);	
	font-weight: 300;
	text-align: center;
}

article p:has(time.dt-published) {
	text-align: center;