/* experimental home page styles */

.panel-container {
	display: flex;
	flex-direction: row;
	gap: 0;
	height: 100dvh;
	width: 100dvw;
	overflow-y: hidden;
}

.field-panel a {
	color: var(--page-color);
}

.panel-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: min(3dvh, 4.5dvw);
	color: var(--accent-one);
	width: 60dvh;
	height: 100dvh;
	padding: 0 0 0 3dvw;
}

.panel-wrapper img {
	height: 7dvh;
	max-width: 80dvw;
	margin: 3dvh 0 0 0;
}

.panel-wrapper h3 {
	line-height: 1.4em;
	margin-bottom: .8em;
}

.panel-wrapper a {
	color: var(--accent-one);
}

.info-panel {
	font-size: 2.5dvh;
	width: 60dvh;
	margin: .8rem 0 .8rem min(2.4rem, 5dvw);
}

.slant-edge {
	float: left;
	width: 18dvh;
	height: 106dvh;
	shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
}

.field-panel:first-of-type {
	position: sticky;
	left: 0;
	z-index: 1;
	height: 100dvh;
	min-width: calc(100dvw - 56dvh);
}

.field-panel:nth-of-type(n+2) {
	width: 60dvh; 
	padding: 0 0 0 17dvh;
}

.field-panel:nth-of-type(n+2) div.info-panel {
	transform: translate(-18dvh, -5dvh);
	width: 56dvh;
}

.field-panel:nth-of-type(2) {
	z-index: 1;
	position: sticky;
	left: 20dvw;
	right: -16dvh;
	color: var(--page-color);
	background-color: var(--accent-one);
}

.field-panel:nth-of-type(2) div.slant-panel {
	color: var(--page-color);
	background-color: var(--accent-one);
	position: relative;
	z-index: 5;
}

.field-panel:nth-of-type(3) {
	z-index: 2;
	position: sticky;
	left: calc(20dvw + 17dvh);
	right: -38dvh;
	color: var(--page-color);
	background-color: var(--accent-two);
}

.field-panel:nth-of-type(3) div.slant-panel {
	color: var(--page-color);
	background-color: var(--accent-two);
	position: relative;
	z-index: 5;
}

.field-panel:nth-of-type(4) {
	z-index: 3;
	position: sticky;
	left: calc(20dvw + 34dvh);
	width: min(60dvh, calc(80dvw - 51dvh));
	right: max(-60dvh, calc(51dvh - 80dvw));
	color: var(--page-color);
	background-color: var(--accent-three);
}

.field-panel:nth-of-type(4) div.slant-panel {
	color: var(--page-color);
	background-color: var(--accent-three);
	position: relative;
	z-index: 5;
}

.field-panel:nth-of-type(5) {
	z-index: 4;
	position: fixed;
	right: -82dvh;
	/* This is based on the width of a field panel */
}

.field-panel:nth-of-type(5) div.slant-panel {
	color: var(--accent-one);
	background-color: var(--accent-one);
}

.field-panel:last-of-type {
	z-index: 4;
	position: fixed;
	bottom: 0;
	right: 0;
	height: 5dvh;
	width: 2dvh;
}

.field-panel .social-icons {
	font-size: 2dvh;
	position: absolute;
	bottom: 1em;
	right: 1em;
	flex-direction: column;
}

.slant-panel {
	transform-origin: top left;
	transform: rotate(102deg);
	flex: 0 0 auto;
	width: 106dvh;
	background: var(--accent-one);
}

.slant-panel h2 {
	font-size: 15dvh;
	text-align: center;
	white-space: nowrap;
	font-variant: all-small-caps;
	transform: scale(-1,-1);
	border-top: .2dvh solid var(--detail-color);
}

.slant-panel p {
	font-size: 3dvh;
	text-align: right;
	white-space: nowrap;
	font-variant: all-small-caps;
	transform: scale(-1,-1);
	padding: 0 0 3dvh 0;
	margin-inline-start: -14dvh;
}

.slant-panel a {
	font-family: strawford;
	margin-inline: 1.5em;
}

@media screen and (max-width: 150dvh) {
	.field-panel:first-of-type {
		min-width: calc(100dvw - 41dvh);
	}
	
	.field-panel:nth-of-type(2) {
		right: -31dvh;	
	}
	
	.field-panel:nth-of-type(3) {
		right: -48dvh;
	}
	
	.field-panel:nth-of-type(4) {
		width: min(60dvh, calc(80dvw - 51dvh));
		right: max(-65dvh, calc(46dvh - 80dvw));
	}
}

