body{
	display: grid;
	grid-template-areas:"header body" ;
	grid-template-columns: 18em 1fr;
}
main{
	width: 80em;
	max-width:calc(100vw - 20rem);

	grid-area: body;

	margin-inline: auto;
	scrollbar-gutter: stable both-edges;

	padding-block:5em;
}
.big{
	font-size: min(calc(95vw / 7),4.8em);
}
/*
	GALLERY BODY
*/
.gallery{
	display: grid;
	grid-template-areas:"header body" ;
	grid-template-columns: 18em 1fr;
}
.gallery main{
	text-align: center;

	display: flex;
	flex-direction: column;
	align-items: center;
}
.gallery__container{
	max-width: 100%;
	display: grid;
	
	grid-auto-columns: minmax(0,1fr);
	grid-auto-flow: column;  

	justify-content: center;
	align-items: center;
	gap:var(--flow-margin);
}
.gallery__container img{
	max-height: 90vh;
	cursor: pointer;
}
.gallery main hr{
	width:100%;
	border-width: .1em;
	border-style: solid;
	color:var(--indigo-dark)
}
.gallery figcaption{
	font-size: 1.15rem;
}
/*  
	GALLERY BLURB
*/

.blurb{
	font-size: 1.25em;
	margin-bottom: 2lh;
	width: 100%;
}
.blurb span{
	max-width: 60ch;
	display: block;
	margin-inline: auto;
}
.roles{
	display: flex;
	justify-content: space-evenly;
	width:50%;
	padding-inline: 0;
	list-style-type: none;
	margin-inline: auto;
	white-space: nowrap;
	flex-wrap: wrap;
	column-gap: 1.15em;
	row-gap: .75em;
}
.roles li{
	background-color: var(--indigo-dark);
	color: var(--off-white);
	padding: .1em .5em;
	border-radius: 5em;
	flex: 0 1 13ch;
}
/* gallery overlay */
.overlay{
	z-index:1;

	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top:0;
	left:0;
	
	width:100vw;
	height:100vh;
	
	background-color:var(--indigo-dark-trans);
}
.overlay img{
	max-height:calc(100vmin - 2em);
	display:block;
	margin:0 auto;
}

/* embeds (yt, vimeo, etc) */
.embed{
	width:100%;
	height:40em;
	max-height:90vh;
}
.inner-embed{
	width:100%;
	height:100%;
}
/*
	HEADER & NAVIGATION
*/
header{
	margin:.5em;
	max-width:20rem;
	position: sticky;
	grid-area: header;
	top:0px;
	max-height: 60vh;
}

.menu-button{
	display: none;
}

nav{
	display:flex;
	flex-direction:column;
	text-align: right;
	position: relative; /*create new context*/
}
nav hr{
	width:100%;
	border: .05em solid var(--indigo-mid) !important;
	margin-block-end: 0;
}
nav a{
	/*we want the text even higher in z because the way the sliding hover effect works*/
	z-index: 2; 
}
nav a::before{
	position:absolute;
	z-index: -1;

	display: block;
	content: "";

	margin-left:100%;
	width:0%;

	height:1lh; /*fancy unit alert!*/

	padding-block:.5em;
	padding-right: .5em;
	margin-top:-.5em;

	background-color: var(--indigo-light);
	opacity: 0;

	border-radius: 1em 0 0 1em;

	transition:all .25s ease-out;
}
a[active]{ color: var(--indigo-dark); }
nav a:hover::before, nav a:active::before, nav a[active]::before{
	
	margin-left:0%;
	width:100%;
	opacity: 1;
}

/* 
	about
*/
.about-span{ font-size:1.15rem; }
.about{ text-align: left !important; }
.about span{ display: block; }
.about article{ width:100% }

