:root {
	background-attachment:fixed;
	--primary:#2193db;
	--secondary:#04151F;
	--alt-blue:#2193db;
	--fancy-yeller:#fc9312;
	--dusky-gray:#181818;
}

*, *:before, *:after{
	box-sizing:border-box;
	padding:0; margin:0;
	text-decoration:none;
	color:#000;
}

html, body, p, input {
	font:300 16px/1.25 Rubik, Arial; font-optical-sizing:auto; font-style:normal;
}

html {
	height:100%;
}

body {
	container:body / inline-size;
	height:100dvh;
	overflow-y:hidden;
	display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch;
	background:no-repeat left/100% url('../media/hexgrill-q20-2955x1330.jpg'); background-size:cover; background-position:center; 
	--border:solid 2px pink;
}

p {
	color:inherit;
}

p:not(:last-child) {
	margin-bottom:0.5rem;
}

/* article.announcement {
	padding:1rem;
	background-color:coral;
	display:none;
} */

header {
	
	--border:dashed 3px green;

	& nav {
		margin:0px auto; --padding:1rem 0;
		display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;
		background-color:transparent;
		--border:solid 2px teal;
	}

	& nav .menu {
		display:flex; flex-flow:row nowrap; justify-content:center; align-items:center;
		& svg {
			width:1rem; aspect-ratio:1;
			stroke:none; fill:#fff;
			transform:translateY(2px);
			--border:solid 1px pink;
		}
	}

	& nav button {
		background:transparent;
		border:none; outline:none; cursor:pointer;
		color:#fff;
	}

	& nav button.logo {
		display:flex; flex-flow:row nowrap; justify-content:center; align-items:center;

		& svg {
			width:40px; aspect-ratio:1; margin:0 .5rem 0 0;
			--border:solid 1px pink;
		}

		& svg .logo-left-half {
			fill:var(--secondary);
			stroke:none;
		}

		& svg .logo-right-half {
			fill:var(--primary);
			stroke:none;
		}

		& svg .logo-outer-perimeter {
			fill: #fff;
			stroke:none;
		}

		& .brand {
			position:relative; top:-0.2rem;
			font-size:1.3rem; font-weight:300; letter-spacing:-1px;
			color:rgba(255,255,255,0.5);
		}

	}

}

main {

	flex:1;
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center;
	overflow:hidden;
	--border:solid 2px red;
	--display:none;

}

.page {

	flex:0 0 100%;
	width:100%; height:100%;
	display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center;
	overflow:hidden;
	--transform:translateX(-20vw);
	--border:solid 3px blue;

}

/* .page:nth-child(1) {
	border:solid 10px blue;
}

.page:nth-child(2) {
	border:solid 10px rebeccapurple;
}

.page:nth-child(3) {
	border:solid 10px gold;
}

.page:nth-child(4) {
	border:solid 10px pink;
} */

/* 
input {
	margin:0 0 0.5rem 0; padding:0.8rem;
	line-height:100%;
	color:var(--primary); background:transparent;
	outline:none; border:solid 4px red; border-bottom:dotted 4px #c8c8c8;
} */

main .page section {
	
	margin:0px auto; height:100%;
	display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:center;
	--border:solid 3px red;
	--overflow:hidden;

	& article {
		display:flex;
		--border:solid 2px white;
	}

	& article h1 {
		padding:0 0 1rem 0;
		font-size:1.6rem; font-weight:400;
		color:#fff;

		& .emphasis {
			color:var(--primary);
		}
	}

	& article .subheading {
		display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center;
	}

	& article .subheading h2 {
		margin-right:0.3rem;
		font-size:1rem; font-weight:300;
		color:#b0b0b0;
		--border-radius:1rem;
	}

	& article .subheading svg {
		height:1rem;
		stroke:none;
		fill:#fff;
		--border:solid 1px pink;
	}

}

.dialog {
	position:relative;
	padding:1rem;
	color:#fff; background-color:rgba(0,0,0,1);
	border-radius:0.5rem;
	transform:translateY(100dvh);		/* Move down off page for opening animation */
	--border:solid 1px yellow;

	& .chat-container {
		width:100%; height:40dvh; padding:0.6rem;
		overflow-y:hidden; scroll-snap-type:y mandatory;
		display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
		border:solid 1px #606060;
	}

	& .chat-container .comment {

		display:inline-block;
		scroll-snap-align:end; scroll-margin-bottom:1rem;
		overflow-anchor:none;
		max-width:70%; margin-bottom:1rem; padding:0.4rem;
		font-size:0.8rem;
		border-radius:0.25rem;
		--border:solid 1px yellow;

	}

	& .chat-container .comment.agent {

		align-self:flex-start;
		background-color:var(--primary);

		& .badge {
			padding-bottom:0.3rem;
			font-size:0.6rem;
			color:#000;
		}

		& .text {
			color:#fff;
		}

	}

	& .chat-container .comment.user {

		align-self:flex-end;
		background-color:#606060;

		& .badge {
			color:#000;
		}

		& .text {
			color:#fff;
		}

	}

	& .new-comment {

		margin-top:1rem; padding:0.6rem 1rem; width:100%;
		font-size:1rem;
		color:#fff; background-color:#808080;
		border:0; outline:0; border-radius:2rem;

	}

}

#anchor {
  overflow-anchor:auto;
  height:1px;
}

.link {
	position:relative;
	text-decoration:none;

	&.active:before, &.active:after { 
		opacity:1;
		transform:translateY(0);
		background-color:var(--primary);
	}

	&:before, &:after {
		content:'';
		position:absolute;
		bottom:18px;
		left:0;
		right:0;
		height:1px;
		background-color:var(--primary);
	}

	&:before {
		opacity:0;
		transform:translateY(-8px);
		transition:transform 0s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity 0s;
	}

	&:after {
		opacity:0;
		transform:translateY(-8px);
		transition:transform .25s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity .2s;
	}

	&:hover, &:focus {

		&:before, &:after {
			opacity:1;
			transform:translateY(0);
		}

		&:before {
			transition:transform .25s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity .2s;
		}

		&:after {
			transition:transform .25s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity .2s;
		}
	}
}

@container body (max-width:799px) {

	nav {
		padding:1rem;

		& .menu button {
			font-size:0.7rem; font-weight:300;
			color:rgba(255,255,255,0.8);
		}

	}

	main .page section {
		width:100%;
		display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; row-gap:2rem;
		--border:dashed 3px green;

		& article {
			width:calc(100% - 2rem); flex:0;
			display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center;
			--border:solid 2px pink;
		}

		& article.slogan {
			--border:solid 2px firebrick;
		}

		& article h1 {
			margin:0; padding:0 0 1rem 0;
			font-size:1.2rem; text-align:center;
		}

		& article h2 {
			margin:0; padding:0;
			font-size:1.0rem; text-align:center;
		}

	}

}

@container body (min-width:800px) {

	nav {

		width:60%; padding:1rem 0 1rem 0;
		--border:dotted 4px firebrick;

		& .menu button {
			font-size:0.8rem; font-weight:300;
			color:rgba(255,255,255,0.8);
		}

	}

	main .page section {
		width:60%;
		display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; column-gap:2rem;
		--border:dashed 3px blue;

		& article {
			width:48%; flex:0 0 48%;
			display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-start;
			--border:solid 2px pink;
		}

		& article h1, & article h2 {
			text-align:left;
		}

	}

}