/* ROOT VARIABLES */ 

@import url('https://fonts.googleapis.com/css2?family=Gabriela&display=swap');
@import url("https://use.typekit.net/pgx4jvx.css");

:root {
    --title-font: 'Confiteria-Script', sans-serif;
	--subtitle-font: 'Gabriela', sans-serif;
	--header-font: 'Synthemesc', sans-serif;
	--body-font: 'New-Science-Serif', sans-serif;
    --text-color: #1E1D6D;
	
	--black:#000;
	--dark:#1E1D6D;
	--med:#614CAE;
	--mid:#EDE9FF;
	--light:#DBC7FF;
	--white:#f9f8ff;
} 

p {
	font-size: 1rem;
	font-family: var(--body-font);
	font-weight: normal;
	color: var(--dark);
}


a { 
	color: var(--dark);
	text-decoration: underline wavy;
	text-decoration-color:var(--light);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

h1 {
	font-size: 2.5rem;
	font-family: var(--header-font);
	color: var(--dark);
	text-align: center;
}

h2 {
	font-family: var(--subtitle-font);
	font-size: 1.25rem;
	text-align: center;
}

h3 {
	font-family: var(--body-font);
	font-size: 1rem;
	font-weight: normal;
	text-align: center;
}

	/* layout */

#container {
	display:flex;
	flex-flow:row wrap;
	position: relative;
	max-width:100vw;
	width:80%;
	justify-content:center;
	align-items:stretch;
	align-content:center;
	padding:1%;
	gap:15px;
	margin:2% auto;
}

main, aside {
	position:relative;
	display:flex;
	flex-flow:row wrap;
	align-items:flex-start;
	align-content:flex-start
}

aside {
  font-size:1em;
  line-height:1.2em
}

aside.right {
    flex:1 4 200px;
    align-items:stretch
}

aside.left {
    flex:0 2 250px;
    position: sticky;
    top: 20px; 
    align-self: flex-start;
    height: fit-content;
}

@media screen and (max-width: 768px) {
	aside.left {
		order: -1;             
		width: 100%;
		position: static;
		margin: 20px 0;
	}

	aside.left nav {
		display: block;
		text-align: center;
	}

	aside.left nav p {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
		margin: 0px 0 0 0;
	}
	
	aside.left nav h2 {
		display: inline;
		margin: 0 8px 10px 0;
	}

	aside.left nav h2::before {
		content: "✦ " !important; 
		font-size: 1rem;
		position: static;
	}

	aside.left nav a::before {
		content: none !important;
	}

	aside.left nav a {
		display: inline;
		margin: 0 5px;
		padding: 0;
	}
}

main {
	flex:2 1 400px;
	max-width:min(800px, 100%);
}


body {
  	font-family: var(--body-font);
 	background: var(--white);
  	color: var(--text-color);
	line-height: 1.4;
}


	/* head */

header {
	width:100vw;
	height:125px;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:center;
}

#name {
	position:relative;
	margin-left:10%;
	height:85px;
	width: 20%;
	flex: auto;
}

a.name {
	font-family: var(--title-font);
	font-size: 2.5rem;
	color: var(--med);
	text-decoration: none;
	transition: color 0.2s;
}

	a.name:hover {
		background:none;
		color:var(--light);
	}

.head {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	
	background:var(--light);
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	margin: 1% 10% 0 0;
	padding: 15px;

	font-size: 0.9rem;
	color:var(--dark);
}

@media screen and (max-width: 768px) {
	.head {
		width: 8rem;
		height: 8rem;
		font-size:  0.8rem;
	}
	
	a.name {
		font-size: 2.25rem;
	}
}


	/* nav */

nav {
	max-width:100%;
	text-align:center left;
}

nav a {
	display: table;
	margin:15px 25px;
	padding: 2px 4px;
	width:auto;
	
	color: var(--dark);	
	text-align:left;

	transition: 
		color 			0.2s ease, 
		background 		0.2s ease, 
		box-shadow 		0.2s ease, 
		border-color 	0.2s ease, 
		ext-decoration 	0.2s ease;
}

nav a:hover,.nav a:hover {
	text-decoration: none;
	background:var(--dark);
	color:var(--white);
	border-color:var(--light);
	box-shadow:5px 5px var(--light)
}