@media screen and (max-width: 125dvh) {
	.panel-container {
		flex-direction: column;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	.panel-wrapper {
		width: 85dvw;
		max-width: 25em;
		height: calc(100dvh - 70dvw);
		margin: 0 auto 0 auto;
		padding: 0 0 0 3dvw;
	}
	
	.panel-wrapper img {
		margin-bottom: 3dvh;
	}
		
	.info-panel {
		font-size: 3dvw;
		width: 85dvw;
		margin: 0 auto 0 auto;
	}
	
	.slant-edge {
		display: none;
	}
	
	.field-panel:first-of-type {
		top: 0;
		width: 100dvw;
		min-height: calc(100dvh - 28dvw);
	}
	
	.field-panel:nth-of-type(n+2) {
		width: 100dvw;
		height: 85dvw;
		padding: 0 0 15dvw 0;
	}
	
	.field-panel:nth-of-type(n+2) div.info-panel {
		transform: revert;
		transform: translateY(-7dvw);
		width: 85dvw;
		margin: 2dvw auto 0 auto;
	}
	
	.field-panel:nth-of-type(2) {
		position: sticky;
		top: 0dvh;
		bottom: -43dvw;
		left: revert;
		right: revert;
	}
	
	.field-panel:nth-of-type(2) div.slant-panel {
		position: static;
	}

	.field-panel:nth-of-type(3) {
		position: sticky;
		top: calc(0dvh + 10.5dvw);
		bottom: -49dvw;
		left: revert;
		right: -revert;
	}
	
	.field-panel:nth-of-type(3) div.slant-panel {
		position: static;
	}
	
	.field-panel:nth-of-type(4) {
		position: sticky;
		top: calc(0dvh + 21dvw);
		bottom: -64dvw;
		left: revert;
		width: 100dvw;
		right: revert;
		/* height: min(85dvw, calc(100dvh - 10dvw));
		bottom: max(-58dvw, calc(10dvw - 100dvh)); */
	}
	
	.field-panel:nth-of-type(4) div.slant-panel {
		position: static;
	}
	
	.field-panel:nth-of-type(5) {
		position: fixed;
		right: revert;
		bottom: -103dvw;
	}
	
	.field-panel:last-of-type {
		position: fixed;
		bottom: 0;
		right: 0;
		height: 5dvh;
		width: 5dvh;
	}
	
	.field-panel:last-of-type div.info-panel {
		transform: revert;
	}
	
	.field-panel .social-icons {
		font-size: 2.5dvw;
		flex-direction: row;
	}
	
	.slant-panel {
		transform: revert;
		transform-origin: top left;
		transform: rotate(-12deg);
		width: 103dvw;
	}
	
	.slant-panel h2 {
		font-size: 13dvw;
		transform: revert;
		text-align: left;
		line-height: .7;
		padding: 0 0 4dvw 0;
		padding-inline-start: 7dvw;
	}
	
	.slant-panel p {
		font-size: 3dvw;
		transform: revert;
		margin: -8dvw 0 0 0;
		padding: 0 0 8dvw 0;
		margin-inline-start: 0;
		text-align: center;
	}
}

@media screen and (max-width: 90dvh) {
	
	.field-panel:first-of-type {
		min-height: calc(100dvh - 35dvw);
	}
	
	.field-panel:nth-of-type(2) {
		bottom: -22dvw;
	}

	.field-panel:nth-of-type(3) {
		bottom: -35dvw;

	}
	
	.field-panel:nth-of-type(4) {
		bottom: -57dvw;
	}
	
}

@media screen and (max-height: 50rem) {
	
	/* Looking for a way to simplify the design with user scaling  */
}

@media (prefers-color-scheme: dark) {
	
	.panel-wrapper {
		color: var(--detail-color);
	}
	
	.panel-wrapper a {
		color: var(--detail-color);
	}
	
	.field-panel a {
		color: var(--detail-color);
	}
	
	.field-panel:nth-of-type(2) {
		color: var(--detail-color);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(2) a {
		color: var(--accent-one);
	}
	
	.field-panel:nth-of-type(2) div.slant-panel {
		color: var(--accent-one);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(3) {
		color: var(--detail-color);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(3) a {
		color: var(--accent-two);
	}
	
	.field-panel:nth-of-type(3) div.slant-panel {
		color: var(--accent-two);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(4) {
		color: var(--detail-color);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(4) a {
		color: var(--accent-three);
	}
	
	.field-panel:nth-of-type(4) div.slant-panel {
		color: var(--accent-three);
		background-color: var(--page-color);
	}
	
	.field-panel:nth-of-type(5) div.slant-panel {
		color: var(--page-color);
		background-color: var(--page-color);
	}
	
}

/* end experimental home page styles */