:root {
	--dblue:#171e33;
	--blue:#32477c;
	--lblue:#6d8bd7;
	--paleblue:#c9cfde;
	--lgrey:#e1e5e6;
	--accent:#4cd477;
	--nav_width:400px;
	--global_padding_inline:min(3rem,5vw);
	--global_padding_block:5vw;

	interpolate-size: allow-keywords;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter:stable;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:1rem;
}

.wrap {
  position:relative;
  padding:0 1rem;
  max-width:100%;
  margin:0 auto;
  clear:both;
}

.skip-nav-link {
	position:absolute;
	left:1rem;
	top:0;
	background-color:#000;
	color:#fff;
	padding:0.5rem 1.5rem;
	border-radius: 0 0 0.25rem 0.25rem;
	z-index:100;
	transform:translateY(-120%);
	transition:transform 0.325s ease-out;
}

	.skip-nav-link:focus {
		transform:translateY(0);
	}

#burger {
  display:none;
}

.container {
	container-type: inline-size;
}

body {
	background-color:#eee;
	color:#333;
	font-family: "Inter", sans-serif;
	max-inline-size: 1600px;
	margin-inline:auto;
}

header {
	position:sticky;
	padding:1.5rem var(--global_padding_inline);
	left:0;
	top:0;
    width:100%;
	/* background-color:#eee; */
	/* border-bottom:1px solid #ddd; */
	display:grid;
	grid-template-columns: max-content 1fr;
	grid-gap:2rem;
	align-items:center;
	z-index:100;
}

	#logo {
		float:left;
		width:200px;
    }
  
		#logo img {
			width:100%;
		}

	nav {
		position:fixed;
		width:var(--nav_width);
		max-width:100vw;
		right:calc(-1 * var(--nav_width));
		height:100%;
		top:0;
		background-color:var(--paleblue);
		padding:3rem;
		z-index:100;
		transition:right 0.25s ease-out;
		overflow-y:auto;
	}
		
		nav ul {
			list-style:none;
			float:right;
			display:grid;
			align-items:center;
			align-content:center;
			height:100%;
		}
		
			nav li {
				float:left;
			}
			
				nav :is(ul,li,a) {
					float:left;
					clear:left;
					width:100%;
					text-align: left;
					padding-inline:0;
					text-decoration: none;
				}

				nav a {
					display:grid;
					grid-template-columns: 32px max-content;
					grid-gap:0.5rem;
					align-items:center;
					margin-bottom:0.75rem;

					& p {
						margin:0;
					}

					& .pic img {
						border-radius:5px;
					}
				}
	

	.right {
		display:grid;
		justify-items: end;
		align-items: center;

		& .btns {
			position: relative;
			width:max-content;
			z-index:101;

			& a {
				float:right;
			}
		}
	}

	header:has(#burger-checkbox:checked) nav {
		right:0;
	}

	#burger {
		position:relative;
		display:block;
		float:right;
		width:3rem;
		padding:0.75rem;
		background-color:#fff;
		border-radius:100rem;
		z-index: 101;
		margin:0 0 0 1rem;

		&:hover {
			background-color:var(--accent);
		}
	}

		#burger input {
			position:absolute;
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
			margin:0;
		}

	#scan-button {
		background:none;
		display:grid;
		grid-template-columns: max-content 1.5rem;
		align-items:center;
		font-weight:400;
		color:var(--blue);
		/* grid-template-columns: max-content 2rem; */
		outline:none;
		border:none;
		text-transform: uppercase;
		z-index:101;
		background-color:#fff;
		border-radius: 100rem;
		padding:0.75rem;
		grid-gap:0.25rem;

		&:hover {
			background-color:var(--accent);			
		}
	}

	.tooltip {
		position:absolute;
		bottom:100%;
		left:50%;
		max-width:100%;
		transform:translateX(-50%);
		background-color:#fff;
		color:#000;
		padding:0.5rem;
		font-size:0.8rem;
	}

button {
	cursor: pointer;
}