/* projects page*/
@property --bg-grad-color {
 syntax: '<color>';
 initial-value: rgba(137, 107, 255,0);
 inherits: false;
}
/* projects */
.projects{
    display:grid;
    grid-template-columns: repeat(3,1fr);
}
.projects article{
    aspect-ratio: 1; 
    position: relative;
    overflow: hidden;
}
.projects .background{
	position: absolute;
    --bg-grad-color: rgba(137, 107, 255,0);
    background-size: cover;
    background-position: 50% 50%,50% 50%;
    background-blend-mode: soft-light;

    width:100%;
    height:100%;

    transition: --bg-grad-color 0.2s,transform 0.2s;
}
.projects section{
    position: absolute;
    bottom:-.1em;
    z-index:2;
}
.projects h2{
    border:.25em solid var(--off-white);
    background-color: var(--off-white);
    color: var(--magenta-dark);
    padding-block:.1em;
    padding-inline: 3em .5em;
    border-radius: 999em;
    margin:0;
    transform: translateX(-100%);
    transition: transform 0.2s;
}
.projects article:hover .background,.projects article:active .background,.projects article:focus .background{
    --bg-grad-color: rgba(137, 107, 255,1);
	transform: scale(1.1);
}
.projects article:hover h2,.projects article:active h2,.projects article:focus h2{
    transform: translateX(-3em)
}

/* shop */
.shopbanner{
	display:grid;
    grid-template-columns: repeat(3,1fr);
}

.display{ 
	margin-block: 2em;
	width:100% }
/* page transition */

@keyframes pane-entry{
	from{ left: 0;}

	to{ left: -110%; }
}
@keyframes pane-exit{
	from{ left: 110%; }

	to{ left: 0; }
}

#pane{
	position:fixed;
	width:100vw;
	height:100vh;
	z-index:99;
	
	/* @keyframes duration | easing-function | delay |
	iteration-count | direction | fill-mode | play-state | name */
	animation:0.4s ease-in 0s 1 normal forwards running pane-entry;

	--bg-size:10em;
	--bg-color:#ffccea; /* defined by hand, dont forget!! */
	/*background-image: url("res/patternsquare_sm.png");*/
    background-size: calc(2 * var(--bg-size)) calc(2 * var(--bg-size));
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color:var(--bg-color);
	border-inline:1em solid var(--bg-color);
}

#pane[active]{
	animation:0.4s ease-out 0s 1 normal forwards running pane-exit;
}

/* MARQUEE */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.marquee{
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  background-color: var(--magenta-light);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite;
}

@media (orientation: portrait) {
	body,.gallery{
		display:unset;
		overflow-y:visible;
	}
	/* navigation */
	header{
		position:fixed;
		top:-.5em;
		left:-1.5em;
		width: calc(100% + 2em);
		padding:1em 2em;
		overflow: hidden;
		max-width: unset;
		max-height: unset;
		height:5em;
		background-color: var(--magenta-light);
		transition: height 0.2s cubic-bezier(1,0,.5,1);
		z-index: 3;
	}
	header.open{
		transition: height 0.2s cubic-bezier(0,0,0,1);
		height:95vh;
	}
	header nav{
		border-top: .1em solid var(--indigo-dark);
		margin-top: .7em;
		padding-top: 1em;
	}
	.logo{
		position:absolute;
		top:-3.1em;
		width:3em;
		right:0
	}
	.menu-button{
		display:block;
		width:3em;
		height:3em;
		background-color: inherit;
	}
	.menu-button object{
		width:100%;
		height: 100%;
		pointer-events: none;
	}
	/* layout */
	main{
		margin-top: 2.2em;
		max-width: 98vw;
		margin-inline: auto;
	}
	.projects{
    	grid-template-columns:1fr;
	}
	.projects article .background{
    	--bg-grad-color: rgb(76, 53, 168);
		transform: scale(1.1);
	}
	.projects section{
    	position: relative;
    	z-index:2;
	}
	.projects h2{
		border:unset;
		background-color:unset;
		color: var(--off-white);
		padding:0;
		text-align: center;
		border-radius: unset;
	    transform: unset;
	    transition: unset;
		line-height: 98vw;
	}
	.projects article:hover h2,.projects article:active h2,.projects article:focus h2{
    	transform: unset;
	}
	.embed{
		max-height: 98vw;
	}
	.shopbanner{
		display:grid;
    	grid-template-columns: 1fr;
	}


	@keyframes pane-entry{
		from{ top: 0; }

		to{ top:-110%; }
	}
	@keyframes pane-exit{
		from{ top:110%; }

		to{ top:0; }
	}
	#pane{
		--bg-size:6em;
		border-inline:unset;
		border-block:1em solid var(--bg-color);

	}
	/* hacks */
	.longname{ font-size: min( calc( 90vw / 11 ),2.4rem);}

}

/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  body{
	background-image: url(../res/goodnightkitty.png);
  }
  .marquee * {
    animation-iteration-count: 1;
    animation-duration: 0.01; 
    /* instead of animation: none, so an animationend event is 
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
}