aside.left nav a::before {
	content:"⋆˙⟡";
	color: var(--dark);
	display:inline-block;
	position:absolute;
	left:-5px;
}


nav h2 {
	display:block;
	padding-top:15px;
	width:100%;
	font-weight:bold;
	color: var(--med);
	font-size: 1.1rem;
	text-align: left;
}

aside.left nav h2::before {
	content:"⤹ ";
	font-style: normal;
	font-size: 1.1rem;
	position: relative;
	top: 5px;
	right: 2px;
}


	/* foot */

footer {
	text-align: center;
	border-top: 0.5px solid #ddd;
}

footer a {
	margin: 0 0.5rem;
	display: inline-block;
}

.footer-text {
	font-size: 1rem;
	padding: 2px;
	line-height: 0.75rem;
	margin-bottom: 10px;
}

.socials {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 10px;
}

	.social-icon {
		width: 24px;
		height: 24px;
		stroke: var(--dark);
		fill: none;
		background:none;
		transition: stroke 0.2s, transform 0.2s, background 0.2s;
	}

	.social-icon:hover {
		fill: none;
		stroke: var(--med);
		border-radius: 2px;
		transform: scale(1.2);
	}


	/* body */

main {
	display:block;
	max-width:90vw;
	width:100%;
	position:relative;
}

.page-title {
	font-size: 2.5rem;
	font-family: var(--header-font);
	color: var(--dark);
	text-align: center;
}

.page-desc {
	font-size: 0.9rem;
	font-family: var(--body-font);
	color: var(--dark);
	text-align: center;
}


	/* gallery */


.gallery {
	columns:3;
	gap:25px;
	margin-top:20px;
}

.small .gallery, .small.gallery {
	columns:2;
	gap:25px;
	margin:20px;
}

.gallery .item {
    display:block;
    break-inside:avoid;
    margin-bottom:45px;
    text-align:center;
    font-size:.85em;
    line-height:1.3em;
    color:var(--dark)
}

	.gallery .item i {
		color: var(--med);
		margin-right: 2px;
	}

	.gallery .item a {
		display: inline-block; 
		text-underline-offset:1px;
		text-decoration-skip-ink: none;
		text-decoration-color:var(--light);
		transition: background 0.2s, color 0.2s;
		padding: 2px;
	}

	.gallery .item:hover a {
		text-decoration: none;
		background:var(--dark);
		color:var(--white);
	}

	.gallery .item img {
		width:100%;
		margin-bottom:5px
	}

	.gallery .item img:hover {
	  	border-radius:5px;
	  	outline:var(--dark) 1px dashed;
	}

@media screen and (max-width:1200px) {
	.gallery {
		columns:3
	}
	.small .gallery, .small.gallery {
		columns:2 }
	}

@media screen and (max-width:1000px) {
	.gallery {
		columns:2
	}
}

@media screen and (max-width:860px) {
	.gallery {
		columns:3
	}
	.small .gallery, .small.gallery {
		columns:2 
	}
}

@media screen and (max-width:700px) {
	.gallery {
	  columns:2
	}
}

@media screen and (max-width:500px) {
	.gallery {
	  columns:1
	}
}


	/* layouts */

		/* index */ 


#container-home {
	display: flex;
	justify-content: space-between;    
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin: 10% auto;
	gap: 20px;
}

.home-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;       
	height: auto;
	pointer-events: none;
	z-index: 0;
	animation: float 4s ease-in-out infinite;
	filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 0.5));
}
	
	@keyframes float {
		0%, 100% {
			transform: translate(-50%, -50%) translateY(0);
		}
		50% {
			transform: translate(-50%, -50%) translateY(-10px);
		}
	}


.col-left, .col-right {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
	gap: 20px;
	flex:0 0 300px;
}

.sticky {
	width: 100%;
	max-width: 350px;
	margin: 1% auto;
	height: auto;
	background: var(--mid);
	border: 2px dotted var(--dark);
	border-radius: 5px;
	padding: 10px;	
	color: var(--dark);
}

.sticky h2 {
    font-size: 0.9rem;
}

.sticky p {
	font-size: 0.8rem;
}

.btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--light);
	border-radius: 5px;
	color: var(--dark);
	transition: transform 0.2s, background 0.2s;
	text-decoration: none;
	width: 100%;
	max-width: 350px;
	margin: 0;
	padding: 10px;
}