.scanpopup {
	display:none;
	position:fixed;
	width:100vw;
	height:100vh;
	inset:0;
	backdrop-filter:blur(5px);
	z-index:102;

	&.visible {
		display:block;
	}

	& .inner {
		height:100%;
		width:100%;
		overflow-y:auto;
	}
}

#stop-button {
	position: absolute;
	top:1rem;
	left:50%;
	transform:translateX(-50%);
	z-index:2;
	background:none;
	outline:none;
	border:none;
	padding:0.75rem;

	background-color:#fff;

	display:grid;
	grid-template-columns: max-content 1.5rem;
	gap:0.25rem;
	align-items: center;
	border-radius:100rem;

	& span {
		font-weight:bold;
		text-transform: uppercase;
		color:var(--blue);
	}

	&:hover {
		background-color:var(--accent);
	}
}

#qr-reader,
#qr-reader video {
	width:100%;
	height:100%;
}

.loading {
	position:relative;
}

.loading::before {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	inset:0;
	background-color:#fffc;
	z-index:1;
}

.loading::after {
	content:'';
	position:absolute;
	width:5px;
	height:5px;
	background-color:var(--blue);
	display:grid;
	justify-self:center;
	translate:-13px 0;
	z-index:2;
	animation: stepmove 0.75s steps(5, jump-start);
	animation-iteration-count: infinite;
}

#loading-cover {
	display:none;
	position:fixed;
	inset:0;
	height:100vh;
	height:100dvh;
	width:100vw;
	backdrop-filter:blur(5px);
	align-items: center;
}

@keyframes stepmove {
  from {translate:-13px;}
  to {translate:13px;}
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:0.5lh;
	text-wrap:balance;
	line-height:1.2;
}

h1 {
	font-size:2.5rem;
}

main {
	padding:var(--global_padding_block) var(--global_padding_inline);
}

main::before {
	content:'';
	width:100vw;
	height:100vh;
	height:100lvh;
	position:fixed;
	top:0;
	left:0;
	/* background:linear-gradient(270deg,#eee,var(--paleblue)); */
	z-index:-1;
}

main p,
main li {
	font-size:1rem;
	line-height:1.6;
	margin-bottom:1rem;
	clear:left;
}

.large_text {
	font-size:3rem;
}
.medium_text {
	font-size:1.875rem;
}
.small_text {
	font-size:1.18rem;
}

.blue_text {
	color:var(--blue);
}

main ul,
main ol {
	margin-block:2rem;
}

  main li {
    padding-left:1rem;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5rem 1rem 1rem 0;
}

img.align_right {
  margin:0.5rem 0 1rem 1rem;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1rem;
}

input,
textarea {
	background-color:var(--lgrey);
	border:0;
	border-radius:0.5rem;
	padding:1rem;
	font-size:1rem;
}

label {
	margin-bottom:0.5rem;
}

form {
	width:min(500px,100%);
	background-color:#fff;
	border-radius:1rem;
	padding:min(3rem,5vw);
}

.blue-btn,
form button {
	background-color:var(--lblue);
	outline:none;
	border:none;
	padding:1rem 1.5rem;
	border-radius:0.25rem;
	color:#fff;
	cursor:pointer;
}

	.blue-btn:hover,
	form button:hover {
		/* hsl(from var(--lblue) h s 110% / 1); /* includes opacity at end */
		background-color:var(--accent);
	}

.errortext {
	color:red;
	font-weight:bold;
}
  
footer {
	clear:both;
	grid-column: 1/-1;
}

	.copyright {
		font-size: 0.7rem;
		opacity:0.6;
		margin-top:2rem;
	}

@media screen and (max-width:450px) {
	header {
		padding:0.5rem 1rem;
		grid-gap:1rem;
	}
	#burger {
		margin-left:0.5rem;
	}
	#scan-button {
		margin-left:0;
	}
	#logo {
		max-width:calc(100vw - 146px - 3rem);
	}
}

@media screen and (max-width:350px) {

	header {
		gap:1.25rem;
		grid-template-columns: 1fr max-content;
	}

	#logo {
		width:100%;
	}
}