.btn:hover {
    transform: translateY(-3px);
    background: var(--dark);
    color: var(--white);
    border-color:var(--med);
    box-shadow:5px 5px var(--med)
}

@media screen and (max-width: 768px) {
	#container-home {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.col-left .sticky, .col-right .sticky, .btn {
		max-width: 350px;
		width: 100%;
		box-sizing: border-box;
	}
	
	.col-left, .col-right {
		margin-bottom: 50px;
	}

	.home-bg {
		position: absolute;             
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200px;                   
		height: auto;
	}
}


		/* writing */ 

.story-gallery {
	display: flex;
	flex-wrap: wrap; 
	justify-content: center;
	align-content: center;
	
	gap: 20px;
	margin-top: 2rem;
}


.story-gallery a.item {
	width: 250px;
	height: 250px;
	background: var(--mid);
	border-radius: 5px;
	text-decoration: none;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	text-align: center;
	color: var(--dark);
	
	padding: 1rem;
	box-shadow:5px 5px var(--med);
	transition: transform 0.2s, background 0.2s;
}

.story-gallery a.item:hover {
	transform: translateY(-5px);
	background: var(--light);
}

	.story-gallery .item .story-title {
		font-family: var(--subtitle-font);
		font-size: 1.5rem;
		margin: 0.5rem;
		color: var(--med);
	}

	.story-gallery .item .story-meta {
		font-family: var(--body-font);
		font-size: 0.9rem;
		margin: 0.5rem;
	}

	.story-gallery .item .story-excerpt {
		font-family: var(--body-font);
		font-size: 0.9rem;
		margin: 0.5rem;
	}

@media (max-width: 600px) {
	.story-gallery {
		flex-direction: column;
	}
}



		/* sitemap */ 

.sitemap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 3rem;
	box-sizing: border-box;
}

.sitemap-columns {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	max-width: 1000px;
	text-align: left;
}

.sitemap-column {
	flex: 1;
	min-width: 200px;
	background: var(--mid);
	padding: 20px;
	border-radius: 5px;
	box-shadow:5px 5px var(--med);
}

.sitemap-column h2 {
	font-family: var(--subtitle-font);
	color: var(--med);
	font-size: 1.5rem;
	margin-top: 0;
}

.sitemap-column ul {
	list-style: none;
	padding: 5px;
	margin: 0;
}

.sitemap-column ul li {
	margin: 15px 0;
	position: relative;
	padding-left: 40px;
}

.sitemap-column ul li a {
    color: var(--dark);
    font-size: 0.95rem;
	border-radius: 5px;
    padding: 2px 4px;
	transition: background 0.3s, color 0.3s;
	display: inline-block;
}

.sitemap-column ul li ::before {
    content: "⋆˚࿔";
    color: var(--med);
    display:inline-block;
    position:absolute;
    left: 0;
    font-size: 0.9rem;
}

.sitemap-column ul li a:hover {
    text-decoration: none;
    background: var(--dark);
    color: var(--white);
}


.sitemap .sitemap-image {
	position: absolute;
	right:-25%;
	bottom: -45%;
	width: 250px;
	height: auto;
	animation: float 4s ease-in-out infinite;
	filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 0.5));
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 900px) {
	.sitemap .sitemap-image {
		position: static;
		display: block;
		margin: 2rem auto 0;
		width: 200px;
	}

	.sitemap-columns {
		flex-direction: column;
		align-items: center;
	}

	.sitemap-column {
		width: 100%;
		max-width: 400px;
	}
}



	/* projects */
	
.project-header {
	position: relative;
	text-align: center;
	margin-bottom: 1rem;
}

.project-header .page-title {
	margin: 0 auto;
}

.project-header .back-btn {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--med);
	background: var(--light);
	padding: 6px 12px;
	border-radius: 5px;
	transition: background 0.3s ease, color 0.3s ease;
}

.project-header .back-btn:hover {
	background: var(--dark);
	color: var(--white);
}

.project-description {
	border: 1px dashed var(--med);
	border-radius: 5px;
	padding: 20px;
	position: relative;
	width: 100%;
	line-height: 150%;
}

.project-description strong { font-weight: 700; }
.project-description em { font-style: italic